[[331000]]

來源：知乎   作者：大漠

原文：https://www.zhihu.com/question/396745068

 HTML(HyperText Markup Language)是建Web的最基礎(chǔ)部分之一，也可以說是構(gòu)建Web世界的一磚一瓦。這也是眾所周知的。但在當(dāng)代Web開發(fā)當(dāng)中，已經(jīng)很少有開發(fā)者關(guān)注HTML相關(guān)的話題了，特別是當(dāng)JavaScript框架、組件庫、UI庫橫著走的年代，這方面更是如此。

換句話說，能寫出具有語義化，具有可訪問性的文檔結(jié)構(gòu)的前端開發(fā)者越來越少了。

寫出一個(gè)文檔結(jié)構(gòu)不清晰，對于可訪問性來說是致命的，特別是對于那些依賴于屏幕讀屏器的用戶群體來說更是慘不忍睹。記得我在A11Y系列的《編寫HTML時(shí)要考慮可訪問性》中就和大家討論過這方面的話題。

在回答題主具體問題前聊到可訪問性，只是想說HTML其實(shí)對于Web的構(gòu)建也是非常的重要，不能小視。

接下來，回到具體問題上來了吧。

在HTML中有很多標(biāo)簽是很有意思的，不管是老的標(biāo)簽還是新的標(biāo)簽。先來說老的標(biāo)簽和大家熟悉的標(biāo)簽:

<b>、<i>、<em>、<strong>等

這幾個(gè)標(biāo)簽是不是很熟悉，從最終的呈現(xiàn)效果來看，<b>和<strong>會(huì)讓文本變粗；<i>和<em>會(huì)讓文本斜體。但他們在HTML中語義起著不同的作用。

• <i>標(biāo)簽呈現(xiàn)斜體的文本。
• <em>把文本定義為斜體強(qiáng)調(diào)的內(nèi)容。
• <b>標(biāo)簽定義粗體的文本。
• <strong>把文本定義為粗體語氣更強(qiáng)的強(qiáng)調(diào)的內(nèi)容。

有關(guān)于這方更詳盡的還是要閱讀相關(guān)規(guī)范。

新出的標(biāo)簽，也就是HTML5中的標(biāo)簽，有很多更利于Web布局和SEO的語義化標(biāo)簽，比如<header>、<main>、<footer>、<aside>、<section>和<article>:

其實(shí)這幾個(gè)標(biāo)簽和WAI-ARIA中的land mark也有著對應(yīng)關(guān)系，對于屏幕閱讀器來說是非常友好的：

除了這些熟悉的標(biāo)簽，還有一些冷門的標(biāo)簽:

• <time>
• <del>和<ins>
• <mark>
• <progress>
• <meter>
• <details>和<summary>
• <output>
• <datalist>
• <figure>和<figcaption>
• <dialog>
• <picture>

來看上面列的幾個(gè)標(biāo)簽?zāi)軒臀覀儗?shí)現(xiàn)的一些效果。

比如使用<del>和<ins>可以做一些修改性的UI效果：

<progress>可以實(shí)現(xiàn)進(jìn)度條

<meter>可以實(shí)現(xiàn)下圖這樣的效果：

而且<meter>和<progress>非常的相似，只不過<meter>更強(qiáng)大，在臨近值時(shí)，進(jìn)度條UI會(huì)有相應(yīng)變化：

<details>和<summary>可以實(shí)現(xiàn)手風(fēng)琴這樣的效果：

<output>和input[type="range">可以實(shí)現(xiàn)滑塊效果：

<picture>能加載不同的圖片資源，根據(jù)設(shè)備環(huán)境正確顯示圖像資源：

而且我們熟悉的<img>的srcset和sizes也讓img變理更強(qiáng)大：

<datalist>可以實(shí)現(xiàn)下接選擇框：

figure和figcaption更好的管理img和相關(guān)的圖像描述

<dialog>可以實(shí)現(xiàn)Modal（彈出框） ：

除此之外，還有很多HTML屬性也是非常有意思的，特別是表單中的使用