3.3　特殊用途文本

HTML5为标识特定用途的信息，新增了很多文本标签，具体说明如下。

3.3.1　标记高亮显示

HTML5使用新的mark元素实现突出显示文本。可以使用CSS对mark元素里的文字应用样式（不应用样式也可以），但应仅在合适的情况下使用该元素。无论何时使用mark，该元素总是用于提起浏览者对特定文本的注意。

最能体现mark元素作用的应用：在网页中检索某个关键词时，呈现的检索结果，现在许多搜索引擎都用其他方法实现了mark元素的功能。

【示例1】使用mark元素高亮显示对“HTML5”关键词的搜索结果，演示效果如图3.4所示。

mark元素还可以用于标识引用原文，为了某种特殊作用会把原文作者没有重点强调的内容标示出来。

【示例2】使用mark元素将唐诗中韵脚高亮显示出来，效果如图3.5所示。

图3.4　使用mark元素高亮显示关键字

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

3.3.2　标记进度信息

progress是HTML5的新元素，它指示某项任务的完成进度。可以用它表示一个进度条，就像在Web应用中看到的指示保存或加载大量数据操作进度的那种组件。

支持progress的浏览器会根据属性值自动显示一个进度条，并根据值对其进行着色。<progress>和</progress>之间的文本不会显示出来。例如：

     <p>安装进度: <progress max="100" value="35">35%</progress></p>

一般只能通过JavaScript动态地更新value属性值和元素里面的文本以指示任务进程。通过JavaScript（或直接在HTML中）将value属性设为35（假定max="100"）。

progress元素支持3个属性：max、value和form。它们都是可选的，max属性指定任务的总工作量，其值必须大于0。value是任务已完成的量，值必须大于0、小于或等于max属性值。如果progress没有嵌套在form元素里面，又需要将它们联系起来，可以添加form属性并将其值设为该form的ID。

目前，Firefox 8+、Opera11+、IE 10+、Chrome 6+、Safari 5.2+版本的浏览器都以不同的表现形式对progress元素提供了支持。

【示例】应用progress元素，效果如图3.6所示。

图3.6　使用progress元素

3.3.3　标记刻度信息

meter也是HTML5的新元素，它很像progress元素。可以用meter元素表示分数的值或已知范围的测量结果。简单地说，它代表的是投票结果。例如，已售票数（共850张，已售811张）、考试分数（百分制的90分）、磁盘使用量（如256GB中的74GB）等测量数据。

HTML5建议（并非强制）浏览器在呈现meter时，在旁边显示一个类似温度计的图形，一个表示测量值的横条，测量值的颜色与最大值的颜色有所区别（相等除外）。作为当前少数几个支持meter的浏览器，Firefox正是这样显示的。对于不支持meter的浏览器，可以通过CSS对meter添加一些额外的样式，或用JavaScript进行改进。

图3.7　刻度值

【示例】应用meter元素，效果如图3.7所示。

     <p>项目的完成状态：<meter value="0.80">80%完成</meter></p>
     <p>汽车损耗程度：<meter low="0.25" high="0.75" optimum="0" value="0.21">21%</meter></p>
     <p>十千米竞走里程：<meter min="0" max="13.1" value="5.5" title="Miles">4.5</meter></p>

支持meter的浏览器（如Firefox）会自动显示测量值，并根据属性值进行着色。<meter>和</meter>之间的文字不会显示出来。如最后一个示例所示，如果包含title文本，就会在鼠标悬停在横条上时显示出来。虽然并非必需，但最好在meter里包含一些反映当前测量值的文本，供不支持meter的浏览器显示。

IE不支持meter，它会将meter元素里的文本内容显示出来，而不是显示一个彩色的横条。可以通过CSS改变其外观。

meter不提供定义好的单位，但可以使用title属性指定单位，如最后一个例子所示。通常，浏览器会以提示框的形式显示title文本。meter并不用于标记没有范围的普通测量值，如高度、宽度、距离、周长等。

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

　value：在元素中特别标示出来的实际值。该属性值默认为0，可以为该属性指定一个浮点小数值。唯一必需包含的属性。

