HTML（HyperText Markup Language）是建Web的最基礎(chǔ)部分之一，也可以說(shuō)是構(gòu)建Web世界的一磚一瓦。這也是眾所周知的。但在當(dāng)代Web開(kāi)發(fā)當(dāng)中，已經(jīng)很少有開(kāi)發(fā)者關(guān)注HTML相關(guān)的話題了，特別是當(dāng)JavaScript框架、組件庫(kù)、UI庫(kù)橫著走的年代，這方面更是如此。
換句話說(shuō)，能寫出具有語(yǔ)義化，具有可訪問(wèn)性的文檔結(jié)構(gòu)的前端開(kāi)發(fā)者越來(lái)越少了。
寫出一個(gè)文檔結(jié)構(gòu)不清晰，對(duì)于可訪問(wèn)性來(lái)說(shuō)是致命的，特別是對(duì)于那些依賴于屏幕讀屏器的用戶群體來(lái)說(shuō)更是慘不忍睹。
在回答題主具體問(wèn)題前聊到可訪問(wèn)性，只是想說(shuō)HTML其實(shí)對(duì)于Web的構(gòu)建也是非常的重要，不能小視。
接下來(lái)，回到具體問(wèn)題上來(lái)了吧。
在HTML中有很多標(biāo)簽是很有意思的，不管是老的標(biāo)簽還是新的標(biāo)簽。先來(lái)說(shuō)老的標(biāo)簽和大家熟悉的標(biāo)簽:
<b>、<i>、<em>、<strong>等
這幾個(gè)標(biāo)簽是不是很熟悉，從最終的呈現(xiàn)效果來(lái)看，<b>和<strong>會(huì)讓文本變粗；<i>和<em>會(huì)讓文本斜體。但他們?cè)贖TML中語(yǔ)義起著不同的作用。
- <i> 標(biāo)簽呈現(xiàn)斜體的文本。
- <em>把文本定義為斜體強(qiáng)調(diào)的內(nèi)容。
- <b> 標(biāo)簽定義粗體的文本。
- <strong>把文本定義為粗體語(yǔ)氣更強(qiáng)的強(qiáng)調(diào)的內(nèi)容。
有關(guān)于這方更詳盡的還是要閱讀相關(guān)規(guī)范。
新出的標(biāo)簽，也就是HTML5中的標(biāo)簽，有很多更利于Web布局和SEO的語(yǔ)義化標(biāo)簽，比如=<header>、<main>、<footer>、<aside>、<section>和<article>:
<noscript>
其實(shí)這幾個(gè)標(biāo)簽和WAI-ARIA中的land mark也有著對(duì)應(yīng)關(guān)系，對(duì)于屏幕閱讀器來(lái)說(shuō)是非常友好的：
除了這些熟悉的標(biāo)簽，還有一些冷門的標(biāo)簽:
<time>-
<del>和<ins> <mark><progress><meter>-
<details>和<summary> <output><datalist>-
<figure>和<figcaption> - <dialog>
<picture>
來(lái)看上面列的幾個(gè)標(biāo)簽?zāi)軒臀覀儗?shí)現(xiàn)的一些效果。
比如使用<del>和<ins>可以做一些修改性的UI效果：
<progress> 可以實(shí)現(xiàn)進(jìn)度條
可以實(shí)現(xiàn)下圖這樣的效果：
而且<meter>和<progress>非常的相似，只不過(guò)<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屬性也是非常有意思的，特別是表單中的使用：
如果想了解更多這方面的，建議去閱讀HTML5的規(guī)范。
