4.3 特殊文本
HTML5为标识特定功能的信息，新增很多文本元素，具体说明如下。
4.3.1 标记高亮显示
HTML5使用新的mark元素实现突出显示文本。可以使用CSS对mark元素里的文字应用样式（不应用样式也可以），但应仅在合适的情况下使用该元素。无论何时使用mark元素，它总是用于提起浏览者对特定文本的注意。
最能体现mark元素作用的应用：在网页中检索某个关键词时，呈现的检索结果，现在许多搜索引擎都用其他方法实现了mark元素的功能。
【示例1】下面的示例使用mark元素高亮显示对HTML5关键词的搜索结果，演示效果如图4.5所示。
mark元素还可以用于标识引用原文，为了某种特殊目的而把原文作者没有重点强调的内容标示出来。
【示例2】下面的示例使用mark元素将唐诗中韵脚特意高亮显示出来，效果如图4.6所示。
图4.5 使用mark元素高亮显示关键字
图4.6 使用mark元素高亮显示韵脚
注意：在HTML4中，用户习惯使用em或strong元素来突出显示文字，但是mark元素的作用与这两个元素的作用是有区别的，不能混用。
mark元素的标示目的与原文作者无关，或者说它不是被原文作者用来标示文字的，而是后来被引用时添加上去的，它的目的是吸引当前用户的注意力，供用户参考，希望能够对用户有帮助。而strong元素是原文作者用来强调一段文字的重要性的，如错误信息等，em元素是作者为了突出文章重点文字而使用的。
提示：目前，所有最新版本的浏览器都支持mark元素。IE8以及更早的版本不支持mark元素。
4.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+、Opera 11+、IE 10+、Chrome 6+、Safari 5.2+版本的浏览器都以不同的表现形式对progress元素提供了支持。
【示例】下面的示例简单演示了如何使用progress元素，演示效果如图4.7所示。
图4.7 使用progress元素
注意：progress元素不适合用来表示度量衡，例如，磁盘空间使用情况或查询结果。如需表示度量衡，应使用meter元素。
4.3.3 标记刻度信息
meter也是HTML5的新元素，它很像progress元素。可以用meter元素表示分数的值或已知范围的测量结果。简单地说，它代表的是投票结果。例如，已售票数（共850张，已售811张）、考试分数（百分制的90分）、磁盘使用量（如256 GB中的74 GB）等测量数据。
HTML5建议（并非强制）浏览器在呈现meter元素时，在旁边显示一个类似温度计的图形，一个表示测量值的横条，测量值的颜色与最大值的颜色有所区别（相等除外）。作为当前少数几个支持meter元素的浏览器，Firefox正是这样显示的。对于不支持meter元素的浏览器，可以通过CSS对meter元素添加一些额外的样式，或用JavaScript进行改进。
【示例】下面的示例简单演示了如何使用meter元素，演示效果如图4.8所示。
<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>之间的文字不会显示出来。如上面示例中的最后一个p元素所示，如果包含title文本，会在鼠标悬停在横条上时显示出来。虽然并非必需，但最好在meter元素里包含一些反映当前测量值的文本，供不支持meter元素的浏览器显示。
图4.8 刻度值
IE不支持meter元素，它会将meter元素里的文本内容显示出来，而不是显示一个彩色的横条。可以通过CSS改变其外观。
meter元素不提供定义好的单位，但可以使用title属性指定单位，如上面示例中的最后一个P元素所示。通常，浏览器会以提示框的形式显示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元素所属的一个或多个表单。
提示：目前，Safari 5.2+、Chrome 6+、Opera 11+、Firefox 16+版本的浏览器支持meter元素。浏览器对meter元素的支持情况还在变化，关于最新的浏览器支持情况，参见http://caniuse.com/#feat=progressmeter。
有人尝试过针对支持meter元素的浏览器和不支持的浏览器统一编写meter元素的CSS。在网上搜索“style HTML5 meter with CSS”可以找到一些解决方案，其中的一些用到了JavaScript。
4.3.4 标记时间信息
使用time元素标记时间、日期或时间段，time元素是HTML5新增的元素。呈现这些信息的方式有多种。例如：
<p>我们在每天早上<time>9:00</time>开始营业。</p>
<p>我在<time datetime="2018-02-14">情人节</time>有个约会。</p>
time元素最简单的用法是不包含datetime属性。在忽略datetime属性的情况下，它的确提供了具备有效的机器可读格式的时间和日期。如果提供了datetime属性，time元素中的文本可以不严格使用有效的格式；如果忽略datetime属性，文本内容就必须是合法的日期或时间格式。
time元素中包含的文本内容会出现在屏幕上，对用户可见，而可选的datetime属性则是为机器准备的。该属性需要遵循特定的格式。浏览器只显示time元素的文本内容，而不会显示datetime的值。
datetime属性不会单独产生任何效果，但可以用于在Web应用（如日历应用）之间同步日期和时间。这就是必须使用标准的机器可读格式的原因，这样程序之间就可以使用相同的“语言”来共享信息。
提示：不能在time元素中嵌套另一个time元素，也不能在没有datetime属性的time元素中包含其他元素（只能包含文本）。
在早期的HTML5说明中，time元素可以包含一个名为pubdate的可选属性。不过，后来pubdate已不再是HTML5的一部分。读者可能在早期的HTML5示例中遇到过该属性。
【拓展】
datetime属性（或者没有datetime属性的time元素）必须提供特定的机器可读格式的日期和时间。这可以简化为下面的形式。
YYYY-MM-DDThh:mm:ss
例如（当地时间）：
2018-11-03T17:19:10
表示“当地时间2018年11月3日下午5时19分10秒”。小时部分使用24小时制，因此表示下午5点应使用17，而非05。如果包含时间，秒是可选的。也可以使用hh:mm.sss格式提供时间的毫秒数。注意，毫秒数之前的符号是一个点。
如果要表示时间段，则格式稍有不同。有几种语法，不过最简单的形式如下。
nh nm ns
其中，3个n分别表示小时数、分钟数和秒数。
也可以将日期和时间表示为世界时。在末尾加上字母Z，就成了UTC（Coordinated Universal Time，全球标准时间）。UTC是主要的全球时间标准。例如（使用UTC的世界时）：
2018-11-03T17:19:10Z
也可以通过相对UTC时差的方式表示时间。这时不写字母Z，写上-（减）或+（加）及时差即可。例如，含相对UTC时差的世界时。
2018-11-03T17:19:10-03:30
表示“纽芬兰标准时（NST）2018年11月3日下午5时19分10秒”（NST比UTC晚3个半小时）。
提示：如果确实要包含datetime，不必提供时间的完整信息。
4.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。
4.3.6 标记显示方向
如果在HTML页面中混合了从左到右书写的字符（如大多数语言所用的拉丁字符）和从右到左书写的字符（如阿拉伯语或希伯来语字符），就可能要用到bdi和bdo元素。
要使用bdo元素，必须包含dir属性，取值包括ltr（由左至右）或rtl（由右至左），指定希望呈现的显示方向。
bdo元素适用于段落里的短语或句子，不能用它包含多个段落。bdi元素是HTML5中新加的元素，用于内容的方向未知的情况，不必包含dir属性，因为默认已设为自动判断。
【示例】下面的示例设置用户名根据语言不同自动调整显示顺序。
目前，只有Firefox和Chrome浏览器支持bdi元素。
4.3.7 标记换行断点
HTML5为br元素引入了一个相近的元素：wbr。它代表“一个可换行处”。可以在一个较长的无间断短语（如URL）中使用该元素，表示此处可以在必要的时候进行换行，从而让文本在有限的空间内更具可读性。因此，与br元素不同，wbr元素不会强制换行，而是让浏览器知道哪里可以根据需要进行换行。
【示例】下面的示例为URL字符串添加wbr元素，这样当窗口宽度变化时，浏览器会自动根据断点确定换行位置，效果如图4.9所示。
<p>本站旧地址为：https:<wbr>//<wbr>www.old_site.com/，新地址为：https:<wbr>//<wbr>www.new_site.com/。</p>
图4.9 定义换行断点
4.3.8 标记旁注
旁注标记是东亚语言（如中文和日文）中一种惯用符号，通常用于表示生僻字的发音。这些小的注解字符出现在它们标注的字符的上方或右方。它们常简称为旁注（ruby或rubi）。日语中的旁注字符称为振假名。
ruby元素以及它的子元素rt和rp是HTML5中为内容添加旁注标记的机制。rt元素指明对基准字符进行注解的旁注字符。可选的rp元素用于在不支持ruby元素的浏览器中的旁注文本周围显示括号。
【示例】下面的示例演示了如何使用ruby和rt元素为词语旁注，效果如图4.10所示。
<ruby>
北 <rp>(</rp><rt>ㄅㄟˇ</rt><rp>)</rp>
京 <rp>(</rp><rt>ㄐㄧㄥ</rt><rp>)</rp>
</ruby>
可以看到在不支持ruby元素的浏览器中括号的重要性。没有它们，基准字符和旁注文本就会显示在一起，让内容变得混乱。
图4.10 旁注标记
支持旁注标记的浏览器会将旁注文本显示在基准字符的上方（也可能在旁边），不显示括号。不支持旁注标记的浏览器会将旁注文本显示在括号里，就像普通的文本一样。
目前，IE 9+、Firefox、Opera、Chrome和Safari都支持ruby、rt和rp元素。