您现在的位置是：网站首页 > <footer>-页脚或区块尾文章详情

<footer>-页脚或区块尾

陈川【 HTML 】 50429人已围观 6382字

<footer> 是 HTML 中用于定义文档或区块尾部的标签，通常包含版权信息、作者信息、联系方式或其他相关链接。它既可以用作整个页面的页脚，也可以作为独立区块的尾部内容。

`<footer>` 的基本用法

<footer> 标签的语法非常简单，直接包裹需要显示在尾部的内容即可。例如：

<footer>
  <p>© 2023 我的网站. 保留所有权利.</p>
</footer>

这个标签通常放在 <body> 的末尾，但也可以用在其他区块元素内部。现代网页设计中，<footer> 几乎成为标准配置。

`<footer>` 的典型内容

页脚区域通常包含以下类型的内容：

版权声明
网站地图链接
联系信息
社交媒体图标
相关文档链接
作者信息
回到顶部按钮

<footer>
  <div class="footer-content">
    <div class="copyright">
      <p>© 2023 示例公司. 保留所有权利.</p>
    </div>
    <div class="footer-links">
      <ul>
        <li><a href="/about">关于我们</a></li>
        <li><a href="/contact">联系我们</a></li>
        <li><a href="/privacy">隐私政策</a></li>
      </ul>
    </div>
    <div class="social-media">
      <a href="#"><i class="fab fa-facebook"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
    </div>
  </div>
</footer>

`<footer>` 的语义重要性

<footer> 不仅是一个样式容器，更重要的是它提供了语义信息。屏幕阅读器和其他辅助技术可以识别这个标签，帮助用户理解内容结构。

与使用普通的 <div> 相比，<footer> 能更好地表达文档结构：

<!-- 不推荐 -->
<div class="footer">
  <!-- 页脚内容 -->
</div>

<!-- 推荐 -->
<footer>
  <!-- 页脚内容 -->
</footer>

`<footer>` 的嵌套使用

<footer> 不仅可以用于整个页面，还可以用于文章、区块等元素的尾部：

<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
  <footer>
    <p>作者: 张三 | 发布日期: 2023-10-15</p>
  </footer>
</article>

<section>
  <h2>产品特点</h2>
  <p>产品描述...</p>
  <footer>
    <a href="#">了解更多</a>
  </footer>
</section>

`<footer>` 的样式设计

通过 CSS 可以轻松地设计页脚样式。常见的样式包括固定底部、响应式布局等：

footer {
  background-color: #333;
  color: white;
  padding: 20px 0;
  text-align: center;
}

footer a {
  color: #ccc;
  text-decoration: none;
}

footer a:hover {
  color: white;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

响应式 `<footer>` 设计

在移动设备上，页脚通常需要调整布局：

@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
  }
  
  .footer-links ul {
    padding: 0;
  }
  
  .footer-links li {
    display: block;
    margin: 10px 0;
  }
}

`<footer>` 的可访问性考虑

确保页脚内容对所有用户都可访问：

为链接添加有意义的文本
确保颜色对比度足够
为图标添加 ARIA 标签
保持键盘可导航性

<footer>
  <nav aria-label="辅助导航">
    <ul>
      <li><a href="/sitemap">网站地图</a></li>
      <li><a href="/accessibility">可访问性声明</a></li>
    </ul>
  </nav>
  <div class="social">
    <a href="#" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
    <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
  </div>
</footer>

`<footer>` 中的微数据

可以使用 Schema.org 微数据增强页脚信息的语义：

<footer itemscope itemtype="http://schema.org/WPFooter">
  <div itemprop="copyrightHolder" itemscope itemtype="http://schema.org/Organization">
    <span itemprop="name">示例公司</span>
    <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="streetAddress">123街道</span>,
      <span itemprop="addressLocality">城市</span>
    </span>
  </div>
  <p>© <span itemprop="copyrightYear">2023</span> 保留所有权利.</p>
</footer>

`<footer>` 的交互功能

页脚可以包含交互元素，如表单订阅：

<footer>
  <div class="newsletter">
    <h3>订阅我们的通讯</h3>
    <form>
      <input type="email" placeholder="您的邮箱地址" required>
      <button type="submit">订阅</button>
    </form>
  </div>
</footer>

固定底部 `<footer>` 的实现

当页面内容不足时，可以使用以下 CSS 保持页脚在底部：

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

footer {
  margin-top: auto;
}

`<footer>` 中的结构化数据

对于复杂网站，可以在页脚中包含结构化数据：

<footer>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "示例公司",
    "url": "https://www.example.com",
    "logo": "https://www.example.com/logo.png",
    "contactPoint": {
      "@type": "ContactPoint",
      "telephone": "+1-401-555-1212",
      "contactType": "customer service"
    }
  }
  </script>
</footer>

`<footer>` 与 SEO

良好的页脚设计有助于 SEO：

包含网站地图链接
使用关键词但不堆砌
保持链接相关性和质量
避免过多外部链接

<footer>
  <div class="site-map">
    <h4>快速链接</h4>
    <ul>
      <li><a href="/products">产品</a></li>
      <li><a href="/services">服务</a></li>
      <li><a href="/blog">博客</a></li>
    </ul>
  </div>
</footer>

`<footer>` 中的多列布局

对于内容丰富的大型网站，页脚常采用多列布局：

<footer>
  <div class="footer-grid">
    <div class="footer-column">
      <h4>公司</h4>
      <ul>
        <li><a href="/about">关于我们</a></li>
        <li><a href="/careers">职业发展</a></li>
      </ul>
    </div>
    <div class="footer-column">
      <h4>资源</h4>
      <ul>
        <li><a href="/blog">博客</a></li>
        <li><a href="/docs">文档</a></li>
      </ul>
    </div>
  </div>
</footer>

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

`<footer>` 中的动态内容

页脚可以包含动态生成的内容：

<footer>
  <p>最后更新: <span id="last-updated"></span></p>
  <script>
    document.getElementById('last-updated').textContent = 
      new Date().toLocaleDateString();
  </script>
</footer>

`<footer>` 与打印样式

为打印页面优化页脚显示：

@media print {
  footer {
    display: none;
  }
  
  .print-footer {
    display: block;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 10pt;
  }
}

<footer class="print-footer">
  文档来源: https://www.example.com | 打印日期: <span class="print-date"></span>
</footer>

`<footer>` 中的法律信息

对于商业网站，页脚通常需要包含必要的法律信息：

<footer>
  <div class="legal">
    <p>示例公司是注册于某地的有限责任公司，注册号: 12345678</p>
    <p>VAT号: GB123456789</p>
    <p><a href="/terms">服务条款</a> | <a href="/privacy">隐私政策</a></p>
  </div>
</footer>

`<footer>` 的浏览器支持

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

Chrome 5+
Firefox 4+
Safari 5+
Opera 11.1+
Edge 12+
Internet Explorer 9+

对于旧版 IE，可以通过添加以下代码确保 HTML5 标签被正确识别：

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

`<footer>` 的最佳实践

保持内容简洁相关
避免过多嵌套
使用语义化结构
确保链接有效
考虑移动端体验
定期更新内容
避免广告干扰

<footer>
  <nav aria-label="辅助链接">
    <ul>
      <li><a href="/accessibility">可访问性</a></li>
      <li><a href="/cookies">Cookie政策</a></li>
    </ul>
  </nav>
  <p>© 2023 公司名称. 版本 {version}</p>
</footer>

上一篇： <header>-页眉或区块头

下一篇： <nav>-导航链接