footer必须是原生闭合标签且为body直接子元素，正确写法是<footer>© 2024 MySite</footer>；需用flex布局实现贴底，年份应服务端或构建时固化，<small>仅用于附属细则而非缩字体。
footer必须是原生标签且闭合完整
写成 <footer>© 2024 MySite 就算失败——漏掉 </footer> 会导致后续所有 HTML 被吞进 footer 子树，DevTools 里能看到 DOM 层级错乱，document.querySelector('footer') 可能返回 null 或意外节点，CSS 的 margin-bottom 也会失效。
常见错误包括：模板引擎插值时未转义变量内容，比如 {{ copyright }} 渲染出 </footer> 字符串，提前截断标签；React/Vue 中用 <Fragment> 或条件渲染把 <footer> 包裹掉，最终 HTML 根本没这个标签。
- 必须写成
<footer>© 2024 MySite</footer>，闭合完整 - 它得是
<body>的直接子元素，不能嵌套在<div id="app">或<main>里（除非你真要定义区块页脚） - 多语言站点需为每个版本单独写
<footer lang="zh">或<footer lang="en">，别指望靠 JS 切换lang属性来“动态适配”
让版权栏真正贴底，不是靠 position: fixed
<footer> 本身不自动停在页面最底部。内容少时悬在视口中间，是正常现象；所谓“贴底”，本质是确保它始终位于文档流末端且视觉上不被挤上去。
用 position: fixed; bottom: 0; 看似简单，但后果严重：长页面底部文字被盖住、打印时消失、屏幕阅读器读不到顺序、移动端键盘弹出后 vh 失准导致错位。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：给
<html>和<body>都设height: 100%（旧版 Safari 兼容需要） -
<body>设display: flex; flex-direction: column; min-height: 100vh; - 主内容区域用
<main>（不是<div>），并加flex: 1 -
<footer>放在<main>后、</body>前，不设高度、不加定位
年份怎么更新才靠谱，别信 document.write
硬写 © 2024 在 2026 年已过期，法律效力和专业感都打折扣；但用 document.write(new Date().getFullYear()) 更危险：执行时机不可控，容易导致 DOM 渲染断裂，部分爬虫看到空年份。
JS 动态注入只是补救手段，优先走服务端或构建时固化。
- 服务端渲染（PHP/Node.js）：用
© <?php echo date('Y'); ?> MySite—— 稳定、无 JS 依赖、SEO 友好 - 静态站点生成器（Vite/Next.js/Jekyll）：构建时替换占位符（如
{year}），生成即固化 - 纯前端补救（慎用）：用
<time datetime="2026">2026</time>作降级，再配document.querySelector('footer time').textContent = new Date().getFullYear()—— JS 失效时仍显示正确年份
small 标签不是用来缩字体的
<small> 的语义是“附属细则”，不是“字体小”。W3C 明确它适用于法律声明、许可条款这类次要但需保留的内容，不是为了把整行版权文字视觉弱化。
写成 <footer><small>© 2026</small></footer> 是双重弱化：既没提升可访问性，又让版权信息在结构中更难被提取，axe 工具会标为 “role missing”。
- 纯主版权（如
© 2026 MySite. All rights reserved.）直接放<footer>里完全合法，不加<small>也不算错 - 如果页脚里混着导航链接、联系方式、备案号，可用
<small>包其中一条补充说明（如“含开源组件许可详见 LICENSE”） - 别用 CSS 强制重置
<small>字号，否则破坏其语义意图
最常被忽略的是：多语言站点里，版权文字本身没做本地化适配——英文站写 All rights reserved.，中文站却没改成“保留所有权利”，而仅靠 CSS 控制样式或 JS 替换文本，爬虫和屏幕阅读器根本看不到真实内容。
