HTML <footer> 标签详解：网页底部信息结构化指南
HTML <footer> 标签是 HTML5 中引入的语义化元素，用于定义文档或章节的页脚区域。该元素通常位于页面底部，包含与文档相关的元信息，如作者详情、版权声明、联系方式等重要内容。
基本语法
<footer>
<!-- 页脚内容 -->
</footer>
核心功能与特性
信息类型包含
-
作者联系信息（邮箱、地址等）
-
网站导航链接（站点地图）
-
版权声明和法律信息
-
相关文档链接
-
社交媒体链接
结构特点
-
支持在单个文档中使用多个
<footer>元素 -
可与
<header>、<main>、<article>等语义化标签配合使用 -
支持所有全局属性和事件属性
实用示例
示例1：基础页脚结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>代码号学习平台 - 页脚示例</title>
</head>
<body>
<main>
<h1>欢迎访问代码号编程教程</h1>
<p>学习编程，从代码号开始</p>
</main>
<footer>
<p>作者：代码号技术团队</p>
<p>联系方式：<a href="mailto:alan@ebingou.cn">alan@ebingou.cn</a></p>
</footer>
</body>
</html>
示例2：带样式的固定底部页脚
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>代码号编程教程 - 固定页脚</title>
<style>
.site-footer {
width: 100%;
position: fixed;
background-color: #f5f5f5;
color: #333;
text-align: center;
padding: 15px 0;
bottom: 0;
left: 0;
border-top: 2px solid #4CAF50;
}
</style>
</head>
<body>
<h1>HTML footer 标签应用示例</h1>
<p>页脚将始终显示在页面底部</p>
<footer class="site-footer">
<p>© 2025 代码号学习平台 - 所有权利保留</p>
<p><a href="mailto:alan@ebingou.cn">联系我们</a></p>
</footer>
</body>
</html>
示例3：多栏目页脚设计
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>代码号 - 多功能页脚示例</title>
<style>
.multi-section-footer {
display: flex;
justify-content: space-around;
background-color: #2c3e50;
color: white;
padding: 30px 0;
margin-top: 50px;
}
.footer-section {
flex: 1;
padding: 0 20px;
}
.footer-section h3 {
border-bottom: 2px solid #4CAF50;
padding-bottom: 10px;
}
</style>
</head>
<body>
<footer class="multi-section-footer">
<section class="footer-section">
<h3>关于代码号</h3>
<p>专注于提供优质的编程学习资源</p>
</section>
<section class="footer-section">
<h3>快速链接</h3>
<ul>
<li><a href="https://www.ebingou.cn/">首页</a></li>
<li><a href="https://www.ebingou.cn/jiaocheng/">教程中心</a></li>
<li><a href="https://www.ebingou.cn/biancheng/">编程学习</a></li>
</ul>
</section>
<section class="footer-section">
<h3>联系我们</h3>
<p>邮箱：alan@ebingou.cn</p>
<p>更新时间：2025年</p>
</section>
</footer>
</body>
</html>
示例4：响应式页脚设计
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>代码号 - 响应式页脚</title>
<style>
.responsive-footer {
background-color: #34495e;
color: white;
padding: 20px;
text-align: center;
}
@media (max-width: 768px) {
.responsive-footer {
padding: 15px;
font-size: 14px;
}
}
</style>
</head>
<body>
<footer class="responsive-footer">
<p>© 2025 代码号编程学习平台 |
<a href="https://www.ebingou.cn/yuanma/" style="color: #4CAF50;">源码分享</a> |
<a href="mailto:alan@ebingou.cn" style="color: #4CAF50;">技术支持</a>
</p>
</footer>
</body>
</html>
浏览器兼容性
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Opera |
 Safari |
| <footer> | 6.0+支持 | 全版本支持 | 4.0+支持 | 11.1+支持 | 5.0+支持 |
本节课程知识要点
-
语义化价值：
<footer>标签提供明确的语义化结构，有助于SEO优化 -
多位置使用：可在页面级和章节级多次使用
-
内容多样性：支持包含各种类型的元信息和导航内容
-
样式灵活性：可通过CSS自定义外观和布局
-
响应式设计：适配不同设备屏幕尺寸
进阶应用技巧
结合微数据增强SEO
html
<footer itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">代码号学习平台</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="email">联系邮箱：alan@ebingou.cn</span>
</div>
<meta itemprop="founder" content="代码号技术团队">
<meta itemprop="foundingDate" content="2025">
</footer>
动态页脚内容
<footer id="dynamicFooter">
<p>© <span id="currentYear">2025</span> 代码号平台 - 之后更新：2025年</p>
</footer>
<script>
document.getElementById('currentYear').textContent = new Date().getFullYear();
</script>
HTML <footer> 标签是现代网页开发中不可或缺的语义化元素，它不仅提供了结构化的内容容器，还显著提升了网站的可访问性和搜索引擎友好性。通过合理运用 <footer> 标签，开发者可以创建出既美观又功能完善的网页底部区域。
