底部标签 - <footer>

什么是 <footer> 标签？

<footer> 是HTML5引入的语义化标签，用于定义文档或节的底部区域。它通常包含版权信息、联系方式、隐私政策链接、网站地图等内容。可以在一个文档中使用多次，分别表示不同内容块的底部。

基本语法

html 
<footer>
  <!-- 底部内容 -->
</footer>

典型用法

页面级底部

html 
<footer>
  <div class="container">
    <div class="footer-links">
      <h3>快速链接</h3>
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于我们</a></li>
        <li><a href="/contact">联系方式</a></li>
      </ul>
    </div>
    
    <div class="footer-contact">
      <h3>联系我们</h3>
      <p>邮箱：info@example.com</p>
      <p>电话：123-456-7890</p>
    </div>
    
    <div class="footer-copyright">
      <p>&copy; 2026 公司名称. 保留所有权利.</p>
    </div>
  </div>
</footer>

文章底部

html 
<article>
  <header>
    <h2>文章标题</h2>
    <p>发布日期：2026-02-06</p>
  </header>
  <p>文章内容...</p>
  
  <footer>
    <p>标签：HTML, 语义化</p>
    <p>作者：张三</p>
  </footer>
</article>

评论底部

html 
<article class="comment">
  <h3>用户评论</h3>
  <p>评论内容...</p>
  
  <footer>
    <p>评论者：李四 | 评论时间：2026-02-06</p>
  </footer>
</article>

全局属性

<footer> 标签支持所有HTML全局属性：

属性 描述
class 为元素指定一个或多个类名
id 为元素指定唯一ID
style 为元素指定内联样式
title 提供有关元素的额外信息

最佳实践

  1. 语义化使用：仅将 <footer> 用于表示内容的底部区域，而不是所有底部位置的容器

  2. 适当内容：在 <footer> 中包含与文档或节相关的辅助信息，如版权、作者、联系方式等

  3. 可嵌套使用：可以在 <article>、<section> 等元素内部使用 <footer>

  4. 避免主要内容：不要在 <footer> 中包含文档的主要内容

浏览器兼容性

  • Chrome 5+
  • Firefox 4+
  • Safari 5+
  • Opera 11.1+
  • IE 9+

总结

<footer> 标签是HTML5语义化标签的重要组成部分，它提供了清晰的底部区域标识，有助于：

  • 提高页面的结构化程度，区分主要内容和底部信息
  • 改善搜索引擎优化，使搜索引擎更好地理解页面结构
  • 增强可访问性，帮助辅助技术用户识别内容区域
  • 使代码更具可读性和可维护性
  • 提供清晰的内容组织方式，便于未来的开发和维护
最后更新：2026-02-07