footer标签语义上指“所属区块的页脚”，非页面底部；其归属由嵌套位置决定，必须正确闭合且不可自闭合；视觉粘底需CSS布局实现；内容须符合语义规范，备案号须置于body直接子级footer中。
footer标签不是“页面最底部”，而是“所属区块的页脚”
写完 <footer> 却发现它悬在半空，不是 bug，是语义理解偏差。<footer> 不控制视觉位置，只声明“这是谁的结尾信息区”。它的归属完全由嵌套位置决定：
- 作为
<body>的直接子元素 → 全站页脚，应含版权、备案号、隐私政策等全局信息 - 嵌套在
<article>末尾 → 该文章的页脚，适合作者、发布时间、分类标签 - 放在某个
<section>内部末尾 → 该区块的操作收尾，比如“下载资源”按钮 - 塞进
<main>或<header>里 → 语义断裂，Lighthouse 会报错，读屏软件无法正确识别文档结构
必须闭合，且闭合位置直接影响 DOM 结构
漏写 </footer> 是高频致命错误。浏览器会把后续所有 HTML（包括 </body>）都当作 <footer> 的子内容，导致：
-
document.querySelector('footer')返回空或意外节点 - CSS 的
margin-bottom失效 - DevTools 中 DOM 树层级错乱，JS 操作目标丢失
- 模板引擎中若变量插值含未转义的
</footer>，会提前截断标签
别用 <footer /> —— HTML 不支持自闭合写法，该标签会被忽略。
让 footer 视觉上“贴底”得靠布局，不是标签本身
<footer> 不自动粘底。内容少时停在中间，是正常行为。要实现可靠粘性底部，必须用 CSS 控制布局：
立即学习“前端免费学习笔记（深入）”；
-
<html>和<body>都需设height: 100%（旧版 Safari 兼容需要） -
<body>加display: flex; flex-direction: column; min-height: 100vh - 主内容区域必须是
<main>（不能用<div>），并设flex: 1 -
<footer>必须是<body>的最后一个直接子元素，顺序错乱会导致 flex 布局失效 - 避免
position: fixed或absolute：短页遮正文、长页悬空、打印和读屏全崩
页脚内容有明确语义边界，不是什么都能往里塞
footer 是元信息容器，不是广告位或导航堆叠区。放错内容会触发 Lighthouse 结构警告，影响 SEO 和无障碍访问：
- ✅ 可放：
© 2024–2026 MySite、<time datetime="2026-06-24"></time>、备案号（必须用有效链接包裹，如<a href="https://beian.miit.gov.cn">京ICP备12345678号</a>）、本页专属联系方式 - ❌ 禁放：全站主导航（该在
<nav>里）、无关外链、第三方广告、“回到顶部”按钮、重复社交媒体图标 - ⚠️ 小心用：
<small>只能包附属细则（如“含开源组件许可详见 LICENSE”），不能包裹主版权文字——双重弱化会导致结构提取失败
备案号必须出现在 <body> 直接子级的 <footer> 中，嵌套在 <article> 或 <section> 里的 <footer> 不被监管系统识别为全站备案主体。
