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