[[331000]]

來源：知乎   作者：大漠

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

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

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

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

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

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

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

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

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

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

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

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

其實這幾個標簽和WAI-ARIA中的land mark也有著對應關系，對于屏幕閱讀器來說是非常友好的：

除了這些熟悉的標簽，還有一些冷門的標簽:

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

來看上面列的幾個標簽能幫我們實現(xiàn)的一些效果。

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

<progress>可以實現(xiàn)進度條

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

而且<meter>和<progress>非常的相似，只不過<meter>更強大，在臨近值時，進度條UI會有相應變化：

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

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

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

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

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

figure和figcaption更好的管理img和相關的圖像描述

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

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