2.3　设计新的语义信息

HTML5不仅增加了很多结构元素，也增加了很多实用语义元素，下面来详细学习。

2.3.1　address——联系信息

视频讲解

address元素用来在文档中定义联系信息，包括文档作者或文档编辑者名称、电子邮箱、真实地址、电话号码等。

【示例1】address元素的用途不仅仅是描述电子邮箱或真实地址，还可以描述与文档相关的联系人的所有联系信息。下面代码展示了博客侧栏中的一些技术参考网站网址链接。

【示例2】也可以把footer元素、time元素与address元素结合起来使用，以实现设计一个比较复杂的版块结构。

这个示例把博客文章的作者、博客的主页链接作为作者信息放在了address元素中，把文章发表日期放在了time元素中，把这个address元素与time元素中的总体内容作为脚注信息放在了footer元素中。

2.3.2　time——显示时间

视频讲解

time元素定义公历的时间（24小时制）或日期，时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码。例如，浏览器能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

【示例1】下面示例演示如何定义时间和日期。

    <p>我们每天早上 <time>9:00</time> 打卡上班。</p>
    <p>我在 <time datetime="2018-02-14">情人节</time> 有个约会。</p>

【拓展】

time元素定义了两个属性，简单说明如下：

　datetime：规定日期和时间的格式。否则，由元素的内容给定日期和时间。

　pubdate：定义time元素中的日期和时间是文档或article内容的发布日期。

【示例2】time元素可以定义很多格式的日期和时间。

    <time datetime="2017-11-13">2017年11月13日</time>
    <time datetime="2017-11-13">11月13日</time>
    <time datetime="2017-11-13">我的生日</time>
    <time datetime="2017-11-13T20:00">我生日的晚上8点</time>
    <time datetime="2017-11-13T20:00Z">我生日的晚上8点</time>
    <time datetime="2017-11-13T20:00+09:00">我生日的晚上8点的美国时间</time>

浏览器通过datetime属性获取time的时间，而time开始标记与结束标记中间的部分是显示在网页上的。datetime属性中日期与时间之间要用“T”文字分隔，“T”表示时间。

pubdate属性是一个可选的布尔值属性，它可以用在article元素中的time元素上，意思是time元素代表了文章（article元素的内容）或整个网页的发布日期。注意，HTML5新标准不再支持pubdate属性。

【示例3】下面示例使用pubdate属性为文档添加引擎检索的发布日期。

由于time元素不仅仅表示发布时间，而且还可以表示其他用途的时间，如通知、约会等。

【示例4】为了避免引擎误解发布日期，使用pubdate属性可以显式告诉引擎文章中哪个是真正的发布时间。

在这个例子中，有两个time元素，分别定义了两个日期：紧急通知日期和发布日期。由于都使用了time元素，所以需要使用pubdate属性表明哪个time元素代表了新闻的发布日期。

2.3.3　figure和figcaption——流媒体

视频讲解

figure元素可以定义独立的流内容，如图像、图表、照片、代码等。figure元素的内容应该与主内容相关，但如果被删除，则不会对文档产生影响。

figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部，可以书写在figure元素内的其他从属元素的前面或后面。一个figure元素内最多只允许放置一个figcaption元素，但允许放置多个其他元素。

【示例1】下面示例设计一个不带标题的figure元素。

【示例2】下面示例设计一个带标题的figure元素，标题使用figcaption元素定义。

【示例3】下面示例设计为多幅图片设计使用同一个标题，演示效果如图2.1所示。

图2.1　多个图片使用同一个标题

2.3.4　details和summary——详细内容

视频讲解

details元素用于描述文档或文档某个部分的细节，被details标识的内容可以展开或收缩显示。details可以包含文字、表单、插件或表格等任何超文本信息。

details包含一个open属性，取值为布尔值，当该属性值为true时，其包含的子元素应该展开显示；当该属性值为false时，其包含的子元素应该收缩起来不显示。open属性的默认值为false，页面打开时，其内部子元素处于收缩状态。

summary元素为details的子元素，可以为details定义标题。标题是可见的，用户单击标题时，会显示出details包含的信息。

【示例1】下面示例使用details和summary元素设计折叠面板效果，演示如图2.2所示。

