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