Web学习网站

Appearance

<footer> 标签 ​

<footer> 标签用于定义文档或章节的页脚。它通常包含版权信息、联系信息、站点地图链接等相关信息。

概述 ​

<footer> 标签是 HTML5 中引入的语义化标签，用于定义文档或章节的底部区域。它可以包含作者信息、版权信息、联系方式、相关文档链接等内容。

语法 ​

html
<footer>
  <!-- 页脚内容 -->
</footer>

基本用法 ​

页面页脚 ​

html
<footer>
  <p>&copy; 2023 我的网站. 保留所有权利。</p>
</footer>

包含多个信息的页脚 ​

html
<footer>
  <p>&copy; 2023 我的网站</p>
  <p>联系邮箱: <a href="mailto:info@example.com">info@example.com</a></p>
  <p><a href="/privacy">隐私政策</a> | <a href="/terms">使用条款</a></p>
</footer>

实际示例 ​

多列页脚 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>footer 标签示例</title>
  <style>
    footer {
      background-color: #333;
      color: white;
      padding: 2rem 0;
      margin-top: 2rem;
    }
    
    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      padding: 0 2rem;
    }
    
    .footer-section h3 {
      margin-top: 0;
      border-bottom: 2px solid #007bff;
      padding-bottom: 0.5rem;
    }
    
    .footer-section ul {
      list-style: none;
      padding: 0;
    }
    
    .footer-section ul li {
      margin-bottom: 0.5rem;
    }
    
    .footer-section a {
      color: #ccc;
      text-decoration: none;
    }
    
    .footer-section a:hover {
      color: white;
    }
    
    .copyright {
      text-align: center;
      padding-top: 2rem;
      margin-top: 2rem;
      border-top: 1px solid #555;
    }
  </style>
</head>
<body>
  <main>
    <h1>页面内容</h1>
    <p>主要内容...</p>
  </main>
  
  <footer>
    <div class="footer-content">
      <div class="footer-section">
        <h3>关于我们</h3>
        <p>我们是一家专业的网页开发公司，致力于为客户提供高质量的网站解决方案。</p>
      </div>
      
      <div class="footer-section">
        <h3>快速链接</h3>
        <ul>
          <li><a href="#home">首页</a></li>
          <li><a href="#about">关于</a></li>
          <li><a href="#services">服务</a></li>
          <li><a href="#contact">联系</a></li>
        </ul>
      </div>
      
      <div class="footer-section">
        <h3>联系信息</h3>
        <ul>
          <li>地址: 北京市朝阳区</li>
          <li>电话: 010-12345678</li>
          <li>邮箱: <a href="mailto:info@example.com">info@example.com</a></li>
        </ul>
      </div>
    </div>
    
    <div class="copyright">
      <p>&copy; 2023 我的网站. 保留所有权利。</p>
    </div>
  </footer>
</body>
</html>

文章页脚 ​

html
<article>
  <h1>文章标题</h1>
  <p>文章内容...</p>
  
  <footer>
    <p>作者: 张三</p>
    <p>发布于 <time datetime="2023-01-01">2023年1月1日</time></p>
    <p>标签: <a href="/tags/html">HTML</a>, <a href="/tags/css">CSS</a></p>
  </footer>
</article>

与相关标签的区别 ​

与 <header> 的区别 ​

html
<!-- header 表示页眉 -->
<header>
  <h1>网站标题</h1>
  <nav>导航链接</nav>
</header>

<!-- footer 表示页脚 -->
<footer>
  <p>&copy; 2023 版权信息</p>
</footer>

与 <div> 的区别 ​

html
<!-- 不推荐：使用 div 表示页脚 -->
<div id="footer">
  <p>页脚内容</p>
</div>

<!-- 推荐：使用语义化的 footer 标签 -->
<footer>
  <p>页脚内容</p>
</footer>

无障碍访问 ​

使用语义化结构 ​

html
<footer role="contentinfo">
  <h2>网站信息</h2>
  <p>&copy; 2023 我的网站</p>
</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>响应式页脚</title>
  <style>
    footer {
      background-color: #333;
      color: white;
      padding: 2rem 1rem;
    }
    
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.5rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .footer-column h3 {
      margin-top: 0;
      border-bottom: 1px solid #555;
      padding-bottom: 0.5rem;
    }
    
    .social-links {
      display: flex;
      gap: 1rem;
    }
    
    .social-links a {
      color: white;
      text-decoration: none;
      font-size: 1.5rem;
    }
    
    @media (max-width: 768px) {
      .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
      }
      
      .social-links {
        justify-content: center;
      }
    }
  </style>
</head>
<body>
  <main>
    <h1>页面内容</h1>
    <p>主要内容...</p>
  </main>
  
  <footer>
    <div class="footer-grid">
      <div class="footer-column">
        <h3>关于我们</h3>
        <p>专业的网页开发服务</p>
        <div class="social-links">
          <a href="#" aria-label="微博">微博</a>
          <a href="#" aria-label="微信">微信</a>
          <a href="#" aria-label="QQ">QQ</a>
        </div>
      </div>
      
      <div class="footer-column">
        <h3>快速链接</h3>
        <ul>
          <li><a href="#home">首页</a></li>
          <li><a href="#about">关于</a></li>
          <li><a href="#services">服务</a></li>
        </ul>
      </div>
      
      <div class="footer-column">
        <h3>联系信息</h3>
        <address>
          <p>邮箱: <a href="mailto:info@example.com">info@example.com</a></p>
          <p>电话: <a href="tel:+1234567890">+1 234 567 890</a></p>
        </address>
      </div>
    </div>
  </footer>
</body>
</html>

最佳实践 ​

  1. 语义化使用：只在真正表示文档或章节页脚时使用
  2. 内容相关：页脚应包含与父元素相关的信息
  3. 不嵌套：避免在页脚中嵌套其他页眉或页脚
  4. 链接组织：合理组织页脚中的链接信息
  5. 样式设计：通过 CSS 设计美观的页脚样式
  6. 响应式：确保页脚在不同设备上都能良好显示

浏览器兼容性 ​

<footer> 标签在所有现代浏览器中都得到支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer 9+

对于不支持的旧浏览器，可以通过 CSS 显示声明为块级元素：

css
footer {
  display: block;
}

注意事项 ​

  1. <footer> 标签是块级元素
  2. 一个文档或章节可以有一个 <footer> 元素
  3. <footer> 标签可以包含任何 HTML 元素
  4. <footer> 标签没有默认样式，需要通过 CSS 设置
  5. 可以在 <article>、<section> 等元素中使用 <footer>

相关标签 ​