html5--6-68 實(shí)戰(zhàn)前的準(zhǔn)備工作:了解HTML5大綱算法

學(xué)習(xí)要點(diǎn)

了解HTML5大綱算法

---

在html5中有一個(gè)很重要的概念，叫做HTML5大綱算法(HTML5 Outliner),它的用途為用戶提供一份頁(yè)面的信息結(jié)構(gòu)目錄。合理的使用HTML5元素標(biāo)簽，可以生成一個(gè)非常清晰的文檔大綱

HTML5大綱算法

我們可以通過各種工具去查看當(dāng)前頁(yè)面，這里推薦使用一個(gè)測(cè)試工具：HTML5 Outliner，網(wǎng)址如下：https://gsnedders.html5.org/outliner/

了解一下section和div的區(qū)別

div元素在html5之前是最常用的最流行的標(biāo)簽，但他本身是沒有任何語(yǔ)義的，它只不過是用來(lái)布局頁(yè)面和CSS樣式以及JS調(diào)用。
在html5中section標(biāo)簽并不是用來(lái)取代div的。他是具有語(yǔ)義的文檔標(biāo)簽，在大綱規(guī)范中規(guī)定section至少要包含一個(gè)標(biāo)題。也就是section標(biāo)簽內(nèi)至少包含一個(gè)h1~h6.
如果是頁(yè)面布局，且不是header、footer之類的專屬區(qū)域，都應(yīng)該使用div;

body、nav、section都是需要有標(biāo)題的才規(guī)范.header和div則是不需要標(biāo)題的。
section和nav元素大綱要求有標(biāo)題h1~h6，但是section必須有才規(guī)范，而nav如果沒有標(biāo)題，也是合理的。給他添加了標(biāo)題會(huì)讓大綱更好看，所以我們可以添加完了在隱藏，就不會(huì)破壞布局了。

總結(jié)

以上是生活随笔為你收集整理的html5--6-68 实战前的准备工作:了解HTML5大纲算法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。