必须用原生闭合的<footer>标签并置于<body>直接子级末尾，否则会导致DOM错乱、JS获取失败、CSS失效及SEO和无障碍支持丧失；它仅表语义不自动贴底，需CSS布局配合实现视觉粘底。
直接用 <footer> 标签，闭合完整、放在 <body> 最后一个直接子元素位置——这是唯一能同时通过 SEO、无障碍检测和语义解析的写法。
为什么 <footer> 必须是原生标签且闭合完整
浏览器解析 HTML 时，如果漏写 </footer>，后续所有内容（包括 </body>）都会被当成它的子节点。DevTools 里能看到 DOM 层级错乱，document.querySelector('footer') 可能返回空或意外节点，CSS 的 margin-bottom 也会失效。
- 常见错误：
<footer>© 2024 MySite（没闭合） - 正确写法：
<footer>© 2024 MySite</footer> - 模板引擎中注意：变量插值若含未转义的
</footer>，会提前截断标签
怎么让 <footer> 真正贴在页面最底部
<footer> 本身不自动贴底，它只是语义容器。内容少时悬在视口中间，是正常现象；要“粘性底部”，得靠布局控制。
-
<html>和<body>都要设height: 100%（旧版 Safari 兼容需要） -
<body>加display: flex; flex-direction: column; min-height: 100vh - 主内容区域必须用
<main>（不是<div>），并设flex: 1 -
<footer>放在<main>后、</body>前，不加position: fixed
年份动态更新该选哪种方式
硬写 2024 在 2026 年已过期，但 JS 动态注入又容易导致爬虫看不到年份或 JS 失效时空白。
立即学习“前端免费学习笔记（深入）”；
- 服务端渲染（PHP/Node.js）：
<footer>© <?php echo date('Y'); ?> MySite</footer>——稳定、无 JS 依赖 - 静态站构建时替换（Vite/Next.js）：用插件把
{year}替换为2026，生成即固化 - 纯前端补救（慎用）：
<time datetime="2026">2026</time>作降级，再用textContent更新——JS 失效时仍可读 - 最省事也最可靠：
<footer>© 2024–2026 MySite</footer>，两年内不用动
<small> 能不能套整个版权行
不能。W3C 明确 <small> 是为“附属细则”设计的，比如免责声明或许可条款，不是用来弱化主版权的视觉表现。
- 主版权（如
© 2026 MySite. All rights reserved.）直接放<footer>里完全合法 - 若页脚还混着导航链接、备案号等，可用
<small>包其中一条补充说明（如“含开源组件许可详见 LICENSE”） - 别写成
<footer><small>© 2026</small></footer>——双重弱化，结构提取困难，无障碍工具会报语义误用
真正麻烦的从来不是怎么写那行字，而是版权主体变更、合作方署名规则、开源组件合规声明这些背后要对齐的东西——<footer> 只是出口，不是终点。
