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：定義工具欄菜單?；顒邮矫睿试S用戶立即與命令進行交互。

【示例3】下面示例使用type屬性定義了兩組工具條按鈕，演示效果如圖2.15所示。

圖2.14　定義單選按鈕命令組

圖2.15　定義工具條命令組