本章目录
2.1 音频标签和视频标签
2.1.1 音频标签
HTML5 提供了一个标准的方式来播放 Web 中的音频文件，用户不再为浏览器播放插件如 Adobe Flash、Apple QuickTime 的升级而烦恼，只需使用现代浏览器就可以欣赏任何可以发出声音的Web 网站。
语法：
<audio width=“640”height=“360”src=“music.mp3”controls=“true”>
您的浏览器不支持 audio 元素！
</ audio >
HTML5 定义了一个新的元素，用来指定标准的方式来插入音频文件到 Web 页面中：audio 标签。
语法：
<audio width=“640” height=“360”>
<source src="music.ogg" />
<source src="music.mp3" />
<source src="music.wav" />
</audio>
注意：目前支持 audio 标签的浏览器有 IE9、Firefox、Opera、Chrome 和 Safari。IE8 和更早的版本，不支持 audio 标签。
音频标签的属性：
主要控制音频的播放与停止，循环播放与播放次数设置以及播放位置等
| 属性 |
值 |
描述 |
| autoplay |
autoplay |
如果是 autoplay，则音频在就绪后马上播放 |
| controls |
controls |
如果是 controls，则向用户显示控件，如播放按钮 |
| end |
数字值 |
定义播放器在音频流中的何处停止播放。默认声音会播放到结尾 |
| loopend |
数字值 |
定义在音频流中循环播放停止的位置，默认是end 属性的值 |
| loopstart |
数字值 |
定义在音频流中循环播放的开始位置。默认是start 属性的值 |
| playcount |
数字值 |
定义音频片断播放多少次，默认是 1 |
| src |
url地址 |
所播放音频的 url地址 |
| start |
数字值 |
定义播放器在音频流中开始播放的位置。默认声音在开头进行播放 |
2.1.2 视频标签
许多时髦的网站都提供视频。HTML5 提供了展示视频的标准。HTML5 规定了一种通过 video 元素来包含视频的标准方法。
语法：
<video width=“640”height=“360”src=“video .mp4”controls=“controls”>
您的浏览器不支持 video 元素！
</ video >
语法：
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 audio 元素！
</video>
视频标签的属性：
| 属性 |
值 |
描述 |
| autoplay |
autoplay |
如果是 autoplay，则视频在就绪后马上播放 |
| src |
url地址 |
所播放视频的 url地址 |
| perload |
none | metadata | auto |
用于指定视频或音频数据是否预加载：none （不进行预加载）、metadata（只预加载媒体的元数据）和 auto（预加载全部视频或音频） |
| loop |
loop |
用于指定是否循环播放视频或音频 |
| poster |
url地址 |
视频加载时显示的图像，或者在用户点击播放按钮前显示的图像 |
| controls |
controls |
如果是 controls，则向用户显示控件，如播放按钮 |
| width |
数字值 |
用于指定视频的宽度 |
| height |
数字值 |
用于指定视频的高度 |
示例：
<body>
<video poster="http://media.w3.org/2010/05/sintel/poster.png" controls="controls"
preload="metadata"
loop="loop"
width="900" height="240">
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" />
</video>
</body>
视频标签支持的视频类型：
2.2 列表、div 以及 span 标签
2.2.1 列表标签
列表是网页中常见的内容组织和表现效果。使用列表标签可以制作导航栏、新闻标题列表以及排行榜等。
HTML5 中常见的列表标签包括：无序列表、有序列表、自定义列表
一、无序列表
ul 是无序列表的起始标签，英文全称 unordered list。无序列表中的项目符号是几何图形，即在每一项之前添加符号，故又称为符号列表。在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表的特征在于提供一种不编号的列表方式，而在每个项目文字之前，以符号作为分项标记。
语法：
<ul type=“项目符号类”>
<li> 第 1 项 </li>
<li> 第 2 项 </li>
……
</ul>
解释：在该语法中，使用 <ul>……</ul> 标记表示这一个无序列表的开始和结束，而 <li> 则表示这是一个列表项的开始。在一个无序列表中可以包含多个列表项。无序列表的 type 属性用于设置列表项开始的符号，取值为 disc（默认值，实心圆）、circle（空心圆环）和 square（正方形）。
示例：
<body>
<h2> 程序员的习惯：</h2>
<ul type="square">
<li> 讲代码 </li>
<li> 写博客 </li>
<li> 看女神 </li>
<li> 嗑瓜子 </li>
</ul>
</body>
二、有序列表
有序列表使用编号来编排项目，而不是项目符号。列表中的项目采用数字或英文字母开头，通常各项目间有先后顺序。在有序列表中，主要使用 <ol> 和 <li> 两个标记以及 type 和 start 两个属性。
ol 是有序列表的起始标签，英文全称 ordered list。有序列表中的项目符号是数字或字母序列，即在每一项之前添加 1,2,3... 等数字，又称为编号列表。
语法：
<ol type=“序列类型” start=“序号起始值”>
<li> 第一项 </li>
<li> 第二项 </li>
……
</ol>
解释：在该语法中，<ol> 和 </ol> 标签标志着有序列表的开始和结束，而 <li> 标记表示这是一个列表项的开始，默认情况下，采用数字序号进行排列。
有序列表的 type 属性用于设置有序列表的序号类型，取值为：1、a、A、i 和 I，分别表示数字序列、小写英文字母序列、大写英文字母序列、小写罗马数字学号以及大写罗马数字序列。
示例：
<body>
<h2>测试：你懂得享受生活吗？</h2>
家里装修完毕，又新添置一套高级音响，你会把豪华漂亮的音响放在哪里?<br />
<ol type="A">
<li>卧室</li>
<li>客厅</li>
......
</ol>
<hr size="2" color="#0099FF">
<ol type="I">
<li>卧室:喜欢拥有自己的私人空间，生活的快乐更多来自于内心世界</li>
<li>客厅:喜欢热闹，异性缘佳</li>
......
</ol>
</body>
三、自定义列表
在 HTML 中还有一种列表标签，称为自定义列表。不同于前两种列表，它主要用于解释名词，包含两个层次的列表，第 1 层次是需要解释的名词，第 2 层次是具体的解释。
语法：
<dl>
<dt> 名词 1<dd> 解释 1
<dt> 名词 2<dd> 解释 2
<dt> 名词 3<dd> 解释 3
……
</dl>
解释：在该语法中，<dl> 标签和 </dl> 标签分别定义了定义列表的开始和结束，<dt> 后面就是要解释的名称，而在<dd> 后面则添加该名词的具体解释。作为解释的内容在显示时会自动缩进，有些像字典中的词语解释。
示例：
......
<hr color="#00FFCC" size="3"/>
<dl>
<dt>A:穿越时光术</dt>
<dd>你的时间都浪费在发呆、胡思乱想、做白日梦：这类型的人个性很被动，想法天马行空，可是都只限于想而不实际行动。</dd>
<br />
<dt>B:隐形透明术</dt>
<dd>你的时间都浪费在看电视、上网瞎看一通：这类型的人个性内向不喜欢跟人有实际上的接触，凡事都跟人保持距离，不喜欢成为注目的焦点，宁愿躲在一边自己做自己的事情，但是都跟正事无关。</dd>
<br />
......
</dl>
......
2.2.2 div 标签和 span 标签
在排列网页内容时，我们有时会将某些标签放在一起进行排列，这样就需要一个标签将它们组成一个区块。在HTML 中，可以通过 div 标签和 span 标签将 HTML 元素组合起来，div 标签和 span 标签均为容器类标签，可以在其中存放其他标签，但两者之间也存在区别。
一、div标签
div标签没有特定的含义，只是作为组合其他 HTML 元素的容器，默认情况下，div标签将占满一行，当存在多个div标签时，将按照从上到下的方式排列。
语法：
<div>
其他标签或内容
</div>
示例：
<body>
<div id=“header”>-- 顶部：菜单部分 --</div>
<div id=“section”>-- 中部：内容部分 --</div>
<div id=“footer”>-- 底部：版权声明以及友情链接部分 --</div>
</body>
注意：一般div标签使用id属性来命名，id 是 HTML5 标签的属性，页面中的每个标签都存在 id，且不能相同。在对页面布局时经常会在 div 标签中添加 id 属性，用于表明当前 div 标签对应于页面中哪个区域或部分。
二、span 标签
span 标签也没有特定的含义，可作为文本的容器。span 标签与 div 标签不同，默认情况下，多个 span 标签可以存在于同一行，将按照从左到右的方式进行排列。
语法：
<span> 文本 </span>
示例：
<body>
<div>
<span><b> 新闻 </b></span> <span> 图片</span> <span>
军事 </span> |
<span><b> 视频 </b></span> <span> 热剧 </span> <span>
综艺 </span>
</div>
<div>
……
</div>
</body>
2.3 表格标签
2.3.1 创建表格
当我们浏览网页时，看到许多页面的内容排列整齐有序，如淘宝论坛页面和阿里巴巴校园讲座安排页面，在这些页面中都使用了表格，使用表格可以使排列的内容简洁、整齐，便于用户浏览网页信息。
表格是用于排列内容的最佳手段，在HTML页面中，绝大多数页面都是使用表格进行排版的。在HTML的语法中，表格主要由表格标签、行标签以及单元格标签构成。
<table>……</table> 标签中包括所有表格元素，表格元素主要有行、列和单元格等。
| 标签 |
描述 |
| <table>……</table> |
表格标签 |
| <tr>……</tr> |
行标签 |
| <td>……</td> |
单元格标签 |
语法：
<table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
……
<tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
……
<tr>
</table>
解释：<table> 和 </table> 标签分别标志着一个表格的开始和结束；而 <tr> 和 </tr> 标签则分别表示表格中一行的开始和结束，在表格中包含几组 <tr>……</tr>，就表示该表格为几行；<td> 和 </td> 标签表示一个单元格的起始和结束，也可以说表示一行中包含了几列。
创建表格步骤
在 HTML 中创建表格，通常分为以下 3 步：
- 创建表格标签 <table>……</table>。
- 在表格标签 <table>……</table> 中创建行标签 <tr>……</tr>，可以有多行。
- 在行标签 <tr>……</tr> 中创建单元格标签 <td>……</td>，可以有多个单元格。
注意：为了显示表格的轮廓，通常还需要设置 table 标签的 border 属性，通过 border 属性来设置表格边框的宽度
示例：
<h4>本周畅销笔记本排名TOP3</h4>
<table border="1">
<tr>
<td>排名</td><td>品牌</td><td>型号</td>
<td>图片</td><td>价格</td>
</tr>
<tr>
<td>1</td><td>联想</td>
<td>拯救者R720</td>
<td><img src="Images/lenovo_R720.jpg" width="150px" height="150px"/></td>
<td>¥5799</td>
</tr>
......
</tr>
</table>
2.3.2 创建不规则表格
表格可以实现行列合并，只需在 td 中加入 rowspan 或 colspan 属性，colspan 表示跨越的列数，rowspan 表示跨越的行数。
跨列：跨列是指单元格的横向合并，实现单元格在水平方向上跨多列。
语法：
<table>
<tr>
<td colspan=“所跨的列数”> 单元格内容 </td>
</tr>
</table>
说明：col 为 column（列）的缩写，span 为跨度，所以 colspan 意思为跨列。
示例：
<h2>手机频道</h2>
<table>
<tr>
<td colspan="2"><a href="#"><img src="Images/phone_1.jpg"/></a></td>
<td colspan="2"><a href="#"><img src="Images/phone_2.png"/></a></td>
</tr>
<tr>
<td><a href="#"><img src="Images/apple_phone.jpg"/></a></td>
<td><a href="#"><img src="Images/mi_phone.jpg"/></a></td>
<td><a href="#"><img src="Images/honor_phone.jpg"/></a></td>
<td><a href="#"><img src="Images/huawei_phone.jpg"/></a></td>
</tr>
......
</table>
跨行：单元格除了可以在水平方向上跨列，还可以在垂直方向上跨行，跨行是指单元格在垂直方向上合并。
语法：
<table>
<tr>
<td colspan=“所跨的列数”> 单元格内容 </td>
</tr>
</table>
说明：row 为行的意思，rowspan 即跨行。
示例1：
<body>
<table>
<tr>
<td rowspan="3"><img src="Images/adv_1.jpg"/></td>
<td><img src="Images/adv_2.png"/></td>
</tr>
<tr>
<td><img src="Images/adv_3.jpg"/></td>
</tr>
<tr>
<td><img src="Images/adv_4.jpg"/></td>
</tr>
</table>
</body>
示例2：
<body>
<table border="1">
<tr>
<td rowspan="2"><img src="Images/T_1.jpg" /></td>
<td><img src="Images/T_2.jpg" /></td>
<td><img src="Images/T_3.jpg" /></td>
</tr>
<tr>
<td colspan="2"><img src="Images/T_4.jpg" /></td>
</tr>
</table>
</body>
表格跨行与跨列的应用思路要清晰，可以参考以下步骤：
（1）根据需求设计出完整的表格。
（2）根据需求选择要合并的单元格，设置合并单元格中的第一个单元格的跨行或跨列属性，如 colspan=“2”或 rowspan=“3”等。
（3）删除被合并的其他单元格，跨列则水平删除其他多余的单元格，跨行则垂直删除其他多余的单元格。
2.3.3 表格相关的其他标签
除了设置表格跨行和跨列外，还可以为整个表格添加标题（caption）、对表格数据进行分组等，从而实现企业中常见的年度统计报表等复杂表格。
设计这些表格需要一些表格的高级标签。表格标签除了前面所学习到的基本标签外，还有如下高级标签：
- 表格标题标签 caption，用于描述整个表格的标题。
- 表格表头 th，用于定义表格的表头，通常是表格的第一行数据，以粗体、居中的样式显示数据。
- 表格数据的分组标签 thead、tbody 和 tfoot，这 3 个标签通常配合使用，主要对表格数据进行逻辑分组。
thead 对应表格的表头部分，tbody 对应表格的数据主体部分，tfoot 对应表格的底部页脚部分，各分组标签内由多行 tr 组成。
示例：
<table border="1">
<caption>本周畅销笔记本排名TOP3</caption>
<thead>
<tr>
<th>排名</th><th>品牌</th> ......
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>联想</td> ......
</tr>
......
</tbody>
<tfoot>
<tr>
<td colspan="5" align="right">总销售量：</td>
<td>737</td>
</tr>
</tfoot>
</table>
2.4 表格的美化修饰和布局
表格的美化修饰即从多方面对表格属性进行设置，使表格看起来更漂亮、更美观、更合理。
一般主要修饰内容：
- 表格的宽度、高度与边框
- 表格的背景颜色和图片
- 表格以及单元格内容的对齐方式
- 单元格的填充以及间距
一、表格的宽度、高度与边框
如果不指定表格的高度和宽度，浏览器就会根据表格内容的多少自动调整高度和宽度。如果不指定表格边框的宽度，则浏览器将不显示表格边框。
若需要手动设置表格的宽度、高度以及边框，则可以设置表格的 width、height 以及 border 属性实现。
语法：
<table width=“宽度” height=“高度” border=“边框宽度”>
……
<table>
解释：width 属性和 height 属性用于设置表格的宽度和高度，可以用像素表示，也可以用百分比（与浏览器窗口相比的大小比例）表示。其中，width 属性不仅能够设置表格的宽度，也可以设置 td 的宽度，height 属性border 属性用于设置表格边框的宽度，只能使用像素表示。
二、表格的背景颜色和图片
表格的背景包括表格的背景颜色和背景图片的设置，表格的背景颜色属性 bgcolor 针对整个表格，表格的背景图片属性 background 属性同样针对整个表格，设置背景会使得表格更加美观。
语法：
<table bgcolor=“背景颜色” background=“背景图片的地址”>
……
<table>
说明：通过以上两个属性不仅能够设置表格的背景，还可以设置行、单元格的背景。
三、表格以及单元格内容的对齐方式
为了使表格美观大方，表格中的内容通常需要设置对齐方式，设置表格、行或列的对齐方式可使用 align 属性，其取值可以为 right（右对齐）、center（居中）和 left（左对齐），默认为 left。在使用 align 属性时需要注意的是，当在 table 标签中使用，则表示表格的对齐方式，当在 tr 标签或 td 标签中使用，则表示内容的对齐方式。
四、单元格的填充以及间距
在表格中，单元格之间是存在距离的，我们称之为单元格的间距，单元格中的内容与单元格的边框之间也有距离，我们称之为填充。
设置单元格的间距与填充可使用 cellspacing 属性和 cellpadding 属性
语法：
<table cellspacing=“单元格间距” cellspadding=“单元格填充”>
……
<table>
解释：在设置单元格的填充以及间距时，需要注意的是，默认情况下单元格的填充和间距不为 0，若要消除单元格的填充和间距，则手动设置 cellspacing 属性和 cellpadding 属性均为 0 即可。
示例：
<table border="0" width="395" cellpadding="0" cellspacing="0" align="center">
<tr>
<td background="Images/title_bg.jpg" height="50" colspan="4">
<font color="white">
<b> 本周畅销笔记本排名TOP3</b></font></td>
</tr>
<tr>
<td width="50" align="center">1</td>
<td><img src="Images/lenovo_R720.jpg" width="80px" height="80px"/></td>
......
</tr>
<tr>
<td colspan="4"><hr color="lightgray"/></td>
</tr>
......
</table>
2.4.2 表格布局
表格在网页中的布局很常见，使用表格布局可以整齐地排列网页的内容，网页结构也比较清晰。
表格布局实现步骤
（1）根据需求创建表格
通过观察需要实现的页面效果图，能够看出该效果图中氛围三个部分，即左、中、右。因此，可以先添加一个一行三列的表格。
在左侧部分对应的单元格中，嵌套添加一个三行两列的表格，其中，第一行和第二行均跨两列显示。
在中部对应的单元格中，嵌套添加一个三行三列的表格，其中，第一行和第二行均跨三列显示。
在右侧部分对应的单元格中，不需要添加表格。
（2）为表格添加内容
（3）美化表格，设置相关属性
<table bgcolor="#E0DBDC" height="420" cellspacing="10">
<tr>
<td bgcolor="white">
<table height="100%" cellspacing="10">
<tr><td colspan="2">京东超市</td></tr>
<tr><td colspan="2"><img src="Images/oil_1.jpg"/></td></tr>
<tr> ….. </tr>
</table>
</td>
<td bgcolor="white">
<table height="100%" cellspacing="10">
<tr><td colspan="3">中国特产•远安馆</td></tr>
<tr><td colspan="3"><img src="Images/food_1.jpg"/></td></tr>
<tr> ….. </tr>
</table>
</td>
<td><img src="Images/adv.jpg"/></td>
</tr>
</table>
总结：
- 在 HTML5 中提供了 audio 标签和 video 标签用于支持在页面中播放音频和视频文件，在使用这些标签时，可以通过设置标签的 src 属性或内部的 source 标签指定要播放的文件路径。
- HTML5 中常见的列表标签包括无序列表、有序列表和定义列表。
- div 标签作为组合其他 HTML 元素的容器，默认情况下，div 元素将占满一行，当存在多个 div 元素时，将按照从上到下的方式排列。
- span 标签可作为文本的容器。默认情况下，多个 span 标签可以存在于同一行，将按照从左到右的方式进行排列。
- 在这些页面中都使用了表格，使用表格可以使排列的内容简洁、整齐，便于用户浏览网页信息。
- 表格的美化修饰即从多方面对表格属性进行设置，使表格看起来更漂亮、更美观、更合理。
