3.3 HTML5中的页面元素及属性
3.3.1 分组元素
1．figure元素和figcaption元素
HTML5使用figure和figcaption元素插入图片和图注。figure元素用于插入某张图片并添加描述。在HTML5以前，需要插入图片时，只有额外使用div之类的元素才能将文本添加到页面中。这样做的缺点在于图片和图注并无任何关联。而现在添加figure之后，可以再利用figcaption为图片添加图注。
例题3-6：使用figure和figcaption元素插入图片和图注，代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用figure和figcaption元素插入图片和图注</title>
</head>
<body>
<figure>
<img src="3-6.png" alt=""/>
<figcaption>
这里是图片的图注内容
</figcaption>
</figure>
</body>
</html>
在浏览器中预览的效果如图3-6所示。
图3-6 使用figure和figcaption元素插入图片和图注的效果
虽然figure通常用来插入图片，但它也可以是一段代码、图片、音乐或者视频。通常情况下，figure主要用于图片。
figure元素中不仅仅包含一张图片，可以使用figure元素来显示多张图片。
例题3-7：figure元素的使用。
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用figure元素来显示多张图片</title>
</head>
<body>
<figure>
<img src="3-6.png" alt=""/>
<img src="3-6.png" alt=""/>
<img src="3-6.png" alt=""/>
<figcaption>
这一组图片的描述
</figcaption>
</figure>
</body>
</html>
在浏览器中预览的效果如图3-7所示。
图3-7 使用figure元素来显示多张图片效果
显示图片内容的时候是否总是使用figcaption元素？如果单纯是为了显示某张图片，那么使用普通的<img>标记足矣。不过，如果它包括额外的有助于内容描述的信息，那么就应该使用<figure>和<figcaption>。
提示：<figure>中只能包含一个<figcaption>。
2．hgroup元素
<hgroup>标签用于对网页或区段（section）的标题进行组合。这个元素用来对多个相关联的h1～h6标题进行分组。如果你的网站有副标题，可以使用hgroup元素。虽然hgroup是一个有效的分组选项，但是它主要是用来告知文档大纲哪个标题是最重要的。文档大纲只会包括最顶层的标题。
下面可以通过实例学习<hgroup>标签的用法。
例题3-8：<hgroup>元素的使用，代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>hgroup标签的用法</title>
</head>
<body>
<hgroup>
<h1>标题1</h1>
<h2>标题2</h2>
</hgroup>
<p>这里是内容</p>
</body>
</html>
在浏览器中预览的效果如图3-8所示。
图3-8 hgroup标签的用法效果
3.3.2 页面交互元素
1．details元素和summary元素
<details>是一个全新的HTML5元素，功能是描述文档某个部分的细节。<details>标记常与<summary>标记配合使用。在默认情况下，不显示<details>中的内容。当与<summary>标记配合使用时，在单击<summary>标记后才会显示<datails>元素中设置的内容。<details>元素的常用属性如下所示：
3-6 DETAILS元素
① open：值为open，功能是定义details是否可见。
② subject：值为sub_id，功能是设置元素所对应项目的ID号。
③ draggable：值为true或false，功能是设置是否为可拖动元素，默认值是false。
<details>标记的本质是允许我们在单击标签时显示和隐藏内容。
<summary>标签包含了<details>元素的标题。在两者结合起来使用的代码中，<summary>元素是<details>元素的第一个子元素，二者经常同时出现在页面中。
例题3-9：<details>元素和<summary>元素的使用。
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>details标记与summary标记的使用</title>
</head>
<body>
<hgroup>
<details open="open">
<summary>页面说明</summary>
今天是2017年12月18号
</details>
</body>
</html>
在浏览器中预览的效果如图3-9所示。
图3-9 details标记与summary标记的使用效果
当读者单击小三角形之后，文字会隐藏。
提示：目前只有Chrome和Safari浏览器支持<details>标签，所以这一效果现在还是用JS实现。
2．progress元素
<progress>标签定义运行中的进度（进程）。可以使用<progress>标签来显示JavaScript中耗费时间的函数的进度。其具体语法格式如下：
3-7 PROGRESS元素
<progress max="值" value="值"></progress>
其中属性max定义完成的值，属性value定义进程的当前值。
例题3-10：<progress>元素的使用。
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>progress标签的使用</title>
</head>
<body>
<hgroup>
对象的下载进度：
<progress max="100" value="85"></progress>
</body>
</html>
在浏览器中预览的效果如图3-10所示。
图3-10 <progress>标签的使用效果
3.3.3 文本层次语义元素
1．time元素
<time>标签定义公历的时间（24小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
3-8 TIME元素
例题3-11：<time>元素的使用方法。代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>time元素的使用</title>
</head>
<body>
<hgroup>
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2017-12-19">明天</time> 有个约会。</p>
</body>
</html>
在浏览器中预览的效果如图3-11所示。
图3-11 time元素的使用效果
在这里，读者看到了一个事实，那就是<time>标签的效果没有出来，这是为什么呢？答案就是：目前所有主流浏览器都不支持<time>标签。
3-9 MARK元素
2．mark元素
<mark>标签定义带有记号的文本。在需要突出显示文本时使用<mark>标签。我们通过实例学习<mark>标签的使用方法。
例题3-12：利用<mark>标签，突出显示部分文本，代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>突出显示部分文本</title>
</head>
<body>
<hgroup>
<p>不要忘记给我买 <mark>糖</mark> 爸爸．</p>
</body>
</html>
在浏览器中预览的效果如图3-12所示。
图3-12 突出显示部分文本的效果
上面这个很童趣的提示效果，是不是能够让我们加深对mark标签的印象呢？
3．cite元素
<cite>标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。其具体语法形式如下：
<cite>内容</cite>
按照惯例，引用的文本将以斜体显示。用<cite>标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊等。
例题3-13：使用<cite>标签来定义作品的标题，代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用cite标签来定义作品的标题</title>
</head>
<body>
<hgroup>
<p>我是作品的<cite>标题</cite></p>
</body>
</html>
在浏览器中预览的效果如图3-13所示。
图3-13 使用<cite>标签来定义作品的标题效果
3.3.4 全局元素
在HTML5中新增了一个概念——全局属性。全局变量是指对任何元素都可以使用的属性。这里介绍如下几个全局属性。
1．draggable属性
3-10 DRAGGABLE属性
draggable属性规定元素是否可拖动。其语法规则如下：
<element draggable="true|false|auto">
其中属性值true规定元素是可拖动的，false规定元素是不可拖动的，auto使用浏览器的默认特性。
例题3-14：定义一个可拖动的段落，代码如下所示：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定义了一个可拖动的段落</title>
</head>
<body>
<hgroup>
<p draggable="true">我是一个可拖动的段落</p>
</body>
</html>
在浏览器中预览的效果如图3-14所示。
图3-14 可拖动的段落显示效果
提示：实际上，如果你想体会draggable属性的使用效果，目前需要使用Firefox、Chrome及Safari浏览器。
2．hidden属性
hidden属性规定对元素进行隐藏。隐藏的元素不会被显示。其具体语法格式如下：
<element hidden="hidden">
如果使用该属性，则会隐藏元素。例如，若想隐藏一个段落，可以进行如下操作：
<p hidden="hidden">这是一个段落。</p>
可以对段落标签p添加hidden属性进行设置，使用户在满足某些条件时才能看到这个段落。然后，可使用JavaScript来删除hidden属性，使该元素变得可见。
3-11 SPELLCHECK属性
3．spellcheck属性
spellcheck属性规定是否对元素内容进行拼写检查。其具体语法格式如下：
<element spellcheck="value">
其中，value仅有true和false两种值可供选择，该属性值决定应当对元素的文本是否进行拼写检查。下面通过实例来进一步学习spellcheck属性的用法。
例题3-15：利用spellcheck属性进行拼写检查。代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>带有编写检查的可编辑段落</title>
</head>
<body>
<hgroup>
<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>
</body>
</html>
在浏览器中预览的效果如图3-15所示。
图3-15 带有拼写检查的可编辑段落效果
spellcheck属性还可以对以下文本进行拼写检查：
① 类型为text的input元素中的值（非密码）；
② textarea元素中的值；
③ 可编辑元素中的值。
4．contenteditable属性
在例3-15中看到了contenteditable属性的应用，它代表什么意思呢？contenteditable属性规定是否可编辑元素的内容。例如，在例3-15中就定义了一个可以编辑的段落。其语法规则如下：
<element contenteditable="value">
其中，contenteditable的值可以是true、false或者classname：
① true：规定可以编辑元素内容；
② false：规定无法编辑元素内容；
③ classname：继承父元素的contenteditable属性。