　min：设置规定范围时，允许使用的最小值。默认为0，设定的值不能小于0。

　max：设置规定范围时，允许使用的最大值。如果设定时，该属性值小于min属性的值，那么把min属性的值视为最大值。max属性的默认值为1。

　low：设置范围的下限值，必须小于或等于high属性的值。同样，如果low属性值小于min属性的值，那么把min属性的值视为low属性的值。

　high：设置范围的上限值。如果该属性值小于low属性的值，那么把low属性的值视为high属性的值，同样，如果该属性值大于max属性的值，那么把max属性的值视为high属性的值。

　optimum：设置最佳值。该属性值必须在min属性值与max属性值之间，可以大于high属性值。

　form：设置meter元素所属的一个或多个表单。

3.3.4　标记时间信息

使用time元素标记时间、日期或时间段，这是HTML5新增的元素。呈现这些信息的方式有多种。例如：

     <p>我们在每天早上 <time>9:00</time> 开始营业。</p>
     <p>我在 <time datetime="2020-02-14">情人节</time> 有个约会。</p>

time元素最简单的用法是不包含datetime属性。在忽略datetime属性的情况下，它们的确提供了有效的机器可读格式的时间和日期。如果提供了datetime属性，time标签中的文本可以不严格使用有效的格式；如果忽略datetime属性，文本内容就必须是合法的日期或时间格式。

time中包含的文本内容会出现在屏幕上，对用户可见，而可选的datetime属性则是为机器准备的。该属性需要遵循特定的格式。浏览器只显示time元素的文本内容，而不会显示datetime的值。

datetime属性不会单独产生任何效果，但可以用于在Web应用（如日历应用）之间同步日期和时间。这就是必须使用标准的机器可读格式的原因，这样程序之间就可以使用相同的“语言”来共享信息。

【拓展】

datetime属性（或者没有datetime属性的time元素）必须提供特定的机器可读格式的日期和时间。这可以简化为下面的形式。

     YYYY-MM-DDThh:mm:ss

例如（当地时间）：

     2020-11-03T17:19:10

表示“当地时间2020年11月3日下午5时19分10秒”。小时部分使用24小时制，因此表示下午5点应使用17，而非05。如果包含时间，秒是可选的。也可以使用hh:mm.sss格式提供时间的毫秒数。注意，毫秒数之前的符号是一个点。

如果要表示时间段，则格式稍有不同。有几种语法，不过最简单的形式为：

     nh nm ns

其中，3个n分别表示小时数、分钟数和秒数。

也可以将日期和时间表示为世界时。在末尾加上字母Z，就成了UTC（Coordinated Universal Time，全球标准时间）。UTC是主要的全球时间标准。例如（使用UTC的世界时）：

     2020-11-03T17:19:10Z

也可以通过相对UTC时差的方式表示时间。这时不写字母Z，写上–（减）或+（加）及时差即可。例如（含相对UTC时差的世界时）：

     2020-11-03T17:19:10-03:30

表示“纽芬兰标准时（NST）2020年11月3日下午5时19分10秒”（NST比UTC晚3个半小时）。

3.3.5　标记联系信息

HTML没有专门用于标记通信地址的元素，address元素是用以定义与HTML页面或页面一部分（如一篇报告或新文章）有关的作者、相关人士或组织的联系信息，通常位于页面底部或相关部分内容。至于address具体表示的是哪一种信息，取决于该元素出现的位置。

【示例】标记一个简单的联系信息。

大多数时候，联系信息的形式是作者的电子邮件地址或指向联系信息页的链接。联系信息也有可能是作者的通信地址，这时将地址用address标记就是有效的。但是用address标记公司网站“联系我们”页面中的办公地点，则是错误的用法。

在上面示例中，页面有两个address元素：一个用于article的作者，另一个位于页面级的footer里，用于整个页面的维护者。注意article的address只包含联系信息。尽管article的footer里也有关于作者的背景信息，但这些信息是位于address元素外面。

