在前面一系列的文章中我們已經(jīng)學(xué)習(xí)HTML5中的局部成員，這些成員包括元素、屬性、新增的主體結(jié)構(gòu)和非主體結(jié)構(gòu)元素，在本篇中，我們將介紹內(nèi)容區(qū)塊的編排方式及文檔的大綱結(jié)構(gòu)。
1.內(nèi)容區(qū)塊的編排方式
內(nèi)容區(qū)塊的編排方式我們可以分為兩種，這兩種編排方式叫做“隱式編排”和“顯式編排”。
1.顯式編排顯式編排使用主體結(jié)構(gòu)元素創(chuàng)建文檔結(jié)構(gòu)，并配合內(nèi)容區(qū)塊使用標(biāo)題元素，這樣瀏覽器可以明確地顯示文檔大綱，代碼示例如下圖
2.隱式編排
隱式編排僅使用標(biāo)題元素創(chuàng)建文檔，瀏覽器通過對標(biāo)題元素的解析來區(qū)分內(nèi)容區(qū)塊，不同等級的標(biāo)題元素對應(yīng)不同的內(nèi)容區(qū)塊，代碼示例如下圖:
2.標(biāo)題分級
標(biāo)題元素可分為6級，h1的級別*，h6最次。每一個標(biāo)題元素都對應(yīng)一個內(nèi)容區(qū)塊，在隱式編排中，根據(jù)標(biāo)題元素級別從高到次，自動生成下級內(nèi)容區(qū)塊，如果新的標(biāo)題元素級別等于或高于上一個標(biāo)題，則生成新的內(nèi)容區(qū)塊。
還有一點，在嵌套使用的文檔結(jié)構(gòu)中，不同的內(nèi)容區(qū)塊可以使用相同級別的標(biāo)題，示例代碼如下:
3.文檔結(jié)構(gòu)大綱
一個好的文檔結(jié)構(gòu)大綱，可以讓整篇文章的結(jié)構(gòu)顯得非常清晰，這樣不僅可以使用閱讀者對文章的結(jié)構(gòu)一目了然，而且對于屏幕閱讀器來說，能夠更好的解讀文檔結(jié)構(gòu)。
在HTML4中，開發(fā)人員往往會使用大量的div元素來展現(xiàn)文檔的結(jié)構(gòu)大綱，力圖做到清晰明了，而在HTML5中，使用新的結(jié)構(gòu)元素就可以達(dá)到這樣的效果。在編排文檔結(jié)構(gòu)大綱時，可以使用標(biāo)題元素（h1~h6）來展示各個級別的內(nèi)容區(qū)塊標(biāo)題。
在本篇中，我們了解了內(nèi)容區(qū)塊的編排方式及文檔的大綱結(jié)構(gòu)和標(biāo)題的分級。觀看更多網(wǎng)頁設(shè)計精彩文章，請?zhí)砑游覀兊墓俜轿⑿?pyyuanxing。謝謝大家的觀看，祝各位身體健康、生活愉快。
歡迎感興趣的朋友來校咨詢，我們的網(wǎng)址:
也可關(guān)注我校公眾號:pyyuanxing，也可以添加微信號yx-peixun。
地址:番禺區(qū)市橋街橋東路63號銀座中心7樓全層
