footer标签必须闭合且位置正确，否则会导致dom错乱、js获取失败、css失效及屏幕阅读器结构错乱；应作为body直接子元素（全站页脚）或嵌套于article/section内（局部页脚），不可置于main中。
footer 标签必须闭合且位置正确
不闭合 <footer></footer> 会导致浏览器把后续所有 HTML 内容都当成它的子节点，JS 查不到元素、CSS 样式失效、屏幕阅读器结构错乱。常见现象是版权文字出现在 header 里，或整段正文塌陷进页脚区域。
它必须作为 的直接子元素（全站页脚），或嵌套在 <article></article>/<section></section> 内（局部页脚）。别塞进 <main></main> 里——<main></main> 默认有 margin 和 display 行为，会截断 <footer></footer> 宽度，导致视觉错位。
-
<main></main><footer>© 2026</footer>✅ 正确 -
<main><footer>© 2026</footer></main>❌ 语义错误，这是 main 的页脚，不是全站的 -
<footer>© 2026</footer>（漏闭合）❌ 后续所有内容都会被吞进去
版权文字该用 <small></small> 还是直接放 <footer></footer> 里
<small></small> 不是“字体小”，而是 W3C 明确定义的“附属细则”语义，专用于法律条款、版权声明、备案号这类次要但需保留的信息。它和 <footer></footer> 是互补关系，不是替代关系。
纯版权行建议用 <small></small> 包裹；如果页脚里混着导航链接、联系方式、隐私政策等不同层级内容，<small></small> 能明确区分主次。
- 单行版权：
<footer><small>© 2026 My Site. All rights reserved.</small></footer> - 多条版权（主站+子产品）：
<footer><small>© 2026 Main Site</small><small>© 2026 Product X</small></footer> - 别用
<small></small>包导航链接或邮箱——那些是主要可操作内容，不该弱化
让 <footer></footer> 真正“贴底”的 CSS 关键点
只写 <footer></footer> 不会让它自动停在视口底部。内容少时它悬在半空，内容多时才自然沉底。要实现“粘性底部”，得靠布局控制，不是定位技巧。
- 给
和都设height: 100%，再给加min-height: 100vh和display: flex; flex-direction: column -
<main></main>必须存在，且设flex: 1（不能用<div> 替代） <li> <code><footer></footer>放在<main></main>后、前，作为最后一个子元素 - 避免用
position: fixed; bottom: 0——它会让 footer 盖住短页正文末尾，长页又悬在半空，打印和读屏体验全崩 - 前端 JS（慎用）：
<footer><small>© <script>document.write(new Date().getFullYear())</script> My Site</small></footer>—— JS 未执行前空白，爬虫环境不可见 - 服务端（如 PHP）：
<footer><small>© <?php echo date('Y'); ?> My Site</small></footer>—— 稳，但依赖后端运行时 - 构建时注入（推荐静态站）：Vite/Webpack 插件替换
{year}占位符，生成即固化 - 最省事也最可靠：
<footer><small>© 2024–2026 My Site</small></footer>—— 无需维护，无运行时依赖，SEO 友好
动态年份更新的三种写法及取舍
年份要不要动态，取决于你的部署方式和兼容性要求。纯前端 JS 最简但有风险；服务端或构建时注入更稳；写死区间反而最省心。
最容易被忽略的是语义归属：<footer></footer> 不是“页面最下方的视觉盒子”，而是“属于某个节根元素（如 或 <article></article>）的结尾信息”。放错位置，读屏器和搜索引擎就认不出它是全站版权。
