《HTML 5與CSS 3 權(quán)威指南（第4版·上冊）》 —3.3.2　大綱的編排規(guī)則

3.3.2　大綱的編排規(guī)則

關(guān)于內(nèi)容區(qū)塊的編排，可以分為顯式編排與隱式編排兩種方式。

1.顯式編排內(nèi)容區(qū)塊

顯式編排是指明確使用section等元素創(chuàng)建文檔結(jié)構(gòu)，在每個內(nèi)容區(qū)塊內(nèi)使用標(biāo)題（h1～h6），如代碼清單3-25所示。

代碼清單3-25　顯式編排內(nèi)容區(qū)塊示例

2.隱式編排內(nèi)容區(qū)塊

所謂隱式編排，是指不明確使用section等元素，而是根據(jù)頁面中所書寫的各級標(biāo)題（h1～h6）自動創(chuàng)建各級內(nèi)容區(qū)塊。因為html 5分析器只要看到書寫了某個級別的標(biāo)題，就會判斷存在相對應(yīng)的內(nèi)容區(qū)塊。代碼清單3-26為一個隱式編排內(nèi)容區(qū)塊的示例。

代碼清單3-26　隱式編排內(nèi)容區(qū)塊示例

將這兩種編排方式進(jìn)行對比，很明顯，顯式編排更加清晰明確、易讀。

3.標(biāo)題分級

不同標(biāo)題之間是有級別的，h1的級別最高，h6的級別最低。隱式編排時按如下規(guī)則自動生成內(nèi)容區(qū)塊。

如果新出現(xiàn)的標(biāo)題比上一個標(biāo)題級別低，生成下級內(nèi)容區(qū)塊。

如果新出現(xiàn)的標(biāo)題比上一個標(biāo)題級別高或級別相等，生成新的內(nèi)容區(qū)塊。

第一條規(guī)則的示例與前面一樣，現(xiàn)在我們來看關(guān)于第二條規(guī)則的示例，如代碼清單3-27所示。

代碼清單3-27　第二條規(guī)則示例

如果把上一個示例改成顯式編排，代碼如代碼清單3-28所示。

代碼清單3-28　第二條規(guī)則的顯式編排示例

因為隱式編排容易讓自動生成的整個文檔結(jié)構(gòu)與所想要的文檔結(jié)構(gòu)不一樣，而且也容易引起文檔結(jié)構(gòu)混亂，所以盡量使用顯式編排。

4.不同的內(nèi)容區(qū)塊可以使用相同級別的標(biāo)題

另外，不同的內(nèi)容區(qū)塊可以使用相同級別的標(biāo)題。例如，父內(nèi)容區(qū)塊與子內(nèi)容區(qū)塊可以使用相同級別的標(biāo)題h1。這樣做的好處是，每個級別的標(biāo)題都可以單獨設(shè)計，如果既需要“整個網(wǎng)頁的標(biāo)題”，又需要“文章的標(biāo)題”（譬如書寫文檔時），這樣做將會帶來很大的便利性，如同代碼清單3-29所示。

代碼清單3-29　不同的內(nèi)容區(qū)塊可以使用相同級別的標(biāo)題

5.網(wǎng)頁編排示例

基于以上講解過的知識點，我們來看應(yīng)該怎樣編排網(wǎng)頁的內(nèi)容。代碼清單3-30為一個標(biāo)準(zhǔn)博客網(wǎng)頁的示例，這個示例具備一個標(biāo)準(zhǔn)博客網(wǎng)頁的基本要素，只缺少為了使用樣式而補充添加的div元素。

代碼清單3-30　網(wǎng)頁編排示例

這個示例使用了嵌套artilce元素的方式，將關(guān)于評論的article元素嵌套在主article元素中，在html 5中，推薦使用這種嵌套article元素的方式。

css HTML5 html

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。