应使用语义化 <footer> 标签而非 <div class="footer">，因其明确标识页脚区域，提升无障碍访问、SEO 和自动化工具识别；可置于 <body> 或 <article>/<section> 内，内容须为版权、作者、联系方式等关联信息，避免导航、广告等主交互内容。
页脚用 <footer>，不是 <div class="footer">
语义化是关键。浏览器、屏幕阅读器和搜索引擎都靠标签含义理解结构，<footer> 明确表示“这是页脚区域”，而 <div> 没有这层信息。用错会导致无障碍访问失败、SEO 权重稀释，甚至影响某些自动化工具（比如爬虫提取版权信息）的识别。
常见错误现象：console 里看不到问题，但 Lighthouse 检测提示“缺少语义化页脚”；视障用户用读屏软件跳转时无法快速定位到页脚内容。
-
<footer>可以出现在<body>直接子级（全站页脚），也可以嵌套在<article>或<section>内（局部页脚，比如某篇文章末尾的作者信息） - 不要为了“样式方便”放弃语义——CSS 完全可以作用于
<footer>，无需额外 class - 避免嵌套多个
<footer>在同一逻辑区块内，W3C 规范建议每个<article>/<section>最多一个<footer>
页脚里放什么内容才合规
不是所有底部文字都适合塞进 <footer>。W3C 明确定义：页脚应包含“与当前页面或章节相关的信息”，比如作者、版权、联系方式、相关链接、法律声明。
容易踩的坑：<footer> 里塞导航菜单、广告横幅、登录入口——这些属于交互性主内容，应该放在 <nav> 或独立 <aside> 中；否则会干扰辅助技术对“页脚”的预期。
立即学习“前端免费学习笔记（深入）”；
- 推荐内容：
© 2024 MySite. All rights reserved.、<a href="/privacy">Privacy Policy</a>、<address>contact@example.com</address> - 不推荐内容：
<form>登录框、动态轮播的推广 banner、实时客服按钮 -
<address>标签只适用于联系信息（人或组织），不能用于随便一个地址字符串
兼容性与 polyfill 的真实需求
<footer> 在 IE9+ 和所有现代浏览器中原生支持，不需要 JS 补丁。所谓“IE8 兼容”基本是过时焦虑——除非你还在维护 2012 年的老系统，否则不用管。
真正要注意的是 CSS 渲染一致性：旧版 Safari（<footer> 的默认 display 值处理略有差异，但加一行 footer { display: block; } 就能解决，无需引入整个 html5shiv。
- 如果项目强制要求 IE8 支持，必须用
<div role="contentinfo">替代，并手动加 ARIA 属性 - 别在构建流程里无脑注入 html5shiv——它会污染全局命名空间，且对
<footer>这类纯语义标签实际作用极小 - 检查是否启用了
box-sizing: border-box，否则某些老 Android 浏览器下<footer>的 padding/margin 渲染可能意外撑高
CSS 定位页脚到底部的常见翻车点
“让页脚永远贴底”不是 <footer> 标签的责任，而是布局问题。很多人以为加个 position: fixed 就完事，结果遮住内容、打印失真、移动端滚动卡顿。
更可靠的方案是 flex 布局，但必须确保父容器高度可控。直接在 <body> 上设 min-height: 100vh + display: flex; flex-direction: column，再给主内容区 flex: 1，页脚自然沉底。
- 避免
position: absolute配合bottom: 0——当内容少于一屏时正常，内容多时页脚会悬浮在半空 - 慎用
margin-top: auto在 flex 子项上——它依赖父容器为 flex 容器且高度已知，否则无效 - 如果用了 CSS Grid，
grid-template-rows: 1fr auto是更简洁的替代方案，但需确认 grid 支持范围是否覆盖目标环境
最常被忽略的一点：页脚的可访问性不只是标签正确，还要检查焦点顺序是否自然（Tab 键从页眉→主内容→页脚）、颜色对比度是否达标（尤其灰色文字配浅灰背景）、以及响应式断点下是否仍保持语义层级——缩成单列时，别让版权信息被折叠进 hamburger 菜单里。
