footer 是语义化标签，代表内容区块结尾信息而非视觉底部；可多处使用，需匹配归属上下文，全站页脚应置于 body 直接子级，避免误用为布局容器。
footer 标签不是“页面最底下那个 div”
HTML5 的 footer 是语义化标签，不是视觉定位工具。它代表一个内容区块的结尾信息，不一定是整页最底部。一个页面可以有多个 footer：比如 article 里有自己的作者信息，section 下有自己的更新时间，它们各自配一个 footer 都合法。
常见错误是把全站版权栏硬塞进某个 article 的 footer 里，结果被屏幕阅读器误读为“这篇文章的结尾”，而非“整个网站的页脚”。
- 全站级页脚应放在
body直接子级，或包裹在main外的独立区域 - 文章级页脚应紧贴对应
article结束标签前 - 不要用
footer替代div来做布局容器（比如为了 sticky 效果强行套一层）
用 footer 包什么内容才算语义正确
footer 应包含与它所归属的祖先元素直接相关的信息。浏览器和辅助技术靠这个判断上下文关系。
✅ 合理内容：
立即学习“前端免费学习笔记（深入）”；
- 文章作者、发布时间、编辑记录（放在
article内部的footer） - 章节相关链接、术语解释、参考资料（放在
section下的footer） - 全站版权、备案号、联系方式、隐私政策链接（放在
body级footer）
❌ 不该放的内容：
- 主导航菜单（那是
nav的职责） - 侧边栏广告或推荐位（属于无关内容，破坏语义）
-
表单提交按钮（按钮属于
form流程，不是“结尾信息”）
兼容性与 CSS 布局要注意什么
所有现代浏览器都支持 footer，但旧版 IE（≤8）不识别它——不过这不影响渲染，只是没语义。如果必须兼容老 IE，可加 document.createElement('footer') 或用 html5shiv，但更实际的做法是：别为 IE8 做语义增强，只保证它能显示内容即可。
CSS 方面，footer 默认是块级元素，但容易被误以为“自动沉底”。它不会自己粘在视口底部，需要额外样式控制：
footer {
margin-top: auto; /* 配合 flex 布局时 */
}
/* 或 sticky 定位 */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main { flex: 1; }
footer { margin-top: auto; }注意：用 position: fixed 或 absolute 会让它脱离文档流，可能遮挡内容或影响屏幕阅读器顺序，慎用。
一个干净的全站页脚 HTML 示例
这是符合语义、可访问、易维护的写法，不含多余 div，不滥用 class：
如果页脚里要嵌导航，应该用 nav 明确标注作用：
真正容易被忽略的是：页脚内容是否在 DOM 顺序中自然位于主体之后。用 JS 动态插入、或 CSS order 调整顺序，都会让键盘用户和屏幕阅读器跳过它——语义再对，也白搭。
