---

哇，今天要回学校了

学起来，一边要坐车还要学习，今日份的任务也要完成啊，继续学习HTML的常用标签。前端之路漫漫，加油~

---

一、HTML常用标签

1.音频和视频

（1）音频标签：< audio > 双标签，使用路径查找。支持格式：.mp3、.ogg、.wav。
音频控制条属性：使用controls属性进行设置，属性值也是controls。
代码如下（示例）：

<audio src="media/gai.mp3" controls="controls"></audio>

（2）视频标签：< video > 双标签，使用路径查找。支持格式：.mp4、.ogg、.webm。
视频控制条属性：使用controls属性进行设置，属性值也是controls。
代码如下（示例）：

<video src="media/gai.mp4" controls="controls"></video>

2.超级链接

HTML使用超级链接与网络上的另一个文档相连。超链接内容可以是一个字，词，图像，可以点击这些内容转跳到新的文档或者当前文档的某个部分。
超级链接标签：< a > 双标签，在指定的位置添加超级链接，提供用户点击和跳转（跨页面跳转、页面内跳转）。
href属性：超文本引用，用于规定链接的目标地址。
代码如下（示例）：

<a href="https://www.baidu.com/">跳转到百度</a>

target属性：可以定义被链接的文档在何处跳转显示。
_self:默认值，在当前窗口打开
_blank:跳转到新窗口打开
代码如下（示例）：

<a href="https://www.baidu.com/" target="_blank"> 跳转到百度</a>

title属性：鼠标悬停时的文本内容。
代码如下（示例）：

<a href="12_img.html" title="点击跳转到原网页">
<img src="images/gai.jpg" >
</a>

3.无序列表

用来制作HTML中一系列项目，无序列表、有序列表、定义列表。

< ul >定义一个无序列表的大结构，< li >定义无序列表的某一项，ul和li是嵌套关系。
代码如下（示例）：

<ul><li>红楼梦</li><li>西游记</li><li>水浒传</li><li>三国演义</li>
</ul>

注意：
（1）ul内部只能嵌套li，li不能脱离ul单独存在。
（2）li是一个经典的容器级标签，内部可以放置任何内容。
（3）li之间没有顺序的先后之分，重要程度是相同的。
（4）无序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式是由css负责。
代码如下（示例）：

<ul><li><h4>红楼梦</h4><ul><li>林黛玉</li><li>贾宝玉</li></ul></li><li>西游记</li><li>水浒传</li><li>三国演义</li>
</ul>

4.有序列表

< ol >定义一个有序列表的大结构，< li >定义有序列表的某一项，ol和li是嵌套关系。
代码如下（示例）：

<ol><li>俄罗斯</li><li>加拿大</li><li>中国</li>
</ol>

注意：
（1）内部只能嵌套。
（2）li是一个经典的容器级标签，内部可以放置任何内容。
（3）li之间存在顺序的先后之分。
（4）有序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式是由css负责。

5.定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
dl，定义一个自定义列表的大结构、dt，定义自定义列表中的某一个主题或者属于、dd，描述或解释前面的定义主题。dl只能嵌套dt和dd，dt和dd是同级关系。
代码如下（示例）：

<dl><dt>张三</dt><dd>地址：北京</dd></dl>

注意：
（1）dl只能嵌套dt和dd，dt和dd不能脱离dl单独存在。
（2）dl内可以存放多组dt和dd，每个dd解释的是前面最近的一个dt。
（3）dt后面可以有0到多个dd，每个dd解释的是前面最近的一个dt。
（4）dt和dd是容器级标签，可以放任意内容。
（5）定义列表中的样式是由css负责，标签只负责搭建语义结构。
（6）配合css布局效果，最好每个dl中只有一个dt和dd，便于后期管理。
代码如下（示例）：

<dl><dt>张三</dt><dd>地址：北京</dd><dd>年龄：18</dd><dd>学校：外国语学校</dd><dt>李四</dt><dd><p>地址：上海</p><p>年龄：18</p><p>学校：外国语学校</p></dd>
</dl>

效果展示：

6.布局标签

