其實說到語義化，多年前端開發經驗的老手估計也不會太在意，有時候工期太緊，有時候自己疏忽，也就不那么在意了，直接DIV+CSS一把梭下去了。
?
目錄
什么是HTML
什么是HTML語義化
HTML語義化所帶來的好處
我把CSS樣式引入到HTML文檔底部會怎么樣？
什么是HTML
什么是HTML，其實慢慢的，相信很多人天天用HTML，但你讓他背概念，還真不一定能背下來。我曾經就被問到過這個問題，瞬間讓人摸不著頭腦，面試題千千萬，總有意想不到的問題啊。他是一種超文本標記語言，是構建網站的基石。
什么是HTML語義化
如果一段好的前端代碼，下一個接手代碼的人，可以通過HTML標簽大概看出來，前任開發者大概是什么意圖，做出來的頁面是要展現一個大概什么樣子的東西。
雖然各個瀏覽器的內核可能不同，但大家支持HTML語義化上，標準還是非常相同的。雖然標準相同，但樣式可能每個瀏覽器的展示效果就大不相同了，alert這個組件大家肯定印象最深。但也不一定，現在alert的使用場景越來越少了，某個前端沒見過alert的樣子我都相信。
通過HTML語義化，即便在不寫CSS樣式的時候，或者CSS樣式加載稍慢的時候，網頁其實也會有一個良好的展示，不至于非常錯亂。而每個HTML標簽，其實也都具有自己獨特的含義，有表示布局盒子的，有表示段落的，有表示按鈕的。當然，也有一些帶有樣式的，例如b標簽，a標簽這樣的，他們其實會帶有一些初始化樣式。
HTML語義化所帶來的好處
就像很多網站的按鈕這種場景，其實應該是使用button標簽來實現的，甚么input標簽，添加了type特有的值后，也會展示成按鈕的樣式。但很多人就是div+css一把鎖下來了，也沒有什么問題，展示的樣式也很好看，功能也實現了，但總感覺差那么點意思，差哪里了呢？
第一個就是SEO相關的優化，網絡爬蟲相對來說，更喜歡爬取瀏覽器所支持的那些默認標簽，HTML語義化標簽寫的越好，爬蟲也越好解析；
第二個就是后續開發者，更好維護代碼了，更清晰的HTML語義化結構，是易讀的；
第三個就是CSS樣式異常的情況，比如CSS樣式加載緩慢，CSS樣式丟失的情況，如果沒有一個很好的HTML語義化結構，那網頁基本就沒法看了，錯亂嚴重。
我把CSS樣式引入到HTML文檔底部會怎么樣？
盡管總說語義化語義化的，但沒有CSS還真不行，而且最好是將CSS樣式放在文檔頭部而非底部。
<!DOCTYPE>
<html><head>// 放這里<style>html, body {}</style></head><body>// 而不是放這里<style>html, body {}</style></body>
</html>因為HTML語義化始終是單薄的，一個華麗的網頁不可能靠HTML語義化支撐起來，必須得有CSS去裝飾，去做相同功能的樣式控制。但如果把樣式放到底部的話，試想一下，HTML文檔是從上至下渲染的，HTML標簽的DOM樹已經加載過了，到了文檔底部再加載CSS，解析后與DOM樹相結合，可想而知，網頁將會再重新渲染一次，也就是重繪。重繪倒是次要的，誰也不知道一個復雜的網頁會抖動到什么程度。
】)
