天這篇是我們正式開篇的第一篇文章，我想和你聊聊 HTML。

我猜屏幕那一邊的你估計會說：“HTML 我很熟悉了，每天寫，這不是初級程序員才學的內容

么，這我還能不會嗎？”

其實在我看來，HTML 并不簡單，它是典型的“入門容易，精通困難”的一部分知識。深刻理

解 HTML 是成為優秀的前端工程師重要的一步。

我們在上一篇文章中講到了，HTML 的標簽可以分為很多種，比如 head 里面的元信息類標

簽，又比如 img、video、audio 之類的替換型媒體標簽。我今天要講的標簽是：語義類標簽。

語義類標簽是什么，使用它有什么好處？

語義類標簽也是大家工作中經常會用到的一類標簽，它們的特點是視覺表現上互相都差不多，

主要的區別在于它們表示了不同的語義，比如大家會經常見到的 section、nav、p，這些都是

語義類的標簽。

語義是我們說話表達的意思，多數的語義實際上都是由文字來承載的。語義類標簽則是純文字

的補充，比如標題、自然段、章節、列表，這些內容都是純文字無法表達的，我們需要依靠語

義標簽代為表達。

在講語義之前，我們來說說為什么要用語義。

現在我們很多的前端工程師寫起代碼來，多數都不用復雜的語義標簽， 只靠 div 和 span 就能

走天下了。

這樣做行不行呢？毫無疑問答案是行。那這樣做好不好呢？按照正確的套路，我應該說不好，

但是在很多情況下，答案其實是好。

這是因為在現代互聯網產品里，HTML 用于描述“軟件界面”多過于“富文本”，而軟件界面

里的東西，實際上幾乎是沒有語義的。比如說，我們做了一個購物車功能，我們一定要給每個

購物車里的商品套上 ul 嗎？比如說，加入購物車這個按鈕，我們一定要用 Button 嗎？

實際上我覺得沒必要，因為這個場景里面，跟文本中的列表，以及表單中的 Button，其實已

經相差很遠了，所以，我支持在任何“軟件界面”的場景中，直接使用 div 和 span。

不過，在很多工作場景里，語義類標簽也有它們自己無可替代的優點。正確地使用語義標簽可

以帶來很多好處。語義類標簽對開發者更為友好，使用語義類標簽增強了可讀性，即便是在沒

有 CSS 的時候，開發者也能夠清晰地看出網頁的結構，也更為便于團隊的開發和維護。除了

對人類友好之外，語義類標簽也十分適宜機器閱讀。它的文字表現力豐富，更適合搜索

引擎檢索（SEO），也可以讓搜索引擎爬蟲更好地獲取到更多有效信息，有效提升網頁的搜

索量，并且語義類還可以支持讀屏軟件，根據文章可以自動生成目錄等等。不過，不恰當地使

用語義標簽，反而會造成負面作用。這里我們舉一個常見的誤區作為例子。我們都知道 ul 是

無序列表，ol 是有序列表，所以很多接觸過語義這個概念，半懂不懂的前端工程師，特別喜歡

給所有并列關系的元素都套上 ul。實際上， ul 是長成下面的這種樣子的 (以下來自 HTML 標準)。

I have lived in the following countries:

• Switzerland
• Norway
• United Kingdom
• United States

ul 多數出現正在行文中間，它的上文多數在提示：要列舉某些項。但是，如果所有并列關系都

用 ul，會造成大量冗余標簽。錯誤地使用語義標簽，會給機器閱讀造成混淆、增加嵌套，給

CSS 編寫加重負擔。所以，對于語義標簽，我的態度是：“用對”比“不用”好，“不

用”比“用錯”好。當然了，我覺得有理想的前端工程師還是應該去追求“用對”它們。

與 JavaScript 這樣嚴格的編程語言相比，HTML 中語義標簽的使用更接近我們平常說話用的

自然語言。我們說話并沒有唯一的標準措辭，語義標簽的使用也是一樣。下面，我挑選了幾種

（我認為）比較重要的語義標簽使用場景，來為你介紹一下。

作為自然語言延伸的語義類標簽其實語義問題不僅僅屬于理科，它還是個文科問題。所以我們

這里講語義標簽的使用的第一個場景，也是最自然的使用場景，就是：作為自然語言和

純文本的補充，用來表達一定的結構或者消除歧義。

我們先來看看“表達一定的結構”這個場景。在日語中，有一個語法現象叫做：ルビ，它的讀

音是 ruby（著名的 ruby 語言就是據此命名的），它中文的意思大約類似于注音或者意思的注

解，它的形式可以看下圖：圖中的例子選自動畫片《某科學的超電磁炮》第二季第一話。圖中

