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元素高亮顯示韻腳

mark元素的標示目的與原文作者無關，或者說它不是被原文作者用來標示文字的，而是后來被引用時添加上去的，它的目的是吸引當前用戶的注意力，供用戶參考，希望能夠對用戶有幫助。而strong元素是原文作者用來強調一段文字的重要性的，如錯誤信息等，em元素是作者為了突出文章重點文字而使用的。

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元素

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元素所屬的一個或多個表單。

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應用（如日歷應用）之間同步日期和時間。這就是必須使用標準的機器可讀格式的原因，這樣程序之間就可以使用相同的“語言”來共享信息。

在早期的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個半小時）。

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元素指明對基準字符進行注解的旁注字符?？蛇x的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元素。