第3章　使用HTML 5设计移动页面结构

◎　本章教学微视频：25个　54分钟

学习指引

随着高端手机的盛行，移动互联应用开发也越来越受到人们的重视，用HTML 5开发移动应用是一个不错的选择。结合当前流行的jQuery Mobile库，开发移动端页面项目就变得简单多了。有关jQuery Mobile库的内容将在本书第12~第17章详细介绍，本章将主要介绍HTML 5的一些元素。

重点导读

• 掌握HTML 5结构元素。
• 掌握HTML 5分组元素。
• 掌握HTML 5文本语义元素。
• 掌握HTML 5交互体验元素。
• 掌握HTML 5新多媒体元素。
• 掌握HTML 5新增全局属性。

3.1　结构元素

图3-1　新的结构元素

目前，许多移动网页都包含<div id="nav">、<div class="header">或者<div id="footer">等HTML代码，来指明导航链接、头部以及尾部。为此，HTML 5提供了新的结构元素来明确一个Web页面的不同部分，如图3-1所示。

3.1.1　<header>元素

<header>元素描述了文档的头部区域，用于定义内容的介绍展示区域。在页面中用户可以使用多个<header>元素。

【例3-1】（实例文件：ch03\Chap3.1.html）<header>元素的使用。代码如下：

相关的代码实例可参考Chap3.1.html文件，在IE浏览器中运行的结果如图3-2所示。

图3-2　使用<header>元素后的运行结果

提示：在HTML 5中，一个<header>元素通常包括至少一个（h1~h6）元素，也可以包括hgroup元素、nav元素，还可以包括其他元素。但是<header>标签不能被放在<footer>、<address>或者另一个<header>元素内部。

3.1.2　<nav>元素

<nav>用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。具体来说，nav元素可以用于以下这些场合。

• 传统导航条：现在主流网站上都有不同层级的导航条，其作用是将当前画面跳转到网站的其他主要页面上去。
• 侧边栏导航：现在主流博客网站及商品网站上都有侧边栏导航，其作用是将页面从当前文章或当前商品跳转到其他文章或其他商品页面上去。
• 页内导航：作用是在本页面几个主要的组成部分之间进行跳转。
• 翻页操作：是指在多个页面的前后页或博客网站的前后篇文章滚动。
• 其他：可以用于其他所有用户觉得是重要的、基本的导航链接组中。

提示：如果文档中有“前后”按钮，则应该把它放到<nav>元素中。另外，一个页面中可以拥有多个<nav>元素，以作为页面整体或不同部分的导航。

【例3-2】（实例文件：ch03\Chap3.2.html）<nav>元素的使用。代码如下：

图3-3　使用<nav>元素后的运行结果

相关的代码实例可参考Chap3.2.html文件，在IE浏览器中运行的结果如图3-3所示。

注意：在HTML 5中不要用menu元素代替nav元素，menu元素是用在一系列发出命令的菜单上的，是一种交互性的元素，或者更确切的说是使用在Web应用程序中的。

3.1.3　<section>元素

<section>元素定义了文档中的节，如章节、页眉、页脚或文档中的其他部分。它可以与h1、h2、h3、h4、h5、h6、p等元素结合起来使用，标示文档结构。

【例3-3】（实例文件：ch03\Chap3.3.html）<section>元素的使用。代码如下：

相关的代码实例可参考Chap3.3.html文件，在IE浏览器中运行的结果如图3-4所示，实现了内容的分块显示。

图3-4　使用<section>元素后的运行结果

3.1.4　<article>元素

<article>元素定义外部的内容。外部内容可以是来自一个外部新闻提供者的一篇新文章，或者来自blog的文本，或者是来自论坛的文本，或者是来自其他外部的源内容。

【例3-4】（实例文件：ch03\Chap3.4.html）<article>元素的使用。代码如下：

相关的代码实例可参考Chap3.4.html文件，在IE浏览器中运行的结果如图3-5所示，实现了外部内容的定义。

图3-5　使用<article>元素后的运行结果

3.1.5　<aside>元素

<aside>元素一般用来表示网站当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的广告、导航条、引用、侧边栏评论部分，以及其他区别于主要内容的部分。

<aside>元素主要有以下两种使用方法：

（1）被包含在<article>元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的资料、名次解释等。

aside标签的代码结构如下：

（2）在<article>元素之外使用，作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是友情链接，博客中的其他文章列表、广告单元等。

aside标签的代码结构如下：

