PHP小码农

Appearance

footer 页脚 ​

<footer> 元素表示页面或内容区块的底部区域，通常包含版权信息、联系信息、站点地图链接、相关文档链接等。与 <header> 类似，<footer> 可以出现在页面级和章节级两个层级。

前置知识

阅读本节前，建议先了解：aside 侧边栏

基础概念 ​

<footer> 是 HTML5 语义化标签，用于表示其最近的祖先内容（文章、区块或整个页面）的底部信息。它通常包含与该内容相关的元信息或辅助导航链接。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>footer 示例</title>
</head>
<body>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>正文内容...</p>
      <!-- 文章级 footer -->
      <footer>
        <p>发布于 <time datetime="2024-01-15">2024-01-15</time></p>
        <p>作者：<address>张三</address></p>
      </footer>
    </article>
  </main>

  <!-- 页面级 footer -->
  <footer>
    <p>&copy; 2024 我的网站. 保留所有权利.</p>
    <nav aria-label="页脚导航">
      <a href="/privacy">隐私政策</a>
      <a href="/terms">使用条款</a>
    </nav>
  </footer>
</body>
</html>
位置隐式 ARIA 角色说明
<body> 的直接子元素contentinfo页面级内容信息
<article> 内无特定角色文章底部信息
<section> 内无特定角色章节底部信息
<aside> 内无特定角色侧边栏底部信息

语法与使用 ​

基本语法 ​

html
<footer>
  <!-- 页脚内容 -->
</footer>
内容类型说明示例
版权信息版权声明<p>&copy; 2024</p>
联系信息联系方式<address>...</address>
导航链接站点地图、辅助导航<nav>...</nav>
相关文档条款、隐私政策<a href="/terms">条款</a>
时间信息发布/更新时间<time>...</time>
作者信息文章作者<address>...</address>
社交链接社交媒体图标<a href="#">Twitter</a>
  • 一个页面可以有多个 <footer>（页面级 + 章节级）
  • 不能在 <header>、<footer>、<address> 内嵌套 <footer>
  • 页面级 footer 通常出现在 <body> 的末尾
html
<!-- 正确用法 -->
<body>
  <main>
    <article>
      <header><h1>标题</h1></header>
      <p>正文...</p>
      <footer><p>文章元信息</p></footer>  <!-- 文章级 -->
    </article>
  </main>
  <footer><p>版权信息</p></footer>  <!-- 页面级 -->
</body>

<!-- 错误：footer 嵌套在 footer 中 -->
<footer>
  <footer>...</footer>  <!-- 错误！ -->
</footer>

详细说明 ​

