footer标签是HTML5中定义页面或区块底部内容的语义化元素，适用于版权信息、作者详情、法律链接等，可嵌套于body、article或section内，提升可访问性与SEO效果。
footer 标签是 HTML5 中专用于定义页面或区块底部内容的语义化元素，适合放置作者信息、版权说明、联系方式及法律条款链接等。它不只限于整个页面底部，也可用在 article 或 section 内部，表示该部分内容的结尾信息。
基本结构：页面级 footer
放在 <body> 底部的 footer 通常涵盖全站通用信息：
<footer>
<p>© 2024 示例网站。保留所有权利。</p>
<p>作者：张三 | 邮箱：contact@example.com</p>
<p>
<a href="/privacy">隐私政策</a> |
<a href="/terms">服务条款</a> |
<a href="/cookies">Cookie 使用声明</a>
</p>
</footer>
语义清晰：区分层级与范围
若页面含多篇文章，每篇可自带 footer，仅归属该文章：
- 页面
<footer>：放全站版权与通用法律链接 - 文章
<article><footer>：放本文作者、发布日期、原文链接等 - 避免把导航菜单或无关广告塞进
footer，破坏语义意图
增强可访问性与 SEO 的小技巧
搜索引擎和读屏软件会识别 footer 的语义角色，合理使用有助于理解页面结构：
立即学习“前端免费学习笔记（深入）”；
- 用
<address>包裹联系信息（仅限直接作者/责任方，非公司客服） - 法律链接建议使用有意义的
href和清晰的链接文字，如不要写“点击这里”，而写“查看《用户协议》” - 可添加
aria-label（如aria-label="网站底部法律与版权信息"）进一步明确用途
样式与布局提示
footer 默认为块级元素，常见做法包括：
- 加背景色、内边距，与主内容区视觉分离
- 文字居中或左右对齐，链接用浅色并保持足够对比度
- 响应式设计中，小屏幕下可将多列链接转为垂直堆叠
- 无需额外
div包裹——footer本身已具备容器语义