【例3-5】（实例文件：ch03\Chap3.5.html）<aside>元素的使用。代码如下：

相关的代码实例可参考Chap3.5.html文件，在IE浏览器中运行的结果如图3-6所示。

图3-6　使用<aside>元素后的运行结果

提示：<aside>元素可位于布局的任意部分，用于表示任何非文档主要内容的部分。例如，可以在<section>元素中加入一个<aside>元素，甚至可以把该元素加入一些重要信息中，例如，文字引用。

3.1.6　<footer>元素

footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。

【例3-6】（实例文件：ch03\Chap3.6.html）<footer>元素的使用。代码如下：

相关的代码实例可参考Chap3.6.html文件，在IE浏览器中运行的结果如图3-7所示。

提示：与<header>元素一样，一个页面中也未限制<footer>元素的个数。同时，可以为<article>元素或<section>元素添加<footer>元素。

图3-7　使用<footer>元素后的运行结果

3.2　分组元素

分组元素可以对页面中的内容进行分组，在HTML 5中涉及3个与分组有关的元素，分别是<hgroup>元素、<figure>元素和<figcaption>元素。

3.2.1　<hgroup>元素

<hgroup>元素用于对网页或区段（section）的标题进行组合，<hgroup>元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子标题算一组，<hgroup>的使用代码结构如下：

【例3-7】（实例文件：ch03\Chap3.7.html）<hgroup>元素的使用。代码如下：

图3-8　使用<hgroup>元素后的运行结果

相关的代码实例可参考Chap3.7.html文件，在IE浏览器中运行的结果如图3-8所示。

注意：如果文章只有一个主标题，是不需要<hgroup>元素的。如果文章有主标题，主标题下有子标题，就需要使用<hgroup>元素了。

3.2.2　<figure>元素

<figure>元素是一种元素的组合，可带有标题（可选）。figure标签用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码实例。figure标签的使用代码结构如下：

     <figure>
     <h1>……</h1>
     <p>……</p>
     </figure>

注意：使用<figure>元素时，需要figcaption元素为figure元素组添加标题。不过，一个<figure>元素内最多只允许放置一个figcaption元素，其他元素可无限放置。

【例3-8】（实例文件：ch03\Chap3.8.html）<figure>元素的使用。代码如下：

相关的代码实例可参考Chap3.8.html文件，在IE浏览器中运行的结果如图3-9所示。

注意：<figure>元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

图3-9　使用<figure>元素后的运行结果

3.2.3　<figcaption>元素

<figcaption>元素的作用是为<figure>元素定义标题。<figcaption>元素应该被置于<figure>元素的第一个或最后一个子元素的位置。

【例3-9】（实例文件：ch03\Chap3.9.html）<figcaption>元素的使用。代码如下：

相关的代码实例可参考Chap3.9.html文件，在IE浏览器中运行的结果如图3-10所示。

图3-10　使用<figcaption>元素后的运行结果

3.3　文本语义元素

文本语义元素能够为浏览器和开发者清楚地描述其意义，下面介绍HTML 5中新增的几种文本语义元素。

3.3.1　<mark>元素

<mark>元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。<mark>元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。其使用方法与<em>和<strong>有相似之处，但相比较而言，HTML 5中新增的<mark>元素在突出显示时，更加随意与灵活。具体使用的代码结构如下：

<p>…… <mark>……</mark> ……</p>

【例3-10】（实例文件：ch03\Chap3.10.html）<mark>元素的使用。代码如下：

在页面中，首先使用<h5>元素创建一个标题“优秀开发人员的素质”，然后通过<p>元素对标题进行阐述。在阐述的文字中，为了引起用户的注意，使用<mark>元素高亮处理字符“素质”“过硬”和“务实”。代码如下：

图3-11　使用<mark>元素后的运行结果

相关的代码实例可参考Chap3.10.html文件，在IE浏览器中运行的结果如图3-11所示。

提示：<mark>元素的这种高亮显示的特征，除用于文档中突出显示外，还常用于查看搜索结果页面中关键字的高亮显示，其目的主要是引起用户的注意。

注意：虽然<mark>元素在使用效果上与<em>或<strong>元素有相似之处，但三者的出发点是不一样的。<strong>元素是作者对文档中某段文字的重要性进行的强调；<em>元素是作者为了突出文章的重点而进行的设置；<mark>元素是数据展示时，以高亮的形式显示某些字符，与原作者本意无关。

3.3.2　<rp>、<rt>与<ruby>元素