把 teleport 放在空間移動上方的用法，就是日文中 ruby 的用法。“空間移動”是動畫中白井

黑子的技能，這里動畫字幕上寫的是“空間移動”，動畫里的臺詞則用了英文發

音“Teleport”，這里就形成了一個使用

ruby 的場景。ruby 的這個形式，在中國的網友中間最近被玩出了新花樣，比如表情包。

有時候微信聊天，不能用 ruby 這樣的東西真的是好急啊，只好用括號代替，效果真是差了不

少。在 HTML5 中，就引入了這個表示 ruby 的標簽，它由 ruby、rt、rp 三個標簽來實現。

所以說，這些情況里存在的語義，其實原本就存在了，只是我們用純文字是沒法表達的，

HTML作為一種“超文本”語言，支持這些文字表達就是必要的了。還有一種情況是，HTML

的有些標簽實際上就是必要的，甚至必要的程度可以達到：如果沒有這個標簽，文字會產生歧

義的程度。

這里我們可以介紹一下 em 標簽。

我們看看這句話，

1. 今天我吃了一個蘋果.

再比如：

昨天我吃了一個香蕉。

今天我吃了一個蘋果。

看上去它很清楚，但是實際上，這句話放到不同上下文中，可能表達完全不

同的意思。

昨天我吃了兩個蘋果。

今天我吃了一個蘋果。

試著讀一讀，這兩段里面的“今天我吃了一個蘋果”，你是不是發現讀音不自覺地發生了變化？

實際上，不僅僅是讀音，這里的意思也發生了變化。前一段中，表示我今天吃的是蘋果，而不是別的什么東西，后一段中，則表示我今天只吃了一個蘋果，沒有多吃。

當沒有上下文時，如何消除歧義呢？這就要用到我們的 em 標簽了。em 表示重音：

通過 em 標簽，我們可以消除這樣的歧義。

一些文章常常會拿 em 和 strong 做對比，實際上，我們只要理解了 em 的真正意思，它和

strong 可謂天差地別，并沒有任何混淆的可能。

作為標題摘要的語義類標簽

介紹完自然語言的語義場景后，我想介紹的另一個語義重要使用場景，就是文章的結構。中國古

代小說就形成了“章 - 回”的概念，西方的戲劇也有幕的區分，所以人類的自然語言作品也是如出一轍。

HTML 也應該支持這樣的需求。HTML 語義標簽中，有不少是用于支持這樣的結構的標簽。

語義化的 HTML 能夠支持自動生成目錄結構，HTML 標準中還專門規定了生成目錄結構的算

法，即使我們并不打算深入實踐語義，也應該盡量在大的層面上保證這些元素的語義化使用。

首先我們需要形成一個概念，一篇文檔會有一個樹形的目錄結構，它由各個級別的標題組成。這

個樹形結構可能不會跟 HTML 元素的嵌套關系一致。

這段 HTML 幾乎是平鋪的元素，但是它的標題結構是：

HTML 語義

弱語義

今天我吃了一個 <em> 蘋果 </em>。

今天我吃了 <em> 一個 </em> 蘋果。

例如：

端開發人員可能都遇到這種情況，有時候我們想把div的高度像設置寬度一樣設置成占網頁的百分之多少，卻發現高度百分比并不起效。

比如我們想讓一個div的寬度為50%，高度為50%，很自然的寫出：

可結果發現寬度為50%，高度卻不起作用。

查閱很多資料后，終于找到了解決辦法。問題就在于瀏覽器計算高度和寬度的方式不同：

Web瀏覽器在計算有效寬度時會考慮瀏覽器窗口的打開寬度。如果你不給寬度設定任何缺省值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。

但是高度的計算方式完全不一樣。事實上，瀏覽器根本就不計算內容的高度，除非內容超出了視窗范圍(導致滾動條出現)。或者你給整個頁面設置一個絕對高度。否則，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。

因為頁面并沒有缺省的高度值，所以，當你讓一個元素的高度設定為百分比高度時，無法根據獲取父元素的高度，也就無法計算自己的高度。換句話說，父元素的高度只是一個缺省值：height: auto;。當你要求瀏覽器根據這樣一個缺省值來計算百分比高度時，只能得到undefined的結果。也就是一個null值，瀏覽器不會對這個值有任何的反應。

上面的演示例子是父元素沒有設定固定高度，于是子元素的高度height: 50% 也不會起作用。解決辦法就是給html和body加上height: 100%。

運行結果如下，得到我們想要的結果。

總結：高度百分比只有在父元素高度固定的情況下生效，利用寬高百分比，實現響應式布局。另外如果你的元素實際高度大于你設定的百分比高度，那元素的高度會自動擴展。

我是竹風，歡迎訂閱關注我，玩轉前端，帶你體驗不一樣的前端世界。