页面级 footer 是整个网站的底部区域，通常包含全局性信息：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面级 footer 示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; color: #333; }

    .site-header { background: #2c3e50; color: #fff; padding: 1rem 2rem; }
    main { max-width: 800px; margin: 2rem auto; padding: 0 2rem; }

    /* 页面级 footer */
    .site-footer {
      background: #1a1a2e;
      color: #a0aec0;
      padding: 3rem 2rem 1.5rem;
    }

    .footer-content {
      max-width: 1000px; margin: 0 auto;
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem;
    }

    .footer-brand p { margin-top: 0.75rem; font-size: 0.85rem; line-height: 1.6; }
    .footer-brand h3 { color: #fff; font-size: 1.25rem; }

    .footer-section h4 {
      color: #fff; font-size: 0.95rem; margin-bottom: 1rem;
      padding-bottom: 0.5rem; border-bottom: 2px solid #3498db;
    }
    .footer-section ul { list-style: none; }
    .footer-section li { margin-bottom: 0.5rem; }
    .footer-section a { color: #a0aec0; text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
    .footer-section a:hover { color: #fff; }

    .footer-bottom {
      max-width: 1000px; margin: 2rem auto 0;
      padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1);
      display: flex; justify-content: space-between; align-items: center;
      font-size: 0.8rem;
    }

    .footer-social a {
      color: #a0aec0; text-decoration: none; margin-left: 1rem;
      font-size: 0.85rem;
    }
    .footer-social a:hover { color: #fff; }

    @media (max-width: 768px) {
      .footer-content { grid-template-columns: 1fr 1fr; }
      .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
    }
  </style>
</head>
<body>
  <header class="site-header">
    <h1>TechCorp</h1>
  </header>

  <main>
    <h1>欢迎来到 TechCorp</h1>
    <p>我们专注于提供高质量的 Web 开发服务。</p>
  </main>

  <!-- 页面级 footer -->
  <footer class="site-footer">
    <div class="footer-content">
      <!-- 品牌信息 -->
      <div class="footer-brand">
        <h3>TechCorp</h3>
        <p>致力于为企业和个人提供最优质的 Web 技术解决方案。成立于 2018 年，服务超过 500 家企业客户。</p>
      </div>

      <!-- 产品服务 -->
      <div class="footer-section">
        <h4>产品服务</h4>
        <ul>
          <li><a href="/web">网站开发</a></li>
          <li><a href="/app">应用开发</a></li>
          <li><a href="/design">UI 设计</a></li>
          <li><a href="/consult">技术咨询</a></li>
        </ul>
      </div>

      <!-- 关于 -->
      <div class="footer-section">
        <h4>关于我们</h4>
        <ul>
          <li><a href="/about">公司介绍</a></li>
          <li><a href="/team">团队成员</a></li>
          <li><a href="/careers">招聘信息</a></li>
          <li><a href="/blog">技术博客</a></li>
        </ul>
      </div>

      <!-- 支持 -->
      <div class="footer-section">
        <h4>支持帮助</h4>
        <ul>
          <li><a href="/docs">文档中心</a></li>
          <li><a href="/help">帮助中心</a></li>
          <li><a href="/contact">联系我们</a></li>
          <li><a href="/faq">常见问题</a></li>
        </ul>
      </div>
    </div>

    <div class="footer-bottom">
      <p>&copy; 2024 TechCorp. 保留所有权利.</p>
      <nav class="footer-social" aria-label="社交媒体">
        <a href="/privacy">隐私政策</a>
        <a href="/terms">使用条款</a>
        <a href="/sitemap">网站地图</a>
      </nav>
    </div>
  </footer>
</body>
</html>

章节级 footer 用于 <article>、<section> 等内容区块的底部：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>章节级 footer 示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; background: #f5f5f5; }

    .site-header { background: #2c3e50; color: #fff; padding: 1rem 2rem; }
    main { max-width: 800px; margin: 2rem auto; padding: 0 1rem; }

    .article-card {
      background: #fff; padding: 2rem; border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 1.5rem;
    }
    .article-card header { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #eee; }
    .article-card header h2 { margin-bottom: 0.5rem; }
    .article-meta { color: #7f8c8d; font-size: 0.85rem; }

    /* 文章级 footer */
    .article-card footer {
      margin-top: 1.5rem; padding-top: 1rem;
      border-top: 1px solid #eee;
      display: flex; justify-content: space-between; align-items: center;
      font-size: 0.85rem; color: #95a5a6;
    }

    .article-tags a {
      background: #ecf0f1; padding: 0.2rem 0.6rem; border-radius: 3px;
      color: #555; text-decoration: none; font-size: 0.8rem; margin-right: 0.25rem;
    }
    .article-actions a { color: #3498db; text-decoration: none; margin-left: 1rem; }
  </style>
</head>
<body>
  <header class="site-header"><h1>TechBlog</h1></header>

  <main>
    <article class="article-card">
      <header>
        <h2>JavaScript 异步编程指南</h2>
        <p class="article-meta">
          作者：<address style="font-style:normal"><a href="mailto:author@example.com" style="color:#3498db">李四</a></address>
          &middot; <time datetime="2024-01-20">2024 年 1 月 20 日</time>
        </p>
      </header>
      <p>异步编程是 JavaScript 的核心特性之一。本文将从回调函数讲起...</p>

      <!-- 文章级 footer -->
      <footer>
        <div class="article-tags">
          <a href="#">JavaScript</a>
          <a href="#">异步</a>
          <a href="#">Promise</a>
        </div>
        <div class="article-actions">
          <a href="#">分享</a>
          <a href="#">收藏</a>
          <a href="#">评论(12)</a>
        </div>
      </footer>
    </article>

    <article class="article-card">
      <header>
        <h2>CSS 动画性能优化</h2>
        <p class="article-meta">
          作者：<address style="font-style:normal"><a href="mailto:author@example.com" style="color:#3498db">王五</a></address>
          &middot; <time datetime="2024-01-18">2024 年 1 月 18 日</time>
        </p>
      </header>
      <p>CSS 动画在现代 Web 开发中扮演着重要角色...</p>

      <footer>
        <div class="article-tags">
          <a href="#">CSS</a>
          <a href="#">动画</a>
          <a href="#">性能</a>
        </div>
        <div class="article-actions">
          <a href="#">分享</a>
          <a href="#">收藏</a>
          <a href="#">评论(8)</a>
        </div>
      </footer>
    </article>
  </main>
</body>
</html>

实战示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多层 footer 示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; }

    .site-header { background: #1e293b; color: #fff; padding: 1rem 2rem; display: flex; justify-content: space-between; }
    main { max-width: 800px; margin: 2rem auto; padding: 0 2rem; }

    .post { background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 2rem; }
    .post header h1 { font-size: 1.5rem; }
    .post-meta { color: #64748b; font-size: 0.85rem; margin-bottom: 1.5rem; }

    /* section 内的 footer */
    .post section { margin: 2rem 0; }
    .post section footer {
      margin-top: 1rem; padding: 0.75rem;
      background: #f1f5f9; border-radius: 4px;
      font-size: 0.85rem; color: #475569;
    }

    /* 文章级 footer */
    .post-footer {
      margin-top: 2rem; padding-top: 1rem;
      border-top: 2px solid #e2e8f0;
    }
    .post-footer h3 { font-size: 0.95rem; color: #334155; margin-bottom: 0.75rem; }
    .author-info {
      display: flex; gap: 1rem; align-items: center;
    }
    .author-avatar {
      width: 50px; height: 50px; border-radius: 50%;
      background: #cbd5e1; display: flex; align-items: center;
      justify-content: center; font-size: 1.2rem;
    }
    .author-details p { font-size: 0.85rem; color: #64748b; }
    .author-details a { color: #3b82f6; text-decoration: none; }

    /* 页面级 footer */
    .site-footer {
      background: #1e293b; color: #94a3b8; padding: 2rem; margin-top: 3rem;
      text-align: center; font-size: 0.85rem;
    }
    .site-footer a { color: #94a3b8; text-decoration: none; margin: 0 0.5rem; }
    .site-footer a:hover { color: #fff; }
  </style>
</head>
<body>
  <header class="site-header">
    <h1>DevBlog</h1>
    <nav aria-label="主导航"><a href="/" style="color:#94a3b8;text-decoration:none;margin-left:1rem">首页</a></nav>
  </header>

  <main>
    <article class="post">
      <header>
        <h1>Web 可访问性入门教程</h1>
        <p class="post-meta">
          <address style="font-style:normal"><a href="mailto:chen@example.com" style="color:#3b82f6">陈六</a></address>
          &middot; <time datetime="2024-02-01">2024 年 2 月 1 日</time>
          &middot; 15 分钟阅读
        </p>
      </header>

      <section>
        <h2>什么是 Web 可访问性</h2>
        <p>Web 可访问性（Web Accessibility）是指让所有人，包括残障人士，都能平等地使用 Web 内容...</p>
        <footer>
          本节参考了 WCAG 2.1 标准文档。
        </footer>
      </section>

      <section>
        <h2>可访问性的四个原则</h2>
        <p>WCAG 定义了四个基本原则（POUR）...</p>
        <footer>
          更多信息请参考 W3C WAI 官方文档。
        </footer>
      </section>

      <section>
        <h2>如何实现可访问性</h2>
        <p>实现可访问性需要从多个层面考虑...</p>
        <footer>
          下一节将介绍语义化 HTML 标签的使用。
        </footer>
      </section>

      <!-- 文章级 footer -->
      <footer class="post-footer">
        <h3>关于作者</h3>
        <div class="author-info">
          <div class="author-avatar">C</div>
          <div class="author-details">
            <p><strong>陈六</strong></p>
            <p>前端开发工程师，关注 Web 可访问性和性能优化。</p>
            <p><a href="mailto:chen@example.com">联系作者</a></p>
          </div>
        </div>
      </footer>
    </article>
  </main>

  <!-- 页面级 footer -->
  <footer class="site-footer">
    <p>&copy; 2024 DevBlog. 保留所有权利.</p>
    <nav aria-label="页脚导航">
      <a href="/privacy">隐私政策</a>
      <a href="/terms">使用条款</a>
      <a href="/sitemap">网站地图</a>
    </nav>
  </footer>
</body>
</html>

注意事项 ​

常见错误 ​

  1. footer 内包含主内容：footer 只包含元信息和辅助内容
html
<!-- 错误 -->
<footer>
  <p>这是文章的主要内容...</p> <!-- 主内容不应在 footer 中 -->
</footer>

<!-- 正确 -->
<footer>
  <p>发布时间：2024-01-15</p> <!-- 元信息 -->
</footer>

  1. footer 嵌套：footer 不能嵌套在另一个 footer 或 header 中

  2. 空 footer：footer 应该包含实际内容

最佳实践 ​

  1. 页面级 footer 包含全局信息：版权、隐私政策、联系方式等
  2. 文章级 footer 包含元信息：作者、标签、分享按钮等
  3. 使用 nav 包裹链接：footer 中的链接组用 nav 包裹并添加 aria-label
  4. 响应式处理：多列 footer 在移动端变为单列
  5. 页面级 footer 添加联系信息：用 <address> 标签标注

下一节

继续学习：hgroup 标题组

参考链接 ​