footer标签必须闭合且位置正确，否则会导致DOM错乱、JS获取失败、CSS失效及屏幕阅读器结构错乱；应作为body直接子元素（全站页脚）或嵌套于article/section内（局部页脚），不可置于main中。
footer 标签必须闭合且位置正确
不闭合 <footer> 会导致浏览器把后续所有 HTML 内容都当成它的子节点，JS 查不到元素、CSS 样式失效、屏幕阅读器结构错乱。常见现象是版权文字出现在 header 里，或整段正文塌陷进页脚区域。
它必须作为 <body> 的直接子元素（全站页脚），或嵌套在 <article>/<section> 内（局部页脚）。别塞进 <main> 里——<main> 默认有 margin 和 display 行为，会截断 <footer> 宽度，导致视觉错位。
-
<body><main></main><footer>© 2026</footer></body>✅ 正确 -
<body><main><footer>© 2026</footer></main></body>❌ 语义错误，这是 main 的页脚，不是全站的 -
<footer>© 2026</footer>（漏闭合）❌ 后续所有内容都会被吞进去
版权文字该用 <small> 还是直接放 <footer> 里
<small> 不是“字体小”，而是 W3C 明确定义的“附属细则”语义，专用于法律条款、版权声明、备案号这类次要但需保留的信息。它和 <footer> 是互补关系，不是替代关系。
纯版权行建议用 <small> 包裹；如果页脚里混着导航链接、联系方式、隐私政策等不同层级内容，<small> 能明确区分主次。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 单行版权：
<footer><small>© 2026 My Site. All rights reserved.</small></footer> - 多条版权（主站+子产品）：
<footer><small>© 2026 Main Site</small><small>© 2026 Product X</small></footer> - 别用
<small>包导航链接或邮箱——那些是主要可操作内容，不该弱化
让 <footer> 真正“贴底”的 CSS 关键点
只写 <footer> 不会让它自动停在视口底部。内容少时它悬在半空，内容多时才自然沉底。要实现“粘性底部”，得靠布局控制，不是定位技巧。
- 给
<html>和<body>都设height: 100%，再给<body>加min-height: 100vh和display: flex; flex-direction: column -
<main>必须存在，且设flex: 1（不能用<div>替代） -
<footer>放在<main>后、</body>前，作为最后一个子元素 - 避免用
position: fixed; bottom: 0——它会让 footer 盖住短页正文末尾，长页又悬在半空，打印和读屏体验全崩
动态年份更新的三种写法及取舍
年份要不要动态，取决于你的部署方式和兼容性要求。纯前端 JS 最简但有风险；服务端或构建时注入更稳；写死区间反而最省心。
- 前端 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 友好
最容易被忽略的是语义归属：<footer> 不是“页面最下方的视觉盒子”，而是“属于某个节根元素（如 <body> 或 <article>）的结尾信息”。放错位置，读屏器和搜索引擎就认不出它是全站版权。