<ruby>元素由一个或多个字符（需要一个解释／发音）和一个提供该信息的<rt>元素组成，还包括可选的<rp>元素，定义当浏览器不支持<ruby>元素时显示的内容。<rp>、<rt>与<ruby>元素结合使用的代码结构如下：

【例3-11】（实例文件：ch03\Chap3.11.html）使用<ruby>元素注释繁体字“漢”。

图3-12　使用<ruby>元素后的运行结果

相关的代码实例可参考Chap3.11.html文件，在IE浏览器中运行的结果如图3-12所示。

提示：支持<ruby>元素的浏览器不会显示<rp>元素的内容。

3.3.3　<time>元素

<time>元素是HTML 5新增加的一个标记，用于定义时间或日期。该元素可以代表24小时中的某一时刻，在表示时刻时，允许有时间差。在设置时间或日期时，只需将该元素的属性datetime设为相应的时间或日期即可。具体使用代码结构如下：

【例3-12】（实例文件：ch03\Chap3.12.html）<time>元素的应用。代码如下：

图3-13　使用<time>元素后的运行结果

相关的代码实例可参考Chap3.12.html文件，在IE浏览器中运行的结果如图3-13所示。

代码说明：

• <p>元素ID号为p1中的<time>元素表示的是日期。页面在解析时，获取的是属性datetime中的值，而标记之间的内容只是用于显示在页面中。
• <p>元素ID号为p2中的<time>元素表示的是日期和时间，它们之间使用字母T进行分隔。如果在整个日期与时间的后面加上一个字母Z，则表示获取的是UTC（世界统一时间）格式。
• <p>元素ID号为p3中的<time>元素表示的是将来时间。
• <p>元素ID号为p4中的<time>元素表示的是发布日期。

注意：为了在文档中将这两个日期进行区分，在最后一个<time>元素中增加了pubdate属性，表示此日期为发布日期。

提示：<time>元素中的可选属性pubdate表示时间是否为发布日期，它是一个布尔值，该属性不仅可以用于<time>元素，还可用于<article>元素。

3.3.4　<wbr>元素

<wbr>即Word Break Opportunity。<wbr>元素规定在文本中的何处适合添加换行符。如果单词太长，或者用户担心浏览器会在错误的位置换行，那么就可以使用<wbr>元素来添加单词换行时机。

【例3-13】（实例文件：ch03\Chap3.13.html）<wbr>元素的应用。代码如下：

相关的代码实例可参考Chap3.13.html文件，在IE浏览器中运行的结果如图3-14所示。

图3-14　使用<wbr>元素后的运行结果

3.4　交互体验元素

HTML 5不仅为开发者增加了多个Web页面特征元素，还为用户增加了交互体验元素，如<meter>元素、<details>元素和<progress>元素等。

3.4.1　<details>元素

<details>元素用于描述文档或文档某个部分的细节，常常与<summary>元素配合使用，<summary>元素提供标题或图例。标题是可见的，用户单击标题时，会显示细节信息。具体使用的代码结构如下：

【例3-14】（实例文件：ch03\Chap3.14.html）使用<details>元素制作简单页面。代码如下：

相关的代码实例可参考Chap3.14.html文件，在Firefox浏览器中运行的结果如图3-15所示。

单击“苹果冰淇淋”左侧的三角按钮，即可展开相应的细节内容，如图3-16所示。

图3-15　使用<details>元素后的运行结果

图3-16　细节内容

3.4.2　<meter>元素

<meter>元素定义度量衡，仅用于已知最大值和最小值的度量。例如：磁盘使用情况、查询结果的相关性等。

【例3-15】（实例文件：ch03\Chap3.15.html）使用<meter>元素展示给定数据的范围。代码如下：

图3-17　使用<meter>元素后的运行结果

相关的代码实例可参考Chap3.15.html文件，在Firefox浏览器中运行的结果如图3-17所示。

注意：IE浏览器不支持<meter>元素，另外，<meter>元素不能作为一个进度条来使用，进度条的制作需要使用<progress>元素。

3.4.3　<progress>元素

<progress>元素表示运行中的进程，可以使用其来显示JavaScript中耗费时间的函数的进程。例如下载文件时，文件下载到本地的进度值可以通过该元素动态展示在页面中，展示的方式既可以使用整数（如1~100），也可以使用百分比（如10%~100%）。

<progress>元素的属性及描述如表3-1所示。

表3-1　<progress>元素的属性及描述

