标签：网页 入门 Python 标签 笔记 HTML nbsp Java
HTML
@author：伏月廿柒
Hyper Text Markup Language(超文本标记语言)
W3C标准
结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）
网页基本信息
<!DOCTYPE html>
<!-- DOCTYPE：告诉浏览器，该页面使用什么规范 -->
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
<!-- meta描述性标签，它用来描述我们网站的一些信息 -->
<!-- meta一般用来做SEO -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- title网页标题 -->
<title>Demo01</title>
</head>
<!-- body标签代表网页主体 -->
<body>
Hello,World!
</body>
</html>
网页基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo02</title>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!-- 段落标签 -->
<p>第一段 ……</p>
<p>第二段 ……</p>
<p>第三段 ……</p>
<p>第四段 ……</p>
<!-- 水平线标签 -->
<hr/>
<!-- 换行标签 -->
第一行 ……<br/>
第二行 ……<br/>
第三行 ……<br/>
第四行 ……<br/>
<!-- 粗体，斜体 -->
<h1>字体样式标签</h1>
粗体：<strong>这是一段文字</strong>
<br/>
斜体：<em>这是一段文字</em>
<br/>
<!-- 特殊符号 -->
空 格
<br/>
空 格
<br/>
大于：>
<br/>
小于：<
<br/>
版权号：©
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo03</title>
</head>
<body>
<!-- alt：图片名字 title：悬停文字 -->
<img src="../image/1920x1080.jpg" alt="1920x1080.jpg" title="悬停文字" width="300" height="300">
<!-- 锚链接
页面之间跳转标记
-->
<p>
<a href="Demo04.html#down">Demo04_down</a>
</p>
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo04</title>
</head>
<body>
<!-- name标记 -->
<p>
<a name="top">顶部</a>
</p>
<!-- a标签 -->
<!-- href：必填，指定页面地址 -->
<!-- target：表示窗口在哪里打开
_blank：在新窗口打开
——self：在本窗口打开
-->
<a href="Demo01.html" target="_blank">Demo01</a>
<br/>
<a href="https://www.baidu.com" target="_self">百度</a>
<br/>
<a href="Demo02.html">
<img src="../image/1920x1080.jpg" alt="1920x1080.jpg" title="Demo02" width="300" height="200">
</a>
<p>
<img src="../image/1920x1080.jpg" alt="1920x1080.jpg" title="Demo02" width="1920" height="1080">
</p>
<p>
<a name="down">底部</a>
</p>
<!-- 锚链接
通过#跳转到标记
-->
<a href="#top">回到顶部</a>
<!-- 功能性链接
邮件链接：mailto
QQ链接：QQ推广
-->
<a href="mailto:123456@mail.com">联系邮箱</a>
</body>
</html>
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo05</title>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
</ol>
<!-- 无序列表 -->
<!-- 应用范围：导航、侧边栏 -->
<ul>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
</ul>
<!-- 自定义列表 -->
<!--
dl：标签
dt：列表名称
dd：列表内容
-->
<!-- 应用范围：网页底部导航 -->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>C/C++</dd>
<dt>地区</dt>
<dd>西安</dd>
<dd>重庆</dd>
<dd>新疆</dd>
</dl>
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo06</title>
</head>
<body>
<!-- 表格标签 table -->
<!--
行 tr
列 td
-->
<table border="1px">
<tr>
<!-- colspan 跨列 -->
<td colspan="4">1-1</td>
</tr>
<tr>
<!-- rowspan 跨行 -->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
视频和音频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo07</title>
</head>
<body>
<!-- 音频和视频 -->
<!--
src：资源地址
controls：控制条
autoplay：自动播放
-->
<video src="" controls autoplay></video>
<audio src="" controls autoplay></audio>
</body>
</html>
页面结构分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo08</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo09</title>
</head>
<body>
<!-- B站示例 -->
<!-- <iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe> -->
<!-- iframe 内联框架-->
<!--
src：地址
w-h：宽高
-->
<iframe src="https://www.bilibili.com" name="hello" frameborder="10" width="1000px" height="800px"></iframe>
<!-- a标签可指定iframe打开页面 -->
<a href="https://www.csdn.net" target="hello">CSDN</a>
</body>
</html>
表单post和get提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo10</title>
</head>
<body>
<h1>注册</h1>
<!-- 表单 form -->
<!--
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
get方式提交：可以在url中看到我们提交的信息，不安全，高效
post方式提交：比较安全，可以传输大文件
-->
<form action="Demo01.html" method="get">
<!-- 文本输入框：input type="text" -->
<!--
value：默认初始值
maxlength：最大字数长度
size：文本框长度
readonly：只读
hidden：隐藏
placeholder：提示信息
required：非空判断
pattern：正则表达式
-->
<p>名字：<input type="text" name="username" maxlength="8" size="20" value="admin" readonly></p>
<!-- 密码输入框：input type=“password” -->
<p>密码：<input type="password" name="pwd" placeholder="请输入密码" required
pattern="/^[a-z0-9_-]{6,18}$/" ></p>
<p>验证码：<input type="text" name="captcha" hidden></p>
<!-- 单选框：input type="radio" -->
<!--
value：单选框的值
name：单选框的组
checked：默认选中
disabled：禁用，不可选择
-->
<p>性别：
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女
<input type="radio" value="it" name="sex" disabled>它
</p>
<!-- 多选框：input type="checkbox" -->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">编程
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
<!-- 按钮：input type="button" -->
<p>按钮：
<input type="button" name="btn1" value="点击">
<input type="image" src="../image/1920x1080.jpg" height="100" width="200"> <!-- 提交 -->
</p>
<!-- 下拉框，列表框 -->
<p>下拉框：
<select name="列表名称">
<option value="选项的值1">选项1</option>
<option value="选项的值2">选项2</option>
<option value="选项的值3" selected>选项3</option>
<option value="选项的值4">选项4</option>
</select>
</p>
<!-- 文本域 -->
<!--
cols：列
rows：行
-->
<p>反馈：
<textarea name="textarea" cols="20" rows="10">文本内容</textarea>
</p>
<!-- 文件域 input type="file" -->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!-- 邮箱验证 input type="email" -->
<p>邮箱：
<input type="email" name="email">
</p>
<!-- URL input type="url" -->
<p>URL：
<input type="url" name="url">
</p>
<!-- 数字 input type="number" -->
<p>数字：
<input type="number" name="num" max="100" min="0" step="1">
</p>
<!-- 滑块 input type="range" -->
<p>
<input type="range" name="range" min="0" max="100" step="2">
</p>
<!-- 搜索框 -->
<p>搜索：
<input type="search" name="search">
</p>
<!-- 增强鼠标可用性 label -->
<!-- label 可以指向鼠标位置 -->
<p>
<label for="mark">点击</label>
<input type="text" id="mark">
</p>
<p>
<!-- submit 和 image 提交区别，image提交时会附带按钮点击位置的坐标x,y -->
<input type="submit"> <!-- 提交 -->
<input type="reset" value="清空表单"> <!-- 重置 -->
</p>
</form>
</body>
</html>
标签：网页,入门,Python,标签,笔记,HTML,nbsp,Java 来源： https://www.cnblogs.com/by0627/p/15980841.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。