图2.2　使用details和summary元素设计折叠面板

【示例2】如果details元素内没有summary元素，浏览器会提供默认文字以供单击，例如，“details”或某些本地化文字，如“详细信息”，浏览器也提供一个诸如上下箭头一类的图标，标示该区域可以展开或收缩，效果如图2.3所示。

当details元素的状态从展开切换为收缩，或从收缩切换为展开时，均触发toggle事件。

【示例3】下面示例设计当用户切换details元素显示或隐藏显示时，取消summary元素轮廓效果，并给details元素包含的内容加一个边框，效果如图2.4所示。

图2.3　使用details设计折叠面板

图2.4　取消标题轮廓线

2.3.5　mark——记号文本

视频讲解

mark元素用来定义带有记号的文本，它表示页面中需要临时高亮显示的信息，对于当前浏览者来说具有提示作用。例如，在网页中检索某个关键词时，呈现匹配的检索结果，现在很多搜索引擎都用类似方法实现了mark元素的功能。

【示例1】下面示例使用mark元素高亮显示“HTML5”关键词，演示效果如图2.5所示。

在上面脚本中，获取页面中所有正文文本，然后使用数组对象的forEach()方法迭代每个p元素，使用字符串对象的replace()方法，通过正则表达式匹配到正文中所有的“HTML5”关键词，把它替换为“<mark> HTML5</mark>”的HTML字符串进行显示。

【示例2】mark元素还可以用于标记引文，为特殊目的把原文作者没有重点强调的内容标记出来。下面示例使用mark元素标记唐诗中韵脚字，方便浏览者浏览，效果如图2.6所示。

图2.5　使用mark元素高亮显示关键词

图2.6　使用mark元素高亮显示韵脚

【辨析】

在HTML4中，用户习惯使用em或strong元素来突出显示文字，但是mark元素的作用与这两个元素的作用是有区别的，不能混用。

mark元素的标记目的与原文作者无关，或者说它不是被原文作者用来标示文字的，而是后来被引用时添加上去的。它的目的是吸引当前用户的注意力，供用户参考，希望能够对用户有帮助。而strong是原文作者用来强调一段文字的重要性的，如错误信息等，em元素是作者为了突出文章重点文字而使用的。

2.3.6　progress——进度条

视频讲解

progress元素定义任务的进度或进程。这个进度可以是不确定的，表示进度正在进行，但不清楚还有多少进度没有完成，也可以用0到某个最大数字（如100）之间的数字来表示进度完成情况。一般与JavaScript一同使用，来动态显示任务的进度。

progress元素包含两个属性，简单说明如下：

　max：规定任务一共需要多少工作。

　value：规定已经完成多少任务。

在设置属性的时候，value和max属性只能指定为有效的浮点数，value属性的值必须大于0、小于或等于max属性的值，max属性的值必须大于0。

【示例】下面示例简单演示了如何使用progress元素，演示效果如图2.7所示。

图2.7　使用progress元素

2.3.7　meter——度量

视频讲解

meter元素定义已知范围或分数值内的标量测量。例如，磁盘用量、查询结果的相关性等。

注意，meter元素不应用于指示进度，如果标记进度条，应使用progress元素。

meter元素包含7个属性，简单说明如下：

　form：规定<meter>元素所属的一个或多个表单。

　high：规定被视作高的值的范围。如果小于low属性值，那么使用low属性值；如果大于max属性值，那么使用max属性值。

　low：规定被视作低的值的范围。必须小于或等于high属性值。如果小于min属性值，那么使用min属性值。

　max：规定范围的最大值。默认为1，如果小于min属性值，那么使用min属性值。

　min：规定范围的最小值。默认为0，不能小于0。

　optimum：规定度量的优化值。必须在min和max属性值之间，可以大于high属性值。

　value：必需，规定度量的当前值。默认为0，可以指定一个浮点小数值。

【示例】下面示例简单演示了如何使用meter元素，效果如图2.8所示。

    <meter value="3" min="0" max="10">十分之三</meter>
    <meter value="0.6">60%</meter>

图2.8　使用meter元素

2.3.8　dialog——模态对话框

视频讲解

