HTML5基础教程：header元素的使用实例

文章简介：header元素是一种具有引导和导航作用的结构元素，通常用来防止整个页面或页面内的一个内容区块的标题，但也可以包含其它内容，例如数据表格、搜索表单或相关的logo图片。C2U中国设计秀

 C2U中国设计秀

header元素是一种具有引导和导航作用的结构元素，通常用来防止整个页面或页面内的一个内容区块的标题，但也可以包含其它内容，例如数据表格、搜索表单或相关的logo图片。C2U中国设计秀

在整个页面中的标题一般放在页面的开头，一个网页中没有限制header元素的个数，可以拥有多个，可以为每个内容区块加一个header元素。C2U中国设计秀

多个header元素示例：C2U中国设计秀

<header>
  <h1>网页标题</h1>
</header>
<article>
  <header>
    <h1>文章标题</h1>
  </header>
  <p>文章正文</p>
</article>

在HTML5中，一个header元素通常包括至少一个headering元素（h1-h6），也可以包括hgroup元素，nav元素，还可以包括其它元素(tableform)。C2U中国设计秀

博客网页中的header元素示例C2U中国设计秀

<header>
  <hgroup>
    <h1>网页标题</h1>
    <p>网页描述…</p>
  </hgroup>
  <nav>
    <ul>
      <li>…</li>
      <li>…</li>
    </ul>
  </nav>
</header>