文章目錄
- 1. div時代
- 2. div的缺點
- 3. 語義化標簽
- 4. 語義化標簽有哪些
- 5. 實戰演練
- 6. 小結
1. div時代
我是2009年開始學習網頁開發的，那時候HTML里面到處是div。
這么說吧，那時候div就是網頁的骨架，支撐著網頁的主結構。
2. div的缺點
div作為邏輯分組標簽，用來分組肯定沒問題。
但是邏輯這塊，它的能力有點不足。
例如我網頁上有個標題欄、導航欄，還有一個內容區域。如果用div的話，得這么寫。
<!-- 標題欄 --><div><h1>釣魚愛好者網</h1></div><!-- 導航欄 --><div><a>釣魚技巧</a><a>釣竿購買</a><a>魚餌購買</a></div><!-- 內容區域 --><div>釣魚使人快樂！</div>
div本身并不能表達當前分組是干啥的，需要借助注釋。
但是需要注意的是，注釋只能給程序員自己看，對于瀏覽器、搜索引擎而言，他們還是不知道你這個分組是干啥的。
3. 語義化標簽
所以我們還是需要更能表達真實含義的標簽。
例如我們如果通過一個標簽，說明當前內容是導航欄，那么手機瀏覽器就可以在空間不足時將導航欄折疊。視障人士專用瀏覽器就可以讀出導航欄的內容。這是不是會更好？
總結來說，不用語義化標簽，網頁也能正常顯示，但是用了語義化標簽，網頁會更完美。
4. 語義化標簽有哪些
看圖：
解釋下：
- header表示網頁的頭部，一般用來放標題欄
- nav表示導航區域
- main表示主要內容區域
- aside表示側邊欄
- article一般用來表示一篇文章
- section表示內容區域的一個部分
- footer表示網頁的底部，一般用來放版本信息
這里需要注意的是，這些語義化標簽并沒有規定死就得怎么用。例如header你既可以放網頁的標題欄，也可以讓它作為網頁一個新聞模塊的標題。
我個人建議是，把這些語義化標簽用到網頁的主框架上，也就是說大結構上。例如內容區域就用main表示，main里面再分幾個大區域的話用section，如果section里面再細分就可以用div了。
5. 實戰演練
那么我們看一個比較標準的、采用了語義化標簽的網頁：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>釣魚網</title>
</head><body><header><h1>釣魚網</h1></header><nav><ul><li><a href="#">首頁</a></li><li><a href="#">釣具</a></li><li><a href="#">技巧</a></li><li><a href="#">名人</a></li><li><a href="#">視頻</a></li></ul></nav><main><p>釣魚是捕捉魚類的一種方法。</p><p>釣魚的主要工具有釣桿、魚餌。</p><p>釣桿一般由竹子或塑料輕而有力的桿狀物質制成，釣桿和魚餌用絲線聯接。</p><p>一般的魚餌可以是蚯蚓、米飯、菜葉、蒼蠅、蛆等，現代有專門制作好的魚餌出售。</p><p>魚餌可以直接掛在絲線上，但有個魚鉤會更好，對不同的魚有特殊的專制魚鉤。</p></main><footer>版權所有 侵權必究</footer>
</body></html>
6. 小結
用了語義化標簽，就是比全是div的網頁帥氣！
)
![[C++][數據結構]哈希3：unordered_map和unordered_set的模擬實現](http://pic.xiahunao.cn/[C++][數據結構]哈希3：unordered_map和unordered_set的模擬實現)