dialog元素定义对话框或窗口。在默认状态下，dialog元素处于隐藏状态，可以在JavaScript脚本中使用show()方法显示dialog元素，可以使用close()方法隐藏dialog元素。

dialog元素包含open属性，用来设置dialog元素打开，用户可与之交互。

【示例1】下面示例演示了一个打开的对话框，效果如图2.9所示。

    <dialog open>打开的对话框</dialog>

图2.9　打开的对话框

【示例2】下面示例演示了如何使用JavaScript脚本控制对话框的显示或隐藏。

在示例页面中，显示一个“打开对话框”按钮，页面打开时dialog元素处于隐藏状态，单击“打开对话框”按钮后，dialog元素变为显示状态。dialog元素中放置一个“关闭”按钮，单击该按钮后dialog元素变为隐藏状态，效果如图2.10所示。

图2.10　打开对话框

在上面代码中，可以使用dialog元素的showModal()方法以模式对话框的形式显示dialog元素；如果要在页面打开时即显示dialog元素，可以使用dialog元素的open属性；可以使用dialog元素的returnValue属性为对话框设置或返回一个返回值。

2.3.9　bdi——隔离文本

视频讲解

bdi元素允许设置一段文本，使其脱离其父元素的文本方向设置。在发布用户评论或其他无法完全控制的内容时，该标签很有用。

【示例】下面示例将用户名从周围的文本方向设置中隔离出来。

目前，只有Firefox和Chrome浏览器支持bdi元素。

2.3.10　wbr——换行断点

视频讲解

wbr元素定义在文本中的何处适合添加换行符。如果单词太长，或者担心浏览器会在错误的位置换行，那么可以使用wbr元素来添加单词换行点，避免浏览器随意换行。

目前，除了IE浏览器外，其他主流浏览器都支持wbr元素。

【示例】下面示例为URL字符串添加换行符标签，这样当窗口宽度变化时，浏览器会自动根据断点确定换行位置，效果如图2.11所示。

       <p>本站旧地址为：https:<wbr>//<wbr>www.old_site.com/，新地址为：https:<wbr>//<wbr>www.new_site.com/。
    </p>

图2.11　定义换行断点

2.3.11　ruby、rt、rp——文本注释

视频讲解

ruby元素可以定义ruby注释，如在汉字顶部添加拼音。ruby元素需要与rt或rp元素配合使用，其中rt和rp元素必须位于ruby元素内。

　rt元素定义字符（中文注音或字符）的解释或发音。

　rp元素定义备用显示内容，即当浏览器不支持ruby元素时的显示内容。

【示例】下面示例演示如何使用ruby和rt元素为唐诗诗句注音，效果如图2.12所示。

图2.12　给唐诗注音

2.3.12　command——菜单命令

视频讲解

在HTML5中被HTML4弃用的menu元素被重新定义。使用menu元素可以定义命令的列表或菜单，如上下文菜单、工具栏，以及列出表单控件和命令。menu元素中可以包含command和menuitem元素，用于定义命令和项目。

【示例1】下面示例配合使用menu和command元素，定义一个命令，当单击该命令时，将弹出提示对话框，如图2.13所示。

图2.13　定义菜单命令

command元素可以定义命令按钮，如单选按钮、复选框或按钮。只有当command元素位于menu元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它定义键盘快捷键。

目前，只有IE 9（更早或更晚的版本都不支持）和Firefox支持command元素。

command元素包含很多属性，专门用来定制命令的显示样式和行为，说明如表2.1所示。

表2.1　command元素属性

【示例2】下面示例使用command元素各种属性定义一组单选按钮命令组，演示效果如图2.14所示。目前还没有浏览器完全支持这些属性。

menu元素也包含两个专用属性，简单说明如下：

　label：定义菜单的可见标签。

　type：定义要显示哪种菜单类型，取值说明如下：

　list：默认值，定义列表菜单。一个用户可执行或激活的命令列表（li元素）。

　context：定义上下文菜单。该菜单必须在用户能够与命令进行交互之前被激活。

　toolbar：定义工具栏菜单。活动式命令，允许用户立即与命令进行交互。

【示例3】下面示例使用type属性定义了两组工具条按钮，演示效果如图2.15所示。

图2.14　定义单选按钮命令组

图2.15　定义工具条命令组