[譯] 可用但最不常見的 HTML5 標籤

lsvih發表於2018-05-19
HTML

<!DOCTYPE html> HMLT5 於 2014 年 10 月由全球資訊網聯盟（W3C）釋出，旨在通過改進 HTML 語言來支援最新的多媒體裝置，在保證計算機與裝置（如 Web 瀏覽器，解析器等）可解析的前提下增強對人類的可讀性。

[譯] 可用但最不常見的 HTML5 標籤

HTML 教程：www.geekchamp.com

我可以確定你們都已經在使用 HTML5 做網頁了，並且會使用一些常見的標籤，如 <header>、<section>、<article> 和 <footer> 等等，除此之外，還有一些不常用的標籤是有助於正確使用 HTML5 的語義化開發。

在此我將其中一些最重要的標籤列出來，希望能幫助你遵循 HTML5 語義進行開發。

<details>

<details> 標籤指定了使用者可以按需檢視或隱藏的內容，可以用它來建立能被使用者關閉與開啟的小工具。在語義上，你可以在其中使用任何型別的內容，不過如果沒有對它設定 open 屬性，內容將不可見。

<details open><p>在預定時需要信用卡</p></details>

<dialog>

<dialog> 定義了一個對話方塊元素或視窗。

<dialog open><p>歡迎來到我們的酒店</p></dialog>

<mark>

<mark> 標籤定義了被標記的文字，可以用於將你文字中的一部分高亮。

<p>在<mark>預定</mark>時需要信用卡</p>

<summary>

<summary> 標籤為 <details> 定義了一個可見的標題。點選這個標題可以顯示或隱藏 <details> 內容。

<details><summary>支付條件</summary><p>在預定時需要信用卡</p></details>

<time> 與 <datetime>

<time> 標籤定義了一個人類可讀的日期或者時間。這個元素還能用以機器可讀的方式對日期或時間進行編碼，以便使用者的工具或軟體將生日提醒、計劃事件之類的時間新增到使用者的日曆中。此外，還能讓搜尋引擎產生更智慧的搜尋結果。

<p>自助早餐於 <time>7.00 AM</time> 在餐廳開始</p>

<p><time datetime="2018-06-20T19:00">6 月 20 日晚上 7 點</time>在大廳舉行音樂會</p>

<small>

<small> 標籤的規範解釋，這個標籤可以用於降低文字或資訊的重要性。瀏覽器將通過縮小字型以減少視覺影響。

<p>取消預定必須提前 48 小時，<small>以免每房每夜的額外扣款</small></p>

<datalist>

你可以用 <datalist> 元素來定義 <input> 標籤中用於有效選擇的列表。這個元件在各個瀏覽器中的樣子略有不同，但相同的是在欄位右邊顯示一個小下拉箭頭，提示此欄位可以進行選擇。點這兒檢視效果。

<datalist><option value="Master Card"><option value="Visa"><option value="American Express"></datalist>

<progress>

<progress> HTML 元素會顯示一個指示器，用於顯示某個任務的完成進度，通常顯示為進度條。

<progress value="70" max="100">70 %</progress>

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章