1.4.1　课堂案例——使用header元素

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题。header元素也可以包含其他内容，如表格、表单或相关的Logo图片。

在架构页面时，整个页面的标题常放在页面的开头，header元素一般都放在页面的顶部。可以用如下形式书写页面的标题。

<header>
  <h1>页面标题</h1>
</header>

一个网页可以拥有多个header元素，可以为每个内容区块加一个header元素。代码示例如下所示。

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

在HTML5中，一个header元素通常包括至少一个headering元素（h1~h6），也可以包括hgroup、nav等元素。

下边是一个网页中header元素使用示例，在浏览器中的效果如图1.14所示。

<header>
  <hgroup>
    <h1>资产管理有限公司</h1>
    <p> 资产管理有限公司是为改善民营中小企业
融资难问题，改善全市金融服务环境，规范个人、企业
贷款渠道而鼓励成立的集贷款咨询、融资为一体的专业
贷款咨询服务公司。公司经营以市场为导向，遵循金融
行业各项管理规定，有力支持中小企业发展，为个人贷
款，中小企业创业，资金周转提供最为优质的融资咨询
服务，在业内获得一致好评。……</p>
  </hgroup>
  <nav>
    <ul>
      <li>配资介绍</li>
      <li>公司优势</li>
      <li>账户安排</li>
    </ul>
  </nav>
</header>

图1.14 header元素使用示例