HTML5 定义页眉

    ■知识点

    header表示页眉，用来标识标题栏，其功能是引导和导航作用的结构元素，通常用来定义整个页面的标题栏，或者一个内容块的标题区域。

    —个页面可以设计多个header结构，具体含义会根据其上下文而有所不同。例如，位于页面顶端的header代表整个页面的页头，位于栏S区域内的header代表栏自的标题。

    header可以包含网站Logo、主导航、搜索框等。也可以包含其他内容，如数据表格、表单或相关的Logo信息，一般整个页面的标题应该放在页面的前面。

    ■实例设计

    【示例1】下面这个header代表整个页面的页眉。它包含一组导航的链接（在nav元素中）。role="banner"定义该页眉为页面级页眉，以提高访问权重。

<header role="banner">

<nav>

<ul>

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

<li><a href="#">公司业务</a></1i>

<li><a href="#">关于我们</a></li>

</ul>

</nav>

</header>

【示例2】下面的示例是个人博客首页的头部区域，整个头部内容都放在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="#">社区</a></li>

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

</ul>

</nav>

</header>

    上面示例的页眉形式在网上很常见。它包含网站名称（通常为一个标识）、指向网站主要版块的导航链接，也可以包含一个搜索框。

    在HTML5中，header内部可以包含hl〜h6元素，也可以包含hgroup、table、form、nav等元素，只要应该显示在头部区域的标签，都可以包含在header元素中。

【示例3】header也适合设计一个区块的目录。

<main role="main">

<article>

<header>

<hl>客户反馈</hl>

<nav>

<ul>

<li><a href=n#answerln>新产品什么时候上市？ </a>

<li><a href=n#answer2n>客户电话是多少？ </a>

<li> ...

</ul>

</nav>

</header>

<article id="answer1">

<h2>新产品什么时候上市？ </h2>

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

</article>

<article id="answer2">

<h2>客户电话是多少？ </h2>

<p>010-66668888</p>

</article>

</article>

</main>