注意：<progress>元素中设置的value值必须小于或等于max属性值，且两者都必须大于0。

【例3-16】（实例文件：ch03\Chap3.16.html）使用<progress>元素表示下载进度。代码如下：

图3-18　使用<progress>元素后的运行结果

相关的代码实例可参考Chap3.16.html文件，在IE浏览器中运行的结果如图3-18所示。

3.4.4　<summary>元素

<summary>元素为<details>元素定义一个可见的标题。当用户单击标题时会显示详细信息。

【例3-17】（实例文件：ch03\Chap3.17.html）使用<summary>元素展示详细信息。代码如下：

相关的代码实例可参考Chap3.17.html文件，在Firefox浏览器中运行的结果如图3-19所示。

单击“池上”左侧的三角按钮，即可展开相应的细节内容，如图3-20所示。

图3-19　使用<summary>元素后的运行结果

图3-20　细节内容

3.5　新多媒体元素

目前，在网页上没有关于音频和视频的标准，多数音频和视频都是通过插件来播放的。为此，HTML 5新增了多媒体元素，如<audio>元素、<video>元素、<source>元素、<embed>元素等。

3.5.1　<audio>元素

<audio>元素主要是定义播放声音文件或者音频流的标准。它支持3种音频格式，分别为OGG、MP3和WAV。如果需要在HTML 5移动网页中播放音频，输入的基本格式如下：

     <audio src="song.mp3" controls="controls">
     </audio>

提示：其中src属性是规定要播放的音频的地址，controls属性是供添加播放、暂停和音量控件。另外，在<audio>与</audio>之间插入的内容是供不支持<audio>元素的浏览器显示的。

【例3-18】（实例文件：ch03\Chap3.18.html）<audio>元素的应用。代码如下：

     <!DOCTYPE html>
     <html>
     <head>
     <title>audio</title>
     <head>
     <body >
      <audio src="song.mp3" controls="controls">
     </audio>
     </body>
     </html>

图3-21　<audio>元素

相关的代码实例可参考Chap3.18.html文件，在IE11.0浏览器中运行的结果如图3-21所示。

注意：IE 9.0以前的版本浏览器不支持audio标签。

3.5.2　<video>元素

<video>元素主要是定义播放视频文件或者视频流的标准。它支持3种视频格式，分别为OGG、WebM和MPEG 4。如果需要在HTML 5移动网页中播放视频，输入的基本格式如下：

     <video src="mov.mp4" controls="controls">
     </ video >

另外，在<video>与</ video >之间插入的内容是供不支持<video>元素的浏览器显示的。

【例3-19】（实例文件：ch03\Chap3.19.html）<video>元素的应用。代码如下：

     <!DOCTYPE html>
     <html>
     <head>
     <title>video</title>
     <head>
     <body >
     <video src="mov.mp4" controls="controls">
     </ video >
     </body>
     </html>

相关的代码实例可参考Chap3.19.html文件，在IE浏览器中运行的结果如图3-22所示。

在Firefox浏览器中，可以看到加载的视频控制条界面，单击“播放”按钮，即可查看视频的内容，如图3-23所示。

图3-22　使用<video>元素后的运行结果

图3-23　视频内容

3.5.3　<source>元素

<source>元素为媒体元素定义媒体资源，其允许用户规定两个视频／音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

【例3-20】（实例文件：ch03\Chap3.20.html）<source>元素的应用。代码如下：

     <!DOCTYPE html>
     <html>
     <head>
     <title><source>元素</title>
     </head>
     <body>
     <audio controls>
     <source src="song.mp3" type="audio/mpeg">
     </audio>
     </body>
     </html>

相关的代码实例可参考Chap3.20.html文件，在IE11.0浏览器中运行的结果如图3-24所示。

图3-24　使用<source>元素后的运行结果

3.5.4　<embed>元素

<embed>元素用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。HTML 5中代码结构如下：

     <embed src="……"/>

【例3-21】（实例文件：ch03\Chap3.21.html）使用<embed>元素插入动画。代码如下：

     <!DOCTYPE HTML>
     <html>
     <body>
     <embed src="images/飞翔的海鸟.swf"/>
     </body>
     </html>

相关的代码实例可参考Chap3.21.html文件，在IE11.0浏览器中运行的结果如图3-25所示。

图3-25　使用<embed>元素后的运行结果

3.6　新增全局属性

在HTML 5中新增了许多全局属性，如contenteditable属性、spellcheck属性、draggable属性、data-*属性等，利用这些属性可以轻松制作出移动页面结构。下面来详细介绍常用新增属性的应用。

