作者有话说：
本篇接上篇。上篇主讲表单标签，还有很多标签和属性并没有提及，这篇会尽我所能再讲一部分。
目录
1、图像标签
在 HTML 中，图像由 <img> 标签定义。
（注意：<img>为单标签）
从技术上讲，<img> 标签并不是在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
因此，<img> 标签有两个必需的属性：src 属性和 alt 属性。
1.1 常见属性
| src：规定显示图像的 URL（指存储图像的位置） | alt：规定图像的替代文本 |
| title：图片标题 ，用来显示描述图片的文字 |
- src 属性：指代图片的路径（相对路径和绝对路径）。
- alt 属性：当因某些原因，如路径错误、图片损坏、浏览器等问题显示不出图片的时，表示图像的代替文本。
- title 属性：鼠标悬停在图片上的时候会出现的文字，文字提示。
注意：如果没有设置 alt 属性的时候，title 就是alt 的取值。
其他常见属性：
- height 属性：定义图像的高度
- weight 属性：设置图像的宽度
- border 属性：定义图像周围的边框，默认值为0（取值>=1），数字越大边框就越粗
- align 属性：规定如何根据周围的文本来排列图像，取值为 center、left、right、bottom、middle、top（默认的下对齐left）
- usemap 属性：将图像定义为客户器端图像映射（位图）
<!DOCTYPE html>
<html>
<head>
<title>图像标签</title>
</head>
<body>
<img src="哆啦A梦.jpg" alt="哆啦A梦" title="hhh" width="200px" height="150px" border="1">
<hr>
哆啦A梦<img src="哆啦A梦.jpg"><br>
哆啦A梦居中<img src="哆啦A梦.jpg" align="center"><br>
<br>
哆啦A梦居左<img src="哆啦A梦.jpg" align="left"><br>
哆啦A梦下对齐<img src="哆啦A梦.jpg" align="bottom"><br>
哆啦A梦上对齐<img src="哆啦A梦.jpg" align="top"><br>
哆啦A梦居右<img src="哆啦A梦.jpg" align="right"><br>
</body>
</html>
1.2 位图
HTML <img> 标签的 usemap 属性。
usemap 属性将图像定义为客户端图像映射，图像映射指的是带有可点击区域的图像。
usemap 属性与 <map> 元素的 name 或 id 属性相关联，以建立 <img> 与 <map> 之间的关系。
通俗来说，usemap 属性要与 <map> 标签和 <area> 标签连用。
延展阅读：usemap 属性提供了一种“客户端”的图像映射机制，有效地消除了服务器端对鼠标坐标的处理，以及由此带来的网络延迟问题。通过特殊的 <map> 和 <area> 标签，HTML 创作者可以提供一个描述 usemap 图像中超链接敏感区域坐标的映射，这个映射同时包含相应的超链接 URL。usemap 属性的值是一个 URL，它指向特殊的 <map> 区域。用户计算机上的浏览器将把鼠标在图像上单击时的坐标转换成特定的行为，包括加载和显示另外一个文档。
下面借代码详细介绍
<!DOCTYPE html>
<html>
<head>
<title>位图</title>
</head>
<body>
<img src="哆啦A梦.jpg" usemap="#image">
<map name="image">
<area shape="circle" coords="154,132,50" href="https://www.baidu.com/"></area>
</map>
</body>
</html>- <map>
定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。
注意：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
必须属性：id ——为 map 标签定义唯一的名称
可选属性：name ——为 image-map 规定的名称
- <area>
<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。
注意：area 元素总是嵌套在 <map> 标签中。
<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。
必须属性：alt ——定义此区域的替换文本
可选属性： coords ——定义可点击区域（对鼠标敏感的区域）的坐标
shape ——定义可点击区域的形状
href ——定义此区域的目标 URL
这样我们就可以实现点击图片某一区域实现页面跳转。效果如下
鼠标悬浮在指定区域时
当我们用鼠标点击后
2、 多媒体标签
多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。
在因特网上，您会经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。
确定媒体类型的最常用的方法是查看文件扩展名。
2.1 视频标签
HTML5 中使用 <video> 标签定义视频，比如电影片段或其他视频流。
<video> 用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式，如 WEBM、MP4、OGG等。
常用属性：
| src :要播放的视频的 URL | control：如果出现该属性，则向用户显示控件，比如播放按钮 |
| autoplay：如果出现该属性，则视频在就绪后马上播放 | loop：如果出现该属性，则当媒介文件完成播放后再次开始播放 |
| height：设置视频播放器的高度 | width：设置视频播放器的高度 |
<!DOCTYPE html>
<html>
<head>
<title>视频</title>
</head>
<body>
<video src="黑帮摇.mp4" controls autoplay height="300" width="500"></video> >
</body>
</html>
2.2 音频标签
HTML5 中使用 <audio> 标签定义声音，比如音乐或其他音频流。
<audio> 用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式，如 MP3、OGG、WAV等。
常用属性：
| src :要播放的音频的 URL | control：如果出现该属性，则向用户显示控件，比如播放按钮 |
| autoplay：如果出现该属性，则音频在就绪后马上播放 | loop：如果出现该属性，则每当音频结束时重新开始播放 |
<!DOCTYPE html>
<html>
<head>
<title>音频</title>
</head>
<body>
<p>这是一段音乐</p>
<audio src="邓紫棋-无双的王者.mp3" controls autoplay></audio>
</body>
</html>
3、表格
当我们设计一个网页时，常常需要用到表格，在 HTML5 中可以用表格来描述具有二维结构的数据。
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
下面先看一段代码
<!DOCTYPE html>
<html>
<head>
<title>表格标签</title>
</head>
<body>
<table border="1">
<caption>表格标题</caption>
<!-- 表格的表头 -->
<thead>
<tr>
<th>第一行第一个</th> <!-- 定义表格内的表头单元格 -->
<td>第一行第二个</td> <!-- 定义表格内的标准单元格 -->
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>第二行第一个</td>
<td>第二行第二个</td>
</tr>
</tbody>
<!-- 表格页脚 -->
<tfoot>
<tr>
<td>第三行第一个</td>
<td>第三行第二个</td>
</tr>
</tfoot>
</table>
</body>
</html>
下面对上段代码出现的内容进行详解
- <table> 、<tr> 、<th> 、<td>
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
注意：th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。
- <caption>
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
- <thead> 、<tbody> 、<tfoot>
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
<tfoot> 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。
thead 、 tbody 和、tfoot 三个元素应该结合起来使用。
tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
（注意：如果使用 thead、tfoot 以及 tbody 元素，我们就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody。必须在 table 元素内部使用这些标签。）
通过这三个元素，我们可以对表格中的行进行分组。当创建某个表格时，拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。
3.1 表格属性
当我们想对表格进行一些样式修改时，就需要用到一些 <table> 标签的属性。学习了 CSS 后，可以在 CSS 中对表格样式进行修改。
常见属性
| border：规定表格边框的宽度 | width：规定表格的宽度 |
| height：规定表格的高度 | align：规定表格相对周围元素的对齐方式 |
| cellpadding：规定单元边沿与其内容之间的空白 | cellspacing：规定单元格之间的空白 |
| bgcolor：规定表格的背景颜色 | background：规定表格背景图像 |
- border
border 属性规定规定围绕表格的边框的宽度。
border 属性会为每个单元格应用边框，并用边框围绕表格。如果 border 属性的值发生改变，那么只有表格周围边框的尺寸会发生变化。表格内部的边框则是 1 像素宽。
注意：设置 border="0"，可以显示没有边框的表格。
- align
align 属性规定表格相对于周围元素的对齐方式。
通常来说，HTML 表格的前后都会出现折行。通过运用 align 属性，可实现其他 HTML 元素围绕表格的效果。
属性值为：left（默认） 、right 、center。
- cellpadding 、cellspacing
cellpadding 属性规定单元边沿与其内容之间的空白（表格边距）。
cellspacing 属性规定单元格之间的空间（表格间距）。
注意：cellpadding 、cellspacing 属性默认取值为2px
- bgcolor 、background
bgcolor 属性规定规定表格的背景颜色
background 属性规定规定表格的背景图像
注意：表格的 tr 和 td 元素也是可以设置宽度、高度和背景颜色。但当行设置了高度，列也设置了高度时，显示出来的是按照两者之间的最高值。
<!DOCTYPE html>
<html>
<head>
<title>表格标签</title>
</head>
<body>
<table border="5" width="400" height="100" align="center" bgcolor="#39c5bb" background="哆啦A梦.jpg" cellpadding="20" cellspacing="5">
<thead>
<tr height="70" bgcolor="#cccccc">
<td bgcolor="999999">第一行第一列</td>
<td height="100">第一行第二列</td>
</tr>
<tr height="70" bgcolor="#666666">
<td>第二行第一列</td>
<td height="10">第二行第二列</td>
</tr>
</thead>
<tbody>
<th>第三行第一列</th>
<th>第三行第二列</th>
</tbody>
<tfoot>
<tr>
<td>第四行第一列</td>
<td> </td>
</tr>
</tfoot>
</table>
</body>
</html> 
注意：当表格里含有空单元格时，为了避免空的单元格的边框不显示这种情况，需要添加一个空格占位符（ ），就可以将边框显示出来。
3.2 表格嵌套
在设计一个网页时，我们往往需要把一个表格放在另一个表格单元格中，不仅可以丰富表格内容，还能起到布局的作用。
表格嵌套，说到底就是 <table> 标签的嵌套。
<!DOCTYPE html>
<html>
<head>
<title>表格嵌套</title>
</head>
<body>
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>表格嵌套</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
3.3 表格合并
<colspan> 、<rowspan> 属性可以实现单元格的跨行合并。
- <colspan> 属性规定了单元格可横跨的行数（行合并）。
- <rowspan> 属性规定了单元格可列跨的行数（列合并）。
<!DOCTYPE html>
<html>
<head>
<title>单元格跨行</title>
</head>
<body>
<table width="300" border="1">
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
</body>
</html>
注意：rowspan="n" colspan="n" —— n 取值为整数，指合并 n 行或 n 列。
4、表格练习
了解了表格的一些基本知识，下面通过一些案例巩固一下
- 电影推荐板块
将此页面分割成两个主要部分：导航栏、图片和文字介绍。运用两个 <table> 标签即可达到预期效果。
<!DOCTYPE html>
<html>
<head>
<title>热门电影</title>
</head>
<body>
<h2>热门电影板块</h2>
<hr>
<table width="700">
<tr>
<td><b>最新热门电影</b></td>
<td>热门</td>
<td>最新</td>
<td>豆瓣高分</td>
<td>冷门佳片</td>
<td>华语</td>
<td>欧美</td>
<td>日本</td>
<td><a href="https://www.douban.com/" target="_black">更多>></a></td>
</tr>
</table>
<hr>
<table width="800">
<tr>
<td><img src="1.png" width="200"></td>
<td><img src="2.png" width="200"></td>
<td><img src="1.png" width="200"></td>
<td><img src="2.png" width="200"></td>
</tr>
<tr align="center">
<td>死寂</td>
<td>死寂</td>
<td>死寂</td>
<td>死寂</td>
</tr>
<tr>
<td><img src="1.png" width="200"></td>
<td><img src="2.png" width="200"></td>
<td><img src="1.png" width="200"></td>
<td><img src="2.png" width="200"></td>
</tr>
<tr align="center">
<td>死寂</td>
<td>死寂</td>
<td>死寂</td>
<td>死寂</td>
</tr>
</table>
</body>
</html>- 电子汇款单
这个案例就需要我们熟练掌握表格合并。先分析清楚每一行每一列该怎么布局，是行合并还是列合并。
<!DOCTYPE html>
<html>
<head>
<title>工商银行电子汇款单</title>
</head>
<body>
<h1>工商银行电子汇款单</h1>
<table width="800" border="1" cellspacing="0" cellpadding="0">
<tr>
<th colspan="2">回单类型</th>
<th>网上转账汇款</th>
<th colspan="2" align="center">指令序号</th>
<th align="center">213254135454</th>
</tr>
<tr>
<th rowspan="4">收<br>款<br>人</th>
<td>户名</td>
<td>张三</td>
<th rowspan="4">付<br>款
<br>人</th>
<td>户名</td>
<td>老刘</td>
</tr>
<tr>
<td><b>卡号</b></td>
<td>0000000001</td>
<td><b>卡号</b></td>
<td>0000000002</td>
</tr>
<tr>
<td>地区</td>
<td>南京</td>
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<td><b>网点</b></td>
<td>工商江苏南京业务处理中心</td>
<td><b>网点</b></td>
<td>江苏徐州业务中心</td>
</tr>
<tr>
<td colspan="2"><b>币种</b></td>
<td>人民币</td>
<td colspan="2"><b>钞汇标志</b></td>
<td>钞票</td>
</tr>
<tr>
<td colspan="2"><b>金额</b></td>
<td>1.00元</td>
<td colspan="2"><b>手续费</b></td>
<td>0.75元</td>
</tr>
<tr>
<td colspan="2"><b>合计</b></td>
<td colspan="5">人民币（大写）：壹</td>
</tr>
<tr>
<td colspan="2"><b>交易时间</b></td>
<td >2017年6月01日</td>
<td colspan="2"><b>时间戳</b></td>
<td>2017-06-01-13.00.00.00000</td>
</tr>
</table>
<table>
<tr>
<td>票据打印时间：2017-06-01 15:00:12</td>
</tr>
<tr>
<td><del>票据打印单位：江苏徐州业务中心</del></td>
</tr>
<tr>
<td>操作员：大曾</td>
</tr>
</table>
</body>
</html>关于表格还有很多练习，这就不一一列举。表格是 HTML 里较为重要的内容，一定要熟练掌握。
5、列表标签
HTML 支持有序、无序和定义列表。
通过列表，会使我们的内容更有序、层次明显。
5.1 有序列表
有序列表是一列项目的列表，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
常见属性
| type：规定在列表中使用的标记类型 | start：规定有序列表的起始值 |
| reversed：规定列表顺序为降序(9,8,7...) |
- type 属性：规定有序列表的项目符号的类型。
<!DOCTYPE html>
<html>
<head>
<title>有序列表</title>
</head>
<body>
<ol type="a" start="7" reversed>
<li>前端</li>
<li>python</li>
<li>HCIA</li>
<li>RHCSA</li>
<li>HCIP</li>
<li>RHCE</li>
</ol>
</body>
</html>
5.2 无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>标签。
常见属性
- type 属性：规定列表的项目符号的类型。
<!DOCTYPE html>
<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul type="square">
<li>前端</li>
<li>python</li>
<li>HCIA</li>
<li>RHCSA</li>
<li>HCIP</li>
<li>RHCE</li>
</ul>
</body>
</html>
5.3 定义列表
<dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合 <dt>（定义列表中的项目，即术语部分）和 <dd>（描述列表中的项目）。
<!DOCTYPE html>
<html>
<head>
<title>定义列表</title>
</head>
<body>
<dl> <!--定义列表标签 主要显示的是有标题的数据-->
<dt>这是标题</dt> <!--dt是标题-->
<dd>这是内容1</dd> <!--dd是数据标签-->
<dd>这是内容2</dd>
<dd>这是内容3</dd>
<dd>这是内容4</dd>
<dd>这是内容5</dd>
<dd>这是内容6</dd>
<dd>这是内容7</dd>
</dl>
</body>
</html>
HTML5 之后对标签组进行了优化，一个 <dl> 里面可以存在多个 <dt>
<dl>
<dt>地方新闻</dt>
<dd>这是内容1</dd>
<dd>这是内容2</dd>
<dd>这是内容3</dd>
<dt>国内新闻</dt>
<dd>这是内容1</dd>
<dd>这是内容2</dd>
<dd>这是内容3</dd>
<dt>国际新闻</dt>
<dd>这是内容1</dd>
<dd>这是内容2</dd>
<dd>这是内容3</dd>
</dl>
6、框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
框架结构标签 <frameset>
- 框架结构标签（<frameset>）定义如何将窗口分割为框架
- 每个 frameset 定义了一系列行或列
- rows / columns 的值规定了每行或每列占据屏幕的面积
它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。必须使用 cols 或 rows 属性。
重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！
可选属性
| cols：定义框架集中列的数目和尺寸 | row：定义框架集中行的数目和尺寸 |
我们可以利用框架来实现一个页面多窗口
<!DOCTYPE html>
<html>
<head>
<title>多窗口框架</title>
</head>
<frameset rows="35%,*,25%">
<frame src="https://www.bilibili.com/"></frame>
<frameset cols="40%,60%">
<frame src="https://v.qq.com/channel/choice?channel_2022=1"></frame>
<frame src="https://www.w3school.com.cn/h.asp"></frame>
</frameset>
<frame src="https://www.csdn.net/"></frame>
</frameset>
</html>
关于 HTML 还有很多未提及，有兴趣的可以自己找找资料学习。
谢谢大家有耐心看到这里~❀❀❀~
参考资料：HTML 系列教程 (w3school.com.cn)
（这是一个很好的网站，上面除了 HTML 还有 CSS 等相关教程，知识点挺全的，查找也方便）
7585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
