footer 标签

本教程共 110 篇 · 第 67 篇 · 更新于 2026-07-28 · 约 4 分钟阅读

HTML5HTML5 入门教程语义化footer页脚版权article footer

本节目标：掌握 footer 的用法，了解它在页面和文章中的不同角色。

<footer> 定义文档或章节的页脚。和 header 一样，footer 也有”页面级”和”文章级”两种用法。

整个网站的底部，通常包含版权信息、联系方式、友情链接。

<body>
  <!-- 页面内容 -->

  <footer>
    <p>版权所有 2026 码上学</p>
    <p>邮箱：contact@mashangxue.com</p>
    <nav>
      <a href="/privacy">隐私政策</a>
      <a href="/terms">使用条款</a>
    </nav>
  </footer>
</body>

<article> 内的 footer 放这篇文章的相关信息。

<article>
  <header>
    <h2>CSS Grid 布局详解</h2>
  </header>
  <p>正文内容...</p>
  <footer>
    <p>标签：<a href="/tag/css">CSS</a> <a href="/tag/layout">布局</a></p>
    <p>发布于 <time datetime="2026-07-28">2026-07-28</time></p>
  </footer>
</article>

文章的标签、分类、发布时间——这些是文章 footer 的常见内容。

版权声明（Copyright）
联系方式（邮箱、电话）
网站地图链接
隐私政策和条款链接
作者信息
返回顶部链接
社交账号链接

嵌套限制

和 header 类似，以下元素内部不能放 footer：

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

一个页面可以有多个 footer。

<footer>页面底部版权</footer>

<article>
  <footer>文章元信息</footer>
</article>

<section>
  <footer>章节相关链接</footer>
</section>

不同层级的 footer 描述不同范围的信息。

完整示例

<body>
  <header>
    <h1>码上学</h1>
    <nav>...</nav>
  </header>

  <main>
    <article>
      <header>
        <h2>理解 HTML5 语义化</h2>
      </header>
      <p>正文内容...</p>
      <footer>
        <p>分类：前端基础 | 标签：<a href="#">HTML5</a> <a href="#">语义化</a></p>
      </footer>
    </article>
  </main>

  <footer>
    <p>&copy; 2026 码上学. 保留所有权利.</p>
    <p><a href="/about">关于我们</a> | <a href="/contact">联系方式</a></p>
  </footer>
</body>

页面一个 footer，每篇文章一个 footer。结构清晰。

footer 的样式（如居中、灰色背景）是 CSS 的事。HTML 语义只负责”这是什么”，不负责”长什么样”。

footer 标签

67. footer 标签

页面级 footer

文章级 footer

footer 里常见的内容

嵌套限制

多个 footer 可以共存

完整示例