div和span用作布局工作，俗称盒子。
div，双标签，最经典的容器级标签，大盒子，内部可以放任意内容。
代码如下（示例）：

<div>放任意内容</div>

span，双标签，容器级标签，小盒子，不改变整体效果的情况下，进行一个局部调整。
代码如下（示例）：

    <div><span style="color: blue;">小盒子</span> </div>

7.表格制作

table，整个表格大结构；tr，定义表格由多少行；td，每一行内部的单元格。
border，边框属性。
th，表头单元格。
代码如下（示例）：

<table border="1"><tr><th>1</th><th>2</th><th>3</th><th>4</th></tr><tr><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr>   
</table>

8.合并单元格

表格单元格可以进行合并，通过th和td的两个属性进行合并设置。
rowspan：跨行合并，上下合并。
colspan：扩列合并，左右合并。
属性值是数字，数字是几表示跨几行或者几列合并。
制作技巧：
（1）先列出所有的tr，以最小的单元格为标准。
（2）添加每行的td或th
（3）顶边对齐属于同一行。
（4）将所有行和列写完后，再查看哪个单元格跨行或跨列。
代码如下（示例）：

<table border="1" style="border-collapse:collapse;"><tr><td colspan="2">1</td><td rowspan="2">2</td><td colspan="2">3</td></tr><tr><td>4</td><td rowspan="2">5</td><td>6</td><td rowspan="2">7</td></tr><tr><td rowspan="2">8</td><td>9</td><td>10</td></tr><tr><td>11</td><td colspan="2">12</td><td>13</td></tr>
</table>

效果展示：

9.表格分区

一个完整的表格分为四个大的区域：表格标题、表哥头部、表格主体、表格页脚。
caption：表格的标题，内部书写标题文字。
thead：表格的头部。
tbody：表格的主题。
tfoot：表格的页脚。
制作技巧：
（1）先书写大的分标签结构。
（2）填充每个分区的内部内容。
（3）进行单元格合并。
代码如下（示例）：

<table border="1" style="border-collapse:collapse;">
<!-- 先进行分区 -->
<caption>各地区固定资产投资情况
</caption>
<thead><tr><th rowspan="2">地区</th><th colspan="2">按总量分</th><th colspan="2">按比重分</th></tr><tr><th>自年初累计</th><th>比去年同期增长</th><th>自年初累计</th><th>去年同期</th></tr>
</thead>
<tbody><tr><td>全国</td><td>56</td><td>34</td><td>22</td><td>87</td></tr><tr><td>全国</td><td>56</td><td>34</td><td>22</td><td>87</td></tr><tr><td>全国</td><td>56</td><td>34</td><td>22</td><td>87</td></tr><tr><td>全国</td><td>56</td><td>34</td><td>22</td><td>87</td></tr><tr><td>全国</td><td>56</td><td>34</td><td>22</td><td>87</td></tr>
</tbody>
</table>

效果展示：

二、锚点跳转

超级链接的跳转效果不止包括跨页面的跳转，还包含锚点跳转方式。

1.页面内锚点跳转

从某个位置跳转到同页面的另一个位置，先设置锚点，再添加一个链接。
（1）设置锚点
在目标位置找到任意一个标签，给他添加id属性，id的属性值必须是唯一的。
代码如下（示例）：

<h2 id="mubiao">目标位置</h2>

在目标位置添加一个空的< a >标签，只设置一个name属性，name属性值设置方式与id相同，也必须是唯一的。
代码如下（示例）：

<a name="mubiao"></a>

（2）添加链接
链接到锚点在需要点击的位置设置a标签
代码如下（示例）：

<a href="#client">客户端</a>
<a href="#text">纯文本格式</a>
<a href="#html">HTML</a>

2.跨页面锚点跳转

（1）设置锚点
（2）链接到锚点
代码如下（示例）：

<a href="17_anchor jump.html#text">页面内锚点跳转文件的纯文本</a>

---

总结

辛苦的一天，终于回学校了，开心。今日份的HTML常用标签已经学习完毕。心之所向，素履以往。加油~