3.6.1　contenteditable属性

contenteditable属性是HTML 5中新增的标准属性，其主要功能是指定是否允许用户编辑内容。该属性有两个值：true和false。为内容指定contenteditable属性为true表示可以编辑，false表示不可编辑。如果没有指定值则会采用隐藏的inherit（继承）状态，即如果元素的父元素是可编辑的，则该元素就是可编辑的。

【例3-22】（实例文件：ch03\Chap3.22.html）contentEditable属性应用实例。代码如下：

     <!DOCTYPE html>
     <head>
     <title>contenteditable属性应用实例</title>
     </head>
     <body>
     <h3>对以下内容进行编辑</h3>
     <ol contenteditable="true">
     <li>列表一</li>
     <li>列表二</li>
     <li>列表三</li>
     </ol>
     </body>
     </html>

图3-26　使用contenteditable属性后的运行结果

相关的代码实例可参考Chap3.22.html文件，在IE11.0浏览器中运行的结果如图3-26所示。

注意：对内容进行编辑后，如果关闭网页，编辑的内容将不会被保存。如果想要保存其中的内容，则只能把该元素的innerHTML发送到服务器端进行保存。

3.6.2　data-*属性

data-*属性用于存储私有页面后应用的自定义数据，该属性可以在所有的HTML元素中嵌入数据。自定义的数据可以让页面拥有更好的交互体验，而不需要使用Ajax或去服务端查询数据。data-*属性由以下两部分组成：

• 属性名不要包含大写字母，在data-后必须至少有一个字符。
• 该属性可以是任何字符串。

【例3-23】（实例文件：ch03\Chap3.23.html）data-*属性应用实例。代码如下：

相关的代码实例可参考Chap3.23.html文件，在IE浏览器中运行的结果如图3-27所示。

单击任何一个动物类型，即可弹出一个信息提示框，提示用户该动物属于哪个物种类型，物种类别就是data-*属性的值，如图3-28所示。

图3-27　使用data-*属性后的运行结果

图3-28　显示data-*属性的值

3.6.3　draggable属性

draggable属性规定元素是否可拖动。默认情况下，链接和图像是可拖动的。draggable属性经常用于拖放操作。

【例3-24】（实例文件：ch03\Chap3.24.html）draggable属性应用实例。代码如下：

相关的代码实例可参考Chap3.24.html文件，在IE浏览器中运行的结果如图3-29所示。

拖动下方的段落，即可将其放置到上方的矩形中，如图3-30所示。

图3-29　使用draggable属性后的运行结果

图3-30　显示可拖动的段落

3.6.4　spellcheck属性

spellcheck属性是HTML 5中的新属性，规定是否对元素内容进行拼写检查。可对以下文本进行拼写检查：类型为text的input元素中的值（非密码）、textarea元素中的值、可编辑元素中的值。

【例3-25】（实例文件：ch03\Chap3.25.html）使用spellcheck属性的实例。代码如下：

     <!DOCTYPE html>
     <html>
     <head>
     <title>spellcheck属性的应用</title>
     </head>
     <body>
     <p contenteditable="true" spellcheck="true">使用spellcheck属性,使段落内容可被编辑.</p>
     </body>
     </html>

相关的代码实例可参考Chap3.25.html文件，在IE浏览器中运行的结果如图3-31所示。

选中需要编辑的文字进行编辑操作，如这里在页面中输入“你好！”，如图3-32所示。

图3-31　使用spellcheck属性后的运行结果

图3-32　编辑文字

3.7　就业面试技巧与解析

3.7.1　面试技巧与解析（一）

面试官：HTML 5中新多媒体元素有哪些？

应聘者：HTML 5中新多媒体元素有以下几种。

• audio元素：主要是定义播放声音文件或者音频流的标准。
• video元素：主要是定义播放视频文件或者视频流的标准。
• <source>元素：为媒体元素定义媒体资源，其允许用户规定两个视频／音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
• embed元素：用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。

3.7.2　面试技巧与解析（二）

面试官：HTML 5中分组元素有哪些？

应聘者：HTML 5中分组元素有以下3种：

• <hgroup>元素：用于对网页或区段（section）的标题进行组合，其通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子标题算一组。
• <figure>元素：用来表示网页上一块独立的内容，将其从网页移除后不会对网页中的其他内容产生影响。
• <figcaption>元素：用于为<figure>元素定义标题。