66. header 标签

本节目标：掌握 header 的两种用法——页面头部和文章头部，了解它不能嵌套在哪些元素里。

<header> 是介绍性内容的容器。可以是整个页面的头，也可以是一篇文章的头。

放在 body 最前面，包含网站标题、Logo、搜索框等。

<body>
  <header>
    <h1>我的博客</h1>
    <p>记录生活，分享技术</p>
    <nav>
      <a href="/">首页</a>
      <a href="/archive">归档</a>
      <a href="/about">关于</a>
    </nav>
  </header>
</body>

一个页面可以有多个 header。每个 article 或 section 都可以有自己的 header。

<article> 内部的 header 描述这篇文章的信息。

<article>
  <header>
    <h2>HTML5 语义化详解</h2>
    <p>作者：张三</p>
    <time datetime="2026-07-28">2026年7月28日</time>
  </header>
  <p>正文内容从这里开始...</p>
</article>

文章标题、作者、发布日期——这些都属于 header。

一个或多个标题标签（h1-h6）
Logo 或图标
作者信息
发布时间
导航链接

嵌套限制

有些元素里不能放 header：

<footer> 里不能放 header
<address> 里不能放 header
另一个 <header> 里不能放 header

这不是技术上的不能渲染，而是语义上不合理。

header 不一定在最上面。它可以在任何地方，只要语义上合适。

<section>
  <header>
    <h2>联系我们</h2>
    <p>以下方式可以找到我们</p>
  </header>
  <p>电话：xxx-xxxx-xxxx</p>
  <p>邮箱：contact@example.com</p>
</section>

这个 section 在页面中部，但它也可以有自己的 header。

完整示例

<body>
  <!-- 页面头部 -->
  <header>
    <h1>码上学</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/html">HTML</a>
      <a href="/css">CSS</a>
      <a href="/js">JavaScript</a>
    </nav>
  </header>

  <main>
    <article>
      <!-- 文章头部 -->
      <header>
        <h2>CSS Flexbox 完全指南</h2>
        <p>作者：李四 | <time datetime="2026-07-25">7月25日</time></p>
      </header>
      <p>Flexbox 是 CSS 中非常强大的布局工具...</p>
    </article>

    <article>
      <header>
        <h2>JavaScript 异步编程入门</h2>
        <p>作者：王五 | <time datetime="2026-07-20">7月20日</time></p>
      </header>
      <p>异步是 JavaScript 的核心概念之一...</p>
    </article>
  </main>
</body>

一个页面 header，每篇文章一个 article header。各司其职。

header 里应该包含一个标题标签（h1-h6），这样文档大纲才有层级。

header 标签

66. header 标签

页面级 header

文章级 header

header 里通常包含

嵌套限制

header 不是固定位置

完整示例