HTML5 結構之美(2) - 新增的非主體結構標籤

標籤：style   blog   http   io   color   ar   使用   for   sp   

        接上文《HTML5 結構之美(1) - 新增的主體結構標籤》，HTML5 還新增了一些表示邏輯結構或附加資訊的非主體結構標籤。

header標籤

        header 標籤是一種具有引導和導航作用的結構標籤，通常用來放置整個頁面或頁面內的一個內容區塊的標題，但也可以包含其他內容，例如資料表格、搜尋表單或相關的 logo 圖片。

        很明顯，整個頁面的標題應該放在頁面的開頭，我們可以用如下所示的形式書寫頁面的標題：

        <header><h1>頁面標題</h1></header>

        需要強調的一點是：一個網頁內並未限制 header 標籤的個數，可以擁有多個，可以為每個內容區塊加一個 header 標籤，如下所示：

<header>    <h1>網頁標題</h1></header><article>    <header>        <h1>文章標題</h1>    </header>    <p>文章本文</p></article>

        在 HTML5 中，一個 header 標籤通常包括至少一個 heading 標籤(h1-h6)，也可以包含我們後面將要討論的 hgroup 標籤，還可以包含其他標籤（比如table或form），根據最新的 HTML5 標準，還可以包括 nav 標籤。最後，讓我們看一下部落格網頁中 header 標籤的一個應用樣本。

<header>    <hgroup>        <h1>Jason‘s Blog</h1>        <a href="http://www.cnblogs.com/jasonsoop/">http://www.cnblogs.com/jasonsoop/</a>        <a href="#">[訂閱]</a>        <a href="#">[手機訂閱]</a>    </hgroup>    <nav>        <ul>            <li><a href="#">首頁</a></li>            <li><a href="#">博問</a></li>            <li><a href="#">快閃記憶體</a></li>            <li><a href="#">聯絡</a></li>            <li><a href="#">訂閱</a></li>        </ul>    </nav></header>

hgroup標籤

        hgroup 標籤是將標題及其子標題進行分組的標籤。hgroup 標籤通常會將 h1~h6 標籤進行分組，比如一個內容區塊的標題及其子標題算一組。

        通常，如果文章只有一個主標題，是不需要 hgroup 標籤的，如下所示：

<article>    <header>        <h1>文章標題</h1>        <p><time datetime="2014-11-01">2014年11月1日</time></p>    </header>    <p>文章本文</p></article>

        但是，如果文章有主標題，主標題下有子標題，就需要使用 hgroup 標籤了，如下所示：

<article>    <header>        <hgroup>            <h1>文章主標題</h1>            <h2>文章子標題</h2>        </hgroup>        <p><time datetime="2014-03-20">2014年3月20日</time></p>    </header>    <p>文章本文</p></article>

footer標籤

        footer 標籤可以作為其上層父級內容區塊或是一個根區塊的腳註。footer 通常包含與其相關區塊的腳註資訊，如作者、相關閱讀連結及著作權資訊等。

        在 HTML5 出現之前，我們使用下面的方式編寫頁尾：

<div id="footer">    <ul>        <li>著作權資訊</li>        <li>網站地圖</li>        <li>連絡方式</li>    </ul></div>

        但是到了 HTML5 之後，這種方式將不再使用，而是使用更加語義化的 footer 標籤來替代，如下代碼所示：

<footer>    <ul>        <li>著作權資訊</li>        <li>網站地圖</li>        <li>連絡方式</li>    </ul></footer>

        與 header 標籤一樣，一個頁面也未限制 footer 標籤的個數。同時，可以為 article 標籤或 section 標籤添加 footer 標籤。

        以下的代碼為一個在 article 標籤中添加 footer 標籤的樣本：

<article>    文章內容    <footer>        文章的腳註    </footer></article>

        以下的代碼為一個在 section 標籤中添加 footer 標籤的樣本：

<section>    分段內容    <footer>        分段內容的腳註    </footer></section>

address標籤

        address 標籤用來在文檔中呈現聯絡資訊，包括名字、網站連結、電子郵箱、真真實位址、電話號碼等等。比如，如下代碼展示了一些部落格中某篇文章評論者的名字及其在部落格中的網址連結。

<address>    <a href="http://www.cnblogs.com/jasonsoop/">Jason</a>    <a href="http://www.cnblogs.com/lucky/">Lucky</a>    <a href="http://www.cnblogs.com/popeye/">Popeye</a></address>

        下面我們通過程式碼範例來看如何把 footer 標籤、time 標籤與 address 標籤結合起來使用。

<footer>    <div>        <address>            <a title="文章Jason" href="http://www.cnblogs.com/jasonsoop/">Jason</a>        </address>        發表於<time datetime="2014-11-01">2014年11月1日</time>    </div></footer>

        在這個樣本中，把部落格文章的作者、部落格的首頁連結作為作者資訊放在了 address 標籤中，把文章發表日期放在了 time 標籤中，把這個 address 標籤與 time 標籤中的總體內容作為腳註資訊放在了 footer 標籤中。

HTML5 結構之美(2) - 新增的非主體結構標籤