address元素中的文字默认以斜体显示。如果address嵌套在article里，则属于其所在的最近的article元素；否则属于页面的body。说明整个页面的作者的联系信息时，通常将address放在footer元素里。article里的address提供的是该article作者的联系信息，而不是嵌套在该article里的其他任何article（如用户评论）的作者的联系信息。

address只能包含作者的联系信息，不能包括其他内容，如文档或文章的最后修改时间。此外，HTML5禁止在address里包含以下元素：h1~h6、article、address、aside、footer、header、hgroup、nav和section。

3.3.6　标记显示方向

如果在HTML页面中混合了从左到右书写的字符（如大多数语言所用的拉丁字符）和从右到左书写的字符（如阿拉伯语或希伯来语字符），就可能要用到bdi和bdo元素。

要使用bdo，必须包含dir属性，取值包括ltr（由左至右）或rtl（由右至左），指定希望呈现的显示方向。

bdo适用于段落里的短语或句子，不能用它包围多个段落。bdi元素是HTML5中新加的元素，用于内容的方向未知的情况，不必包含dir属性，因为默认已设为自动判断。

【示例】设置用户名根据不同语言自动调整显示顺序。

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

3.3.7　标记换行断点

HTML5为br引入了一个相近的元素：wbr。它代表“一个可换行处”。可以在一个较长的无间断短语（如URL）中使用该元素，表示此处可以在必要的时候进行换行，从而让文本在有限的空间内更具可读性。因此，与br不同，wbr不会强制换行，而是让浏览器知道哪里可以根据需要进行换行。

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

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

图3.8　定义换行断点

3.3.8　标记旁注

旁注标记是东亚语言（如中文和日文）中一种惯用符号，通常用于表示生僻字的发音。这些小的注解字符出现在它们标注的字符的上方或右方。它们常简称为旁注（ruby或rubi）。日语中的旁注字符称为振假名。

图3.9　给唐诗注音

ruby元素以及它们的子元素rt和rp是HTML5中为内容添加旁注标记的机制。rt指明对基准字符进行注解的旁注字符。可选的rp元素用于在不支持ruby的浏览器中的旁注文本周围显示括号。

【示例】使用<ruby>和<rt>标签为唐诗诗句注音，效果如图3.9所示。

支持旁注标记的浏览器会将旁注文本显示在基准字符的上方（也可能在旁边），不显示括号。不支持旁注标记的浏览器会将旁注文本显示在括号里，就像普通的文本一样。

目前，IE 9+、Firefox、Opera、Chrome和Safari都支持这3个标签。

3.3.9　标记展开／收缩详细信息

HTML5新增details和summary元素，允许用户创建一个可展开、折叠的元件，让一段文字或标题包含一些隐藏的信息。

一般情况下，details用来对显示在页面的内容做进一步的解释，details元素内并不仅限于放置文字，也可以放置表单、插件或对一个统计图提供详细数据的表格。

details元素有一个布尔型的open属性，当该属性值为true时，details包含的内容会展开显示；当该属性值为false（默认值）时，其包含的内容被收缩起来不显示。

summary元素从属于details元素，当单击summary元素包含的内容时，details包含的其他所有从属子元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字以供单击，同时还会提供一个类似上下箭头的图标，提示details的展开或收缩状态。

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

【示例】设计一个商品的详细数据展示，演示效果如图3.10所示。

图3.10　展开信息效果

目前，Chrome 12+、Edge 79+、Firefox 49+、Safari 8+和Opera 26+支持该details和summary元素。

3.3.10　标记对话框信息

HTML5新增dialog元素，用来定义一个对话框或窗口。dialog在界面中默认为隐藏状态，可以设置open属性定义是否打开对话框或窗口，也可以在脚本中使用该元素的show()或close()方法动态控制对话框的显示或隐藏。

图3.11　打开对话框效果

【示例1】应用dialog元素，效果如图3.11所示。

【示例2】如果调用dialog元素的showModal()方法可以以模态对话框的形式打开，效果如图3.12所示。然后使用::backdrop伪类设计模态对话框的背景样式。