3.3　功能性文本

HTML5为标识特定功能的信息，新增加多个文本标签，具体说明如下。

3.3.1　定义标记文本

视频讲解

<mark>标签定义带有记号的文本，表示页面中需要突出显示或高亮显示的信息，对于当前用户具有参考作用的一段文字。通常在引用原文的时候使用mark元素，目的是引起当前用户的注意。mark元素是对原文内容进行补充，它应该用在一段原文作者不认为是重要的，但是现在为了与原文作者不相关的其他目的而需要突出显示或高亮显示的文字上面。所以，该元素通常能够对当前用户具有很好的帮助作用。

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

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

   <article>
       <h2><mark>HTML5</mark>中国:中国最大的<mark>HTML5</mark>中文门户 - Powered by Discuz!官
网</h2>
       <p><mark>HTML5</mark>中国,是中国最大的<mark>HTML5</mark>中文门户。为广大
<mark>html5</mark>开发者提供<mark>html5</mark>教程、<mark>html5</mark>开发工具、<mark>html5</mark>
网站示例、<mark>html5</mark>视频、js教程等多种<mark>html5</mark>在线学习资源。</p>
       <p>www.html5cn.org/  - 百度快照 - 86%好评</p>
   </article>

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

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

    <article>
       <h2>静夜思 </h2>
       <h3>李白</h3>
       <p>床前明月<mark>光</mark>，疑是地上<mark>霜</mark>。</p>
       <p>举头望明月，低头思故<mark>乡</mark>。</p>
    </article>

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

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

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

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

　提示：目前，所有最新版本的浏览器都支持该元素。IE8以及更早的版本不支持mark元素。

3.3.2　定义进度信息

视频讲解

<progress>标签可以标识任务的进度（进程）。这个进度可以是不确定的，表示进度正在进行，但不清楚还有多少进度没有完成，也可以用0到某个最大数字（如100）之间的数字来表示进度完成情况。

progress元素包含两个新增属性，表示当前任务完成情况，简单说明如下：

图3.11　使用progress元素

　max：定义任务一共需要多少工作量。工作量的单位是随意的，不用指定。

　value：定义已经完成多任务。

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

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

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

　注意：progress元素不适合用来表示度量衡，例如，磁盘空间使用情况或查询结果。如需表示度量衡，应使用meter元素。

3.3.3　定义刻度信息

视频讲解

<meter>标签定义已知范围或分数值内的标量、进度。例如，磁盘用量、查询结果的相关性等。

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

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元素所属的一个或多个表单。

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

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

图3.12　使用meter元素

　提示：目前，Safari 5.2+、Chrome 6+、Opera 11+、Firefox 16+版本的浏览器支持meter元素。

3.3.4　定义时间信息

视频讲解

<time>标签定义公历的时间（24小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码。例如，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

【示例1】time元素代表24小时中的某个时刻或某个日期，表示时刻时允许带有时差。它可以定义很多格式的日期和时间，如下所示：

    <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属性里，而元素的开始标记与结束标记中间的部分是显示在网页上的。datetime属性中日期与时间之间要用“T”文字分隔，“T”表示时间。

　注意：倒数第二行，时间加上Z文字表示给机器编码时使用UTC标准时间，倒数第一行则加上了时差，表示向机器编码另一地区时间。如果是编码本地时间，则不需要添加时差。

<time>标签包含两个属性，简单说明如下：

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

　pubdate：定义<time>标签中的日期和时间是文档或<article>标签的发布日期。

pubdate属性是一个可选的布尔值属性，它可以用在article元素中的time元素上，意思是time元素代表了文章（artilce元素的内容）或整个网页的发布日期。注意，在HTML5.1规范中不再支持该属性，建议不要大范围应用。

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

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

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

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

3.3.5　定义联系文本

视频讲解

<address>标签定义文档或文章的作者、拥有者的联系信息，其包含文本通常显示为斜体，大部分浏览器会在address元素前后添加折行。

　如果<address>标签位于<body>标签内，它表示文档联系信息。

　如果<address>标签位于<article>标签内，它表示文章的联系信息。

　提示：<address>标签不应描述通信地址，除非它是联系信息的一部分。一般<address>被包含在<footer>标签中。

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

    <address>
        <a href="http://www.w3.org/">W3C</a>
        <a href="http://www.whatwg.org/">WHATWG</a>
        <a href="http://www.mhtml5.com/">HTML5研究小组</a>
    </address>

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

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

3.3.6　定义换行断点

视频讲解

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

目前，除了IE浏览器外，其他主流浏览器都支持<wbr>标签。

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

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

图3.13　定义换行断点

3.3.7　定义文本注释

视频讲解

<ruby>标签可以定义ruby注释，即中文注音或字符。<ruby>需要与<rt>标签或<rp>标签一同使用，其中<rt>标签和<rp>标签必须位于<ruby>标签内。

　<rt>标签定义字符（中文注音或字符）的解释或发音。

　<rp>标签定义当浏览器不支持ruby元素的显示内容。

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

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

    <style type="text/css">
    ruby { font-size: 40px; }
    </style>
    <ruby>
    少<rt>shào</rt>小<rt>xiǎo</rt>离<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt>
    </ruby>，
    <ruby>
    乡<rt>xiāng</rt>音<rt>yīn</rt>无<rt>wú</rt>改<rt>gǎi</rt>鬓<rt>bìn</rt>毛<rt>máo</rt>衰<rt>cuī</rt>
    </ruby>。

图3.14　给唐诗注音

上一章目录下一章