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

時間 2019-11-07

原文原文鏈接

原文地址：The most uncommon HTML5 tags you can use right now

原文做者：Pedro M. S. Duarte

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者：lsvih

校對者：sophiayang1997

<!DOCTYPE html> HMLT5 於 2014 年 10 月由萬維網聯盟（W3C）發佈，旨在經過改進 HTML 語言來支持最新的多媒體設備，在保證計算機與設備（如 Web 瀏覽器，解析器等）可解析的前提下加強對人類的可讀性。html

HTML 教程：www.geekchamp.com前端

我能夠肯定大家都已經在使用 HTML5 作網頁了，而且會使用一些常見的標籤，如 <header>、<section>、<article> 和 <footer> 等等，除此以外，還有一些不經常使用的標籤是有助於正確使用 HTML5 的語義化開發。html5

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

`<details>`

<details> 標籤指定了用戶能夠按需查看或隱藏的內容，能夠用它來建立能被用戶關閉與打開的小工具。在語義上，你能夠在其中使用任何類型的內容，不過若是沒有對它設置 open 屬性，內容將不可見。ios

<details open><p>在預約時須要信用卡</p></details>git

`<dialog>`

<dialog> 定義了一個對話框元素或窗口。github

<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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注掘金翻譯計劃、官方微博、知乎專欄。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

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

<details>

<dialog>

<mark>

<summary>

<time> 與 <datetime>

<small>

<datalist>

<progress>