【重構前端知識體系之HTML】講講對HTML5的一大特性——語義化的理解
【重構前端知識體系之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標籤說明表單的用途。
-
應該使用
<h1> - <h6>來表示標題。 -
當用CSS寫樣式的時候命名也需要遵循HTML的結構，體現出語義化的本質。
語義化的標籤
1、<header> 標籤定義文檔的頁眉
通常包含頁面的正副標題。
<header>
<h1>他真的是美男子嗎?</h1>
<p>據現場勘查，他真的是美男子！</p>
</header>
2、<footer>標籤定義文檔或節的頁腳
頁腳通常包含文檔的作者、版權資訊、使用條款鏈接、聯繫資訊等等。
可以在一個文檔中使用多<footer>元素。
<footer>
<p>Posted by: 美男子</p>
</footer>
3、<main>標籤規定文檔的主要內容。
<main> 元素中的內容對於文檔來說應當是唯一的。
它不應包含在文檔中重複出現的內容，比如側欄、導航欄、版權資訊、站點標誌或搜索表單。
在一個文檔中，不能出現多個
<main>元素。<main>元素不能是以下元素的後代：<article>、<aside>、<footer>、<header>或<nav>。
<main>
<h1>我的介紹</h1>
<p>我是一個聰明的孩子</p>
</main>
4、<section> 標籤定義文檔中的片段。
比如章節、頁眉、頁腳或文檔中的其他部分。
<section>
<h1>PRC</h1>
<p>The People's Republic of China was born in 1949...</p>
</section>
5、<article> 標籤規定獨立的自包含內容
比如文章下的評論之類的
<article>
<h1>我為什麼聰明呢</h1>
<p>我聰明的秘訣是我愛思考</p>
</article>
6、<aside> 標籤定義其所處內容之外的內容。
用來裝載非正文類的內容。例如廣告，成組的鏈接，側邊欄等等。
<p>聰明的研究</p>
<aside>
<h1>我為什麼聰明呢</h1>
<p>我聰明的秘訣是我愛思考</p>
</aside>
7、<nav> 元素代表頁面的導航鏈接區域。
用於定義頁面的主要導航部分。
<nav>
<ul>
<li><a href=」//www.baidu.com」>百度</a></li>
<li><a href=」//www.guizimo.com」>歸子莫</a></li>
</ul>
</nav>
一個語義化模板
先來看一張圖。
看起來，一個標標致致的HTML結構就很清晰了。
總結
有的朋友肯定會問了，那平時都是用框架寫的程式碼，基本不用用這些，又不是去寫個人網站或者官網，都是寫一些業務型的H5或者後台管理。
其實對於個人網站或者官網來說，語義化是有實際價值的。而且，這個也是近些年來面試的常問的一題。最重要的是要去學習語義化的含義。做到程式碼語義化，包括函數的命名，組件的命名，組件業務功能的拆分。一直在路上！
重構前端知識體系，你要一起嗎？
部落格說明與致謝
文章所涉及的部分資料來自互聯網整理，其中包含自己個人的總結和看法，分享的目的在於共建社區和鞏固自己。
引用的資料如有侵權，請聯繫本人刪除！
感謝萬能的網路，W3C，菜鳥教程等！
如果你感覺對你有幫助的話，不妨給我點贊鼓勵一下，好文記得收藏喲！關注我一起成長！
所屬專欄：重構前端知識體系（HTML）
幸好我在，感謝你來！
