2.1.3 HTML 5的常用元素
构成HTML 5网页的基本元素有文本、超链接、图片和音视频等。此外，为了格式和页面布局的需要，常用元素还包括层、区域、列表、表格等。网页中的所有元素都需要通过“标记”来表示。
2-1-1 HTML5的常用元素1
1.文本元素标记
HTML 5网页中常用的文本元素标记及其说明见表2-1。
表2-1 常用文本元素标记及其说明
HTML 5的各种标记可以嵌套使用，但应注意嵌套标记的顺序，不能交叉出现。举例如下。
2.层标记<div>
层标记以<div>标记开始，以</div>标记结束。该标记用来定义页面中的一个特殊区域，区域内可包含文字、图片、表格或下级<div>等。使用<div>标记可方便地将若干页面元素组成一个集合，进而统一设置该集合的显示位置及所含元素的样式。<div>是HTML 5页面布局中使用最多，也是最重要的标记之一。
3.超链接标记<a>
超链接标记<a>是HTML 5页面中实现用户交互的一个重要途径，通过超链接可以将组成网站的众多网页关联起来，用户单击设置了超链接的元素（如文字、图片或控件等）时可以跳转到指定的其他页面。使用超链接可以使访问者根据自己的喜好，有选择地从顺序排列的内容中访问需要的内容。组织好的超链接不仅能使读者跳过不感兴趣的章节，而且有助于更好地理解作者的意图，使整个内容更加层次化。
一个超文本链接由两部分组成，一部分是呈现在读者面前的超链接对象（通常是文字和图片）；另一部分是被指向的目标，它可以是同一页面的另一部分，也可以是不同的页面，还可以是动画、音乐、视频和程序文件等。
<a>标记的基本格式如下。
其中，href为超链接引用，其值为一个URL地址。
target用来设置链接到目标资源时打开窗口的方式，有以下3种值可供选择。
1）_blank：在新的窗口中打开目标。
2）_parent：目标直接显示在父框架窗口中。
3）_self：目标显示在当前窗口中，该值为默认值。
举例如下。
表示使用文档中的“校园新闻”几个文字作为热点，链接到当前文件夹中的news1.html文件，并且在用户单击热点时，在新窗口中打开目标文件。
描述目标文件位置时可以使用相对路径，也可以使用绝对路径。但如果目标对象不在当前站点中，链接地址就只能使用绝对路径。
举例如下。
表示在新窗口中打开另一站点（www.myweb.com.cn）中news文件夹下的news1.htm文件，目标文件路径描述采用了绝对路径方式。
表示在当前窗口中打开站点下级子目录news下的HTML文件news1.htm，目标文件路径描述采用了相对路径方式。
4.列表标记
使用列表标记可以将页面中的文本以列表的方式分层次显示。HTML 5提供了3种列表标记：无序列表标记<ul>、有序列表标记<ol>和自定义列表标记<dl>。
2-1-2 HTML5的常用元素2
（1）无序列表标记<ul>
<ul>是表示列表项顺序无关的标记，其基本格式如下。
（2）有序列表标记<ol>
有序列表标记<ol>默认自动添加阿拉伯数字作为列表项的序号，强调了列表项顺序的重要性。其基本格式如下。
（3）自定义列表标记<dl>
<dl>标记用来表示带有说明信息的列表，列表中的每个列表项一般由<dt>和<dd>标记组成。其中，<dt>用来表示列表项的标题，<dd>用来表示标题的描述信息。其基本格式如下。
5.表格标记
表格标记<table>用于在页面中以表格形式组织文本，也可以使用表格进行页面布局。表格中的行使用<tr>标记表示，单元格使用<td>表示。例如，下列代码表示了一个2行2列的表格，“第×行第×格”是显示到相应单元格中的文字。表格的样式（如框线、大小和对齐方式等）通常需要通过CSS或style样式进行设置。其基本格式如下。
<table>标记中除了需要包含最基本的<tr>和<td>标记外，其他一些辅助标记及其说明见表2-2。
表2-2 常用的表格辅助标记及其说明
6.图像、音频和视频标记
在网页中加入图像、音频或视频等元素，可以大幅度提高页面的视觉效果和感染力，能有效地辅助阅读者理解页面中包含的信息，甚至可以取代文字成为信息传递的主要载体。
（1）图像标记<img>
图像标记<img>用于在网页中显示一幅图像，该标记常用的属性有src和alt。src用于指明要显示的图像文件的存放位置，alt用于表示当图像加载失败时显示的替代文字。例如，下列语句表示在网页中显示当前目录下images文件夹中的logo.jpg图像文件，当图像加载失败时显示“网站logo”。
图片的大小等属性通常需要通过style样式或CSS进行设置。图片在页面中的显示位置一般需要使用表格或div进行控制，这种表格或div被称为图像的父容器。
（2）音频标记<audio>
音频标记<audio>是HTML 5新增的标记，用于为网页提供播放指定的音频文件的功能。需要说明的是，<audio>标记支持的音频文件格式有Ogg Vorbis、MP3和WAV共3种。<audio>标记的常用属性及其说明见表2-3。
表2-3 <audio>标记的常用属性及其说明
举例如下。
图2-4所示的是为<audio>标记设置了controls属性时，在网页中显示的音频播放器。它提供了开始/暂停播放、显示已播放的时间、调整播放进度和调整音量/静音等功能。音频控件的显示位置和大小通常需要通过style样式或CSS进行设置。
（3）视频标记<video>
视频标记<video>是HTML 5的新增标记，用于在网页中播放视频。<video>标记与<audio>标记相同，也具有src、autoplay、controls、loop和preload属性。此外，该标记还有用于设置播放窗口大小的width（宽）和height（高）属性。设置播放窗口大小时，可仅指定width值和height值中的一个，另一个数值可根据视频的原始尺寸按比例自动推算出来。
图2-5所示为HTML 5视频播放器的界面，窗口最下方显示播放控制条，包含开始/暂停按钮、已播放的时间、播放进度条、视频总共时长、音量/静音按钮和全屏播放按钮。该控制条是否显示由<video>标记的controls属性决定。正常播放时该控制条能自动隐藏，当鼠标移动到播放画面上时又能自动显示出来。如果加载的视频文件较大，播放控制条上会显示出“……”标记，表示正在进行缓冲。
图2-4 HTML 5音频播放器
图2-5 HTML 5视频播放器
需要说明的是，HTML 5视频播放器支持的视频格式只有MP4（带有H.264视频编码和ACC音频编码的MPEG4文件）、Ogg（带有Theora视频编码和Vorbis音频编码的Ogg文件）和WebM（带有VP8视频编码和Vorbis音频编码的WebM文件）3种，而且并非所有的浏览器都支持HTML 5的<video>标记。常用浏览器对3种视频格式的支持情况见表2-4。
表2-4 常用浏览器对3种视频格式的支持情况
网页加载时系统会自动判断用户的浏览器是否支持<video>标记，若不支持，会使用夹在开始标记和结束标记之间的文字给出提示。举例如下。
需要注意的是，新版主流浏览器（Chrome、Microsoft Edge等）已取消了对<audio>和<video>元素自动播放功能的支持。所以，即使设置了标记的autoplay属性，也可能无法实现音视频的自动播放。