標籤：style blog io color ar 使用 sp strong div
前面我們介紹了在 HTML5 中新增的結構標籤，以及這些標籤的定義和使用方法。接下來，讓我們看一下在 HTML5 中進行總體頁面配置的時候，具體應該怎樣來綜合運用這些結構標籤。
大綱
通過使用新的結構標籤，HTML5 的文檔結構比大量使用 div 標籤的 HTML4 的文檔結構要清晰、明確了很多。如果再規劃好文檔結構的大綱，就可以建立出對閱讀者或螢幕閱讀程式來說，都很清晰易讀的文檔結構。
所謂大綱，簡單來說就是文檔中各內容區塊的結構編排。內容區塊可以使用標題標籤(h1~h6)來展示各級內容區塊的標題。綜合運用各級內容區塊的標題建立好文檔的目錄後，該目錄就是一個大綱了。
關於內容區塊的編排，可以分為“顯示編排”與“隱式編排”兩種方式。
1、顯示編排內容區塊
顯示編排是指明確使用 section 等標籤建立文檔結構，在每個內容區塊內使用標題（h1~16、hgroup等），如下代碼所示：
<body> <h1>網頁級內容區塊標題</h1> <p>網頁級內容區塊的本文</p> <section> <h2>section 級內容區塊的標題</h2> <p>section 級內容區塊的本文</p> </section></body>
2、隱式編排內容區塊
所謂隱式編排，是指不明確使用 section 等標籤，而是根據頁面中所書寫的各級標題（h1~h6、hgroup）等把內容區塊自動建立出來。因為 HTML5 分析器只要看到書寫了某個層級的標題，就會判斷存在相對於的內容區塊。以下代碼為一個隱式編排內容區塊的樣本：
<body> <h1>網頁級內容區塊標題</h1> <p>網頁級內容區塊的本文</p> <!--分析器根據 h2 等標籤判斷產生內容區塊--> <h2>section 級內容區塊的標題</h2> <p>section 級內容區塊的本文</p></body>
將這兩種編排方式進行對比、很明顯，顯示編排更加清晰、異度。
3、標題分級
不同的標題有不同的層級，h1 的層級最高，h6 的層級最低。隱式編排時如下規則自動產生內容區塊：
如果新出現的標題比上一個標題層級低，產生下級內容區塊。
如果新出現的標題比上一個標題層級高或層級相等，產生新的內容區塊。
第一條規則的樣本與前面一樣，現在我們來看關於第二條規則的樣本：
<body> <section> <h2>section 層級的內容區塊的標題</h2> <p>section 層級的內容區塊的本文</p> <!--因為下面的標題層級比上一個標題層級高，所以自動建立新的內容區塊--> <h1>新的 section 層級的內容區塊的標題</h1> <p>新的 section 層級的內容區塊的本文</p> </section></body>
如果把上一個樣本改成顯示編排，如下代碼所示：
<body> <section> <h2>section 層級的內容區塊的標題</h2> <p>section 層級的內容區塊的本文</p> </section> <section> <h1>新的 section 層級的內容區塊的標題</h1> <p>新的 section 層級的內容區塊的本文</p> </section></body>
因為隱式編排容易讓自動產生的整個文檔結構與想要的文檔結構不一樣，而且也容易引起文檔結構的混亂，所以請盡量使用顯示編排。
4、不同的內容區塊可以使用相同層級的標題
另外，不同的內容區塊可以使用相同層級的標題。例如，父內容區塊與子內容區塊可以使用相同層級的h1。這樣做的好處是：每個層級的標題都可以單獨設計，如果既需要“整個網頁的標題”，又需要“文章的標題”，這樣做將會帶來很大的便利性，如下代碼所示：
<body> <h1>網頁的標題</h1> <article> <header> <hgroup> <h1>文章標題</h1> <h2>文章子標題</h2> </hgroup> </header> <p>文章本文</p> </article></body>
綜合樣本
基於前面提到的知識點，讓我們通過一個樣本來看應該怎樣排版網頁的內容，以下代碼為一個標準部落格網頁的樣本，在這個樣本中，具備了一個標準部落格網頁所具備的基本要素。
<!DOCTYPE html><html><head> <title>網頁編排樣本</title> <meta charset="utf-8" /></head><body> <!-- 頭部 --> <header> <!-- 網頁標題 --> <h1>網頁標題</h1> <!-- 導航連結 --> <nav> <ul> <li><a href="index.html">首頁</a></li> <li><a href="help.html">協助</a></li> </ul> </nav> </header> <!-- 文章 --> <article> <!-- 文章標題 --> <hgroup> <h1>文章主標題</h1> <h2>文章子標題</h2> </hgroup> <!-- 文章本文 --> <p>文章本文。。。</p> <!-- 文章評論 --> <section class="comments"> <article> <h5>評論標題</h5> <p>評論本文</p> </article> </section> </article> <!-- 著作權 --> <footer> <p>著作權：XXX</p> </footer></body></html>
在這個樣本中，使用了嵌套 article 標籤的方式，將關於評論的 article 標籤嵌套在了主 article 標籤中，在 HTML5 中，推薦使用這種方式。
HTML5 結構之美(3) - 結構標籤綜合運用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
