HTML5 定義頁眉

    ■知識點

    header表示頁眉，用來標(biāo)識標(biāo)題欄，其功能是引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來定義整個頁面的標(biāo)題欄，或者一個內(nèi)容塊的標(biāo)題區(qū)域。

    —個頁面可以設(shè)計多個header結(jié)構(gòu)，具體含義會根據(jù)其上下文而有所不同。例如，位于頁面頂端的header代表整個頁面的頁頭，位于欄S區(qū)域內(nèi)的header代表欄自的標(biāo)題。

    header可以包含網(wǎng)站Logo、主導(dǎo)航、搜索框等。也可以包含其他內(nèi)容，如數(shù)據(jù)表格、表單或相關(guān)的Logo信息，一般整個頁面的標(biāo)題應(yīng)該放在頁面的前面。

    ■實例設(shè)計

    【示例1】下面這個header代表整個頁面的頁眉。它包含一組導(dǎo)航的鏈接（在nav元素中）。role="banner"定義該頁眉為頁面級頁眉，以提高訪問權(quán)重。

<header role="banner">

<nav>

<ul>

<li><a href="#">公司新聞</a></li>

<li><a href="#">公司業(yè)務(wù)</a></1i>

<li><a href="#">關(guān)于我們</a></li>

</ul>

</nav>

</header>

【示例2】下面的示例是個人博客首頁的頭部區(qū)域，整個頭部內(nèi)容都放在header元素中。

<header>

<hgroup>

<hl>LOGO</hl>

<a href="#”>[URL]</a> <a href="#"> [訂閱]</a> <a href="#"> [手機訂閱]</a> 

</hgroup>

<nav>

<ul>

<li> 首頁 </li>

<li><a href="#">目錄</a></1i>

<li><a href="#">社區(qū)</a></li>

<li><a href="#">微博我</a></li>

</ul>

</nav>

</header>

    上面示例的頁眉形式在網(wǎng)上很常見。它包含網(wǎng)站名稱（通常為一個標(biāo)識）、指向網(wǎng)站主要版塊的導(dǎo)航鏈接，也可以包含一個搜索框。

    在HTML5中，header內(nèi)部可以包含hl?h6元素，也可以包含hgroup、table、form、nav等元素，只要應(yīng)該顯示在頭部區(qū)域的標(biāo)簽，都可以包含在header元素中。

【示例3】header也適合設(shè)計一個區(qū)塊的目錄。

<main role="main">

<article>

<header>

<hl>客戶反饋</hl>

<nav>

<ul>

<li><a href=n#answerln>新產(chǎn)品什么時候上市？ </a>

<li><a href=n#answer2n>客戶電話是多少？ </a>

<li> ...

</ul>

</nav>

</header>

<article id="answer1">

<h2>新產(chǎn)品什么時候上市？ </h2>

<p>5月1日上市</p>

</article>

<article id="answer2">

<h2>客戶電話是多少？ </h2>

<p>010-66668888</p>

</article>

</article>

</main>