一.专业词汇概念
在线帮助文档：https://www.w3school.com.cn/
查看全部标签地址： https://www.w3school.com.cn/tags/index.asp
1.标签（Tag）
1.标记(签)是HTML语言的基本部分；
2.标签是分层次的；多数标记总是成对出现，包括开始标签和结束标签；
3.根标签是html，包括两个子标签head和body；
4.标签不区分大小写。例<html><HTML>都可以；
5.标签分为单标签和双标签。
2.属性和属性值
1.附属于标签，对标签的特征进行设置；
2.属性的值可以用双引号引起来（单引号也可以）；
3.属性和属性值不区分大小写；
4.属性之间无先后次序，属性也可省略（即取默认值）；
5.属性都是写在开始标签中 ；
6.属性和属性值是一一对应的。
属性的一般写法：<开始标签 属性1:属性值 属性2:属性值></结束标签>
3.文本（Text）
1.标签的内容可以是子标签或者普通文本；
2.最内层标签的内容称为文本；
3.外层标签的内容也可以统称为文本。
比如：
<body>
<h1>标题</h1>
<p>我是</p>
黑虎阿福
</body>在这段简单代码中，body标签的文本，一般是指”黑虎阿福“这四个字，而”我是“一般说它是p标签的文本。
4.元素（Element）
一般来说，我们把：开始标记+中间内容+结束标记，当作是一个元素，也就是说一个完整的标签我们也称之为为网页上的一个元素
二.标题标签和段落标签
在我们写网页的时候，有时候会接触一些文章或长篇文字，这时候我们就会使用到标题标签和段落标签。
1.标题标签
顾名思义，标题标签一般是设置标题的标签，标题标签一共有h1~h6，总共六级标签。
<body>
<!--标题标签 h1 ~ h6 总共六级标签-->
<h1>这是一级标签</h1>
<h2>这是二级标签</h2>
<h3>这是三级标签</h3>
<h4>这是四级标签</h4>
<h5>这是五级标签</h5>
<h6>这是六级标签</h6>
</body>2.段落标签
段落标签 ：p标签
1.被p标签包裹的一段文字就是单独的一个段落；
2.段落与段落之间是自动换行；
3.每一对p标签独占一行。
换行标签：<br/> 标签，放在哪里哪里就换行
在HTML中，文本是不会自动换行的，所以有时候我们要控制文本的段落换行，就要借助p标签或者br标签。
<!--
段落标签 p标签
被p标签包裹的一段文字就是单独的一个段落
段落与段落之间是自动换行
每一对p标签独占一行
<br/> 换行标签 放在哪里哪里就换行
实现段落的换行， 要借助p标签或者br标签
-->
<p>相比于一线城市纷纷升级调控政策让楼市退烧，部分三四线城市正在迎接“逆向”调控。</p>
<p>8月21日，湖南岳阳发文规定商品房销售的实际成交价格既不能高于备案价格，也不得<br />
低于备案价格的85%，成为了第一个祭出“限跌令”的城市。</p>
<p>8月31日，江苏县级市江阴也对楼市发文提出：严禁低价（如低于成本价、变相降价等）<br />
倾销、打价格战，坚决杜绝恶性竞争、降标降质、逾期交付等违规违法行为。</p>
3.格式化标签
在网页设计中，我们有时要设计调整一些文本的格式，比如加粗或者放大缩小，这是我们就要借助文本格式化标签来对网页文本进行设计，文本格式化标签有很多，我们作为后端开发人员不可能每个都学会的，所以我们要学会查找标签，下面给出文本格式化标签的查找地址。
文档地址 HTML 文本格式化
<!--
文本格式化标签很多，我们作为后端开发人员不可能每个都学会的，所以我们要学会查找标签
查找地址:https://www.w3school.com.cn/html/html_formatting.asp
-->
文本格式化标签演示 <br/>
<b>文本格式化标签演示</b> <br/>
<big>文本格式化标签演示</big> <br/>
<em>文本格式化标签演示</em> <br/>
<i>文本格式化标签演示</i> <br/>
<strong>文本格式化标签演示</strong> <br/>
<sub>文本格式化标签</sub>演示 <br/>
<sup>文本格式化标签</sup>演示 <br/>
<ins>文本</ins>格式化标签演示 <br/>
<del>文本</del>格式化标签演示 <br/>格式化标签的嵌套：多种格式同时生效
注意：1.嵌套的格式：开始标签和结束标签要对应
2.合理嵌套 ：符合常理的嵌套，又变大又变小就不符合常理
<big><b><em><i>这是格式化标签嵌套的演示</i></em></b></big>font（字体）标签：设置字体大小、颜色等
<font color="blue" size="20px">这是font标签的演示</font>如果想要字体更加灵活多变，我们可以借助CSS重叠样式来控制字体
任何一个body中的标签，都可以通过style属性来使用CSS重叠样式
style属性中可以有很多值，一个样式名对应一个样式值，它的格式为：
<任意标签 style="样式名:样式值;样式名:样式值;"><任意标签/>
因此，我们上面学习的文本格式化标签只是简单调整一下文本格式，要是想调更复杂的样式，就要学习CSS
<!--
如果想要字体更加灵活多变，可以借助CSS重叠样式来控制字体
任何一个body中的标签，都可以通过style属性来使用CSS重叠样式
style属性中可以有很多值，一个样式名对应一个样式值，它的格式为：
<任意标签 style="样式名:样式值;样式名:样式值;"><任意标签/>
-->
<p style="font-size: 40px;font-family: '楷体';color: blue;background-color: yellow;text-decoration: underline;">CSS重叠样式控制字体演示</p>4.字符实体
实体字符：对HTML有特殊含义的符号，如果想以普通文本的方式把他们展示出来，那么就需要使用字符实体进行转义处理
字符实体查询地址：HTML 字符实体
<!--
实体字符：对HTML有特殊含义的符号，想以普通文本的方式展示出来，那么就需要使用字符实体进行转义处理
字符实体查询地址： https://www.w3school.com.cn/html/html_entities.asp
-->
<!--左右尖括号-->
<dr/> <br />
<!--空格-->
你 好 <br />
<!--&符号 比如想显示 -->
&nbsp; <br />其他特殊符号：对HTML没有特殊含义，但是我们用输入法又不好打出来的符号
特殊符号查询地址：HTML 符号
<!--
其他特殊符号
对HTML没有特殊含义，但是又不好打出来的符号
特殊符号查询地址：https://www.w3school.com.cn/tags/html_ref_symbols.html
-->
比如，举个栗子，后面这个就是个特殊符号：∃三.超链接和多媒体标签
1.超链接标签
超链接标签：a标签
作用：可以给文字、图片、音乐 其他标签添加超链接。
a标签的默认效果：会改变字体颜色，同时添加下划线。
a标签的属性：①href属性，设置连接的地址，可以是网络路径也可以是本地资源。
② target属性，设置连接的发开方式：_blank新建一页打开， _self当前网页打开
<body>
<!--
超链接标签：a标签
可以给文字、图片、音乐 其他标签添加超链接。
a标签的默认效果：会改变字体颜色，同时添加下划线。
a标签的属性：href属性，设置连接的地址，可以是网络路径也可以是本地资源。
target属性，设置连接的发开方式：_blank新建一页打开， _self当前网页打开
-->
<a href="https://www.baidu.com/" target="_blank">点击此处跳转到百度</a> <br />
<a href="01标题和段落.html" target="_blank">点击此处跳转到我自己的网页</a> <br />
</body>超链接完成锚点设置：
如果我们想要实现类似网页中一键返回顶部的操作，那么我们也可以通过超链接标签完成
1.通过href属性完成跳转，若要跳转至网页内部某个地方，则在在跳转锚节点前加#号
2.通过name属性设置锚节点
（PS：快捷键 br*100 + tab 可以快速生成大量<br/>）
<body>
<!--
超链接完成锚点设置
通过href属性完成跳转，若要跳转至网页内部某个地方，则在在跳转锚节点前加#号
通过name属性设置锚节点
（快捷键 br*100 + tab 可以快速生成大量<br/>）
这里的例子为了不占用过多篇幅，我就使用了不几个换行标签，你自己尝试时可以使用快捷键多弄几个换行标签然后看看效果
-->
<a name="top">这里是顶部，</a> <a href="#middle">点击此处跳转至中部</a>
<br />
<br />
<br />
<br />
<a name="middle">这里是中部，</a> <a href="#bottom">点击此处跳转至底部</a>
<br />
<br />
<br />
<br />
<a name="bottom">这里是底部，</a> <a href="#top">点击此处跳转至顶部</a>
</body>2.多媒体标签
①图片标签
图片：img标签
src属性（source来源）：设置图片的资源路径
1.src 可以是本地资源，也可以是网络资源
2.title属性：鼠标悬停与图片上时，显示的文字
3.alt属性：图片加载失败显示的文字
也可以给图片添加超链接，只需要把img标签套上a标签即可
<body>
<!--
图片：img标签
src属性（source来源）：设置图片的资源路径
src 可以是本地资源，也可以是网络资源
title属性：鼠标悬停与图片上时，显示的文字
alt属性：图片加载失败显示的文字
也可以给图片添加超链接，只需要把img标签套上a标签即可
-->
<img src="img/001.jpg" width="900px" height="600" title="埃罗芒阿老师" />
<a href="https://www.bilibili.com/video/BV1zQ4y117SU?from=search&seid=16053720197585798108&spm_id_from=333.337.0.0" target="_blank">
<img src="http://pic3.zhimg.com/50/v2-91895aaba2cb687f889e9b483e114dd8_720w.jpg? source=1940ef5c" title="胡桃胡桃胡桃！" alt="加载失败"/>
</a>
</body>效果演示：
②音频标签
音频：audio标签
audio标签可以是单标签，也可以是双标签，如果是双标签可以使用<source><source/>子标签添加多个音频文件，它会按照顺序检查文件是否可以播放，如果不可以，则检查下一个，直到有一个可以播放
src属性：设置音频的路径
controls属性：在页面上显示功能控
loop属性：控制循环播放
autoplay属性：控制自动播放（有些浏览器不支持自动播放）
如果一些属性和属性值相同的话，可以不写属性值，只写属性名
<body>
<audio src="audio/002.mp3" controls loop="loop" autoplay="autoplay"/>
<audio controls loop= loop>
<source src="audio/003.mp3"></source>
<source src="audio/004.mp3"></source>
<source src="audio/005.mp3"></source>
对不起，您的播放器暂不支持此文件
</audio>
</body>③视频标签
视频：video标签，video标签和audio标签基本一致
<body>
<video src="video/006.mp4" controls loop="loop" autoplay="autoplay" width="30%"/>
<video controls loop= loop>
<source src="video/006.mp4"></source>
对不起，您的播放器暂不支持此文件
</video>
</body>补充：
1.img不会换行
alt：图片不存在时的替换文本
title：鼠标移到图片上的提示文字
2.互联网图片类型
jpg：有损压缩 支持的颜色多
gif：无损压缩 颜色只支持256色
如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画
png：新一代网络图片格式 无损压缩，支持的颜色多
3.H5 Audio
音频 H5才开始支持
之前播放音频和视频，都需要利用第三方插件，比如flash player，而H5提供的音频和视频标签不需要外置插件，浏览器自己提供播放功能
当前，audio 元素支持三种音频格式：mp3 wav Ogg Vorbis
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式
4.H5 Video
当前，video 元素支持两种视频格式：mp4 ogg
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
有时候也会看到使用embed来播放音频视频
四.列表标签
1.有序列表
有序列表 older list ：ol标签
列表项 list item ：li标签
ol标签中的type属性：1 阿拉伯数字
a 小写英文字母
A 大写英文字母
i 小写罗马数字
I 大写罗马数字
<body>
<!--
有序列表 older list ：ol标签
列表项 list item ：li标签
ol标签中的type属性：
1 阿拉伯数字
a 小写英文字母
A 大写英文字母
i 小写罗马数字
I 大写罗马数字
-->
<ol type="a">
<li>小王</li>
<li>小李</li>
<li>小明</li>
<li>小刚</li>
<li>小红</li>
</ol>
</body>
2.无序列表
无序列表 unolder list ：ul标签
列表项 list item ：li
ul标签中的type属性：circle 小圆圈
disc 实心圆
square 小方块
<body>
<!--
无序列表 unolder list ：ul标签
列表项 list item ：li
ul标签中的type属性：
circle 小圆圈
disc 实心圆
square 小方块
-->
<ul type="disc">
<li>小王</li>
<li>小李</li>
<li>小明</li>
<li>小刚</li>
<li>小红</li>
</ul>
</body>
3.列表嵌套
列表的嵌套：列表和列表之间是可以互相嵌套的
<body>
<ul type="square">
<li>
一班
<ol type="1">
<li>小王</li>
<li>小李</li>
<li>小明</li>
<li>小刚</li>
<li>小红</li>
</ol>
</li>
<li>二班</li>
<li>三班</li>
<li>四班</li>
<li>五班</li>
</ul>
</body>
4.定义列表
定义列表 Defination list ：dl标签
作用：一般用于图文混排
dl标签中一般有dt和dd两个标签：dt标签：一般用于存放图片
dd标签：一般用于存放文字
<body>
<!--
定义列表 Defination list ：dl标签，一般用于图文混排
dl标签中一般有dt和dd两个标签
dt标签：一般用于存放图片
dd标签：一般用于存放文字
-->
<!--border 加边线 1像素 实心线 红色-->
<dl style="border: 1px solid red; width: 400px;">
<dt>
<a href="https://product.suning.com/0000000000/12302465830.html?safp=d488778a.13701.productWrap.11&safc=prd.0.0&safpn=10007" target="_blank">
<img src="https://imgservice.suning.cn/uimg1/b2c/image/JwgNs4q_-SQkYFl8RHgk8A.jpg_400w_400h_4e" title="万象双环设计 6400万像素 以旧换新至高补贴100元"/>
</a>
</dt>
<dd>
<font color="red" size="5px">
<small>¥</small>
<big><b>6488</big></b>
<small>.00</small>
</font>
<p style="font-size: 16px;">
<font color="red">华为</font>
/HUAWEI P50 Pro 8GB+256GB 曜金黑 搭载HarmonyOS 2 麒麟9000旗舰芯片 4G全网通手机
</p>
</dd>
</dl>
</body>
五.表格标签
1.表格标签基础
table标签：代表整张表格
tr标签：代表一行
td标签：代表每一个单元格
thead标签：表头
tbody标签：表体，如果我们不写，那么浏览器会给我们自动添加tbody
tfoot标签：表尾
如果我们要调样式的话，我们一般使用thead tbody tfoot 来划分样式作用的范围
th标签：相当于加粗和居中效果的td，一般用在thead中，但其他里面也可用
<body>
<!--
table标签：代表整张表格
tr标签：代表一行
td标签：代表每一个单元格
thead标签：表头
tbody标签：表体，如果我们不写，那么浏览器会给我们自动添加tbody
tfoot标签：表尾
如果我们要调样式的话，我们一般使用thead tbody tfoot 来划分样式作用的范围
th标签：相当于加粗和居中效果的td，一般用在thead中，但其他里面也可用
-->
<table border="1px" cellspacing="0px" cellpadding="0px" width="30%" align="center">
<thead bgcolor="darkgrey">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
<th>分数</th>
</tr>
</thead>
<tbody bgcolor="yellow">
<tr>
<td>小红</td>
<td>20</td>
<td>一班</td>
<td>60</td>
</tr>
<tr>
<td>小李</td>
<td>21</td>
<td>二班</td>
<td>70</td>
</tr>
<tr>
<td>小明</td>
<td>20</td>
<td>三班</td>
<td>80</td>
</tr>
<tr>
<td>小刚</td>
<td>20</td>
<td>四班</td>
<td>90</td>
</tr>
<tr>
<td>小强</td>
<td>22</td>
<td>五班</td>
<td>100</td>
</tr>
</tbody>
<tfoot bgcolor="antiquewhite">
<tr>
<td>总人数</td>
<td>5</td>
<td>总分数</td>
<td>400</td>
</tr>
</tfoot>
</table>
</body>
2.表格的跨行和跨列
快捷键：table>tr*m>td*n+Tab 生成一个m行n列的表格
①表格横向跨列，可借助td标签中的colspan（column span）属性来实现，colspan属性中的值就是该行td要跨的列数，之后不需要td就可以删除了
②表格纵向跨行，可借助td标签中的rowspan属性来实现，rowspan属性中的值就是该行td要跨的行数，之后不需要td就可以删除了
<body>
<!--
快捷键：table>tr*m>td*n+Tab 生成一个m行n列的表格
表格横向跨列可借助td标签中的colspan（column span）属性来实现，
colspan属性中的值就是该行td要跨的列数，之后不需要td就可以删除了
表格纵向跨行可借助td标签中的rowspan属性来实现，
rowspan属性中的值就是该行td要跨的行数，之后不需要td就可以删除了
-->
<table border="1px" cellpadding="0" cellspacing="0" width="30%" align="center">
<tr>
<th colspan="3">学生成绩单</th>
</tr>
<tr>
<th>姓名</th>
<th>学科</th>
<th>成绩</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>90</td>
</tr>
<tr>
<td>数学</td>
<td>80</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>90</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
</body>
3.表格的嵌套
表格的嵌套要学会把相关联的元素要放在同一个表格中，可以参照案例：自我尝试，希望可以对你有所启发
注意，表格的嵌套时，最好先写出表格的大致结构，然后再设计嵌套的表格，完成嵌套后，没有写内容的tr尽量不要删除，因为有些tr删掉后会制造成奇怪的格式错误，具体原理我暂时不了解，等我查阅资料后再对本条进行修改
<body>
<!--
表格的嵌套要学会把相关联的元素要放在同一个表格中，可以参照案例：自我尝试，希望可以对你有所启发
注意，表格的嵌套时，最好先写出表格的大致结构，然后再设计嵌套的表格，完成嵌套后，没有写内容的tr尽量不要删除，不然会制造成格式的错误，具体原理我暂时不了解，等我查阅资料后再对本条进行修改
-->
<table border="1px" cellspacing="0px" width="30%" align="center">
<tr>
<th colspan="3">学生成绩单</th>
</tr>
<tr>
<td>姓名</td>
<td>学科</td>
<td>分数</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td rowspan="4" colspan="2">
<table border="1px" cellspacing="0px" width="100%">
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>99</td>
</tr>
<tr>
<td>语文</td>
<td>99</td>
</tr>
</table>
</td>
</tr>
<tr>
</tr><tr>
<td rowspan="2">李四</td>
</tr>
<tr></tr>
</table>
</body>
4.关于表格的案例：自我尝试
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三行两列</title>
</head>
<body>
<!--这是一个网页设计案例，详细来源请见：https://www.bilibili.com/video/BV12K4y1b7kc?from=search&seid=11066095511543648690&spm_id_from=333.337.0.0-->
<table width="100%" bgcolor="#f2f2f2">
<!--页头-->
<tr height="80px" bgcolor="#7ffd4" align="center">
<td>网页页头</td>
</tr>
<!--上空行-->
<tr height="10px"> </tr>
<!--内容-->
<tr>
<td>
<table align="center" width="1024px">
<tr>
<td width="240px" valign="top">
<table width="100%" bgcolor="#ffffff">
<tr><td align="center" height="60px">关于我们</td></tr>
<tr><td align="center" height="60px">隐私协议</td></tr>
<tr><td align="center" height="60px">联系我们</td></tr>
<tr><td align="center" height="60px">服务协议</td></tr>
<tr><td align="center" height="60px">付费协议</td></tr>
<tr><td align="center" height="60px">使用规则</td></tr>
<tr><td align="center" height="60px">付费协议</td></tr>
<tr><td align="center" height="60px">退款协议</td></tr>
<tr><td align="center" height="60px">发票申请</td></tr>
<tr><td align="center" height="60px">帮助中心</td></tr>
</table>
</td>
<!--空隙-->
<td width="20px"></td>
<td width="764px" bgcolor="#faebd7">
<pre>唯独弹丸：我瞎写的</pre>
</td>
</tr>
</table>
</td>
</tr>
<!--下空行-->
<tr height="10px"></tr>
<!--页脚-->
<tr height="150px" bgcolor="#ff8c00" align="center">
<td>网页页脚</td>
</tr>
</table>
</body>
</html>效果截图：
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
