HTML5 定義頁(yè)眉

    ■知識(shí)點(diǎn)

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

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

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

    ■實(shí)例設(shè)計(jì)

    【示例1】下面這個(gè)header代表整個(gè)頁(yè)面的頁(yè)眉。它包含一組導(dǎo)航的鏈接（在nav元素中）。role="banner"定義該頁(yè)眉為頁(yè)面級(jí)頁(yè)眉，以提高訪問(wèn)權(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】下面的示例是個(gè)人博客首頁(yè)的頭部區(qū)域，整個(gè)頭部?jī)?nèi)容都放在header元素中。

<header>

<hgroup>

<hl>LOGO</hl>

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

</hgroup>

<nav>

<ul>

<li> 首頁(yè) </li>

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

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

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

</ul>

</nav>

</header>

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

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

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

<main role="main">

<article>

<header>

<hl>客戶反饋</hl>

<nav>

<ul>

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

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

<li> ...

</ul>

</nav>

</header>

<article id="answer1">

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

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

</article>

<article id="answer2">

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

<p>010-66668888</p>

</article>

</article>

</main>