【重構前端知識體系之HTML】講講對HTML5的一大特性——語義化的理解

引言

在講什么是語義化之前，先看看語義化的背景。

在之前的文章中提到HTML最重要的特性，那就是標簽。但是項目一大，標簽多的看不懂，一堆疊著一堆。一些命名奇奇怪怪，想維護被勸退，團隊協作導致團戰開始！

因此語義化迫在眉睫！

什么是語義化

在我們寫HTML時其實無所謂，因為你里面長啥樣，用戶看不到，也不用看到。

因為你有CSS的漂亮衣服，即使你的HTML一塌糊涂，CSS也可以讓它光鮮亮麗。

但是用戶看不到，開發者看得到呀！因此，這個語義化的友好者是開發者本身。

所謂語義化，就是憑著HTML本身，也能體驗出人性化的結構！

語義化的好處

在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構。這樣開發者一眼就明了你的意圖，一秒破冰！

對SEO友好。對開發者友好，那么對開發者的小蟲子們也是當然！

當標簽應用得當，體現出上下文中你想要關鍵字的權重，那么搜索引擎爬蟲就到了你的頭上了。那么網站的訪問量不就來了嗎。

可以支持一些特殊的設備（盲人閱讀、移動設備），網頁翻譯等。

最直觀的一點，便是你的隊友都希望和你合作！你的代碼的語義化，隊友都愛啊！

語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。（跳槽快速融入？）

工作中語義化的思考

不要使用一些純樣式標簽，這些CSS會幫我們做到。如：b、font、u等一些標簽。

需要強調的文本，可以包含在strong或者em標簽中（，strong默認樣式是加粗（不要用b），em是斜體（不用i）。使用 mark標簽來表示標注的/突出顯示的文本。

但是還是可以考慮使用CSS來完成。

每個input標簽對應的說明文本都需要使用label標簽，并且通過為input設置id屬性，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。

表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途。

應該使用

-

來表示標題。

當用CSS寫樣式的時候命名也需要遵循HTML的結構，體現出語義化的本質。

語義化的標簽

1、

標簽定義文檔的頁眉

通常包含頁面的正副標題。

他真的是美男子嗎?

據現場勘查，他真的是美男子！

2、