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> 是互补关系，不是替代关系。
纯版权行推荐：<footer><small>© 2026 My Site. All rights reserved.</small></footer>；多条版权（主站+子产品）可并列多个 <small></small>；但别用 <small></small> 包导航链接或邮箱——那些是主要可操作内容，不该弱化。
常见错误是把整段 © 2026 MySite 塞进 <small></small>，结果屏幕阅读器可能跳过、SEO 工具无法识别主体、无障碍检测标为“语义误用”。
备案号和隐私政策链接必须带真实 href
国内合规要求页脚必须含三要素：© 符号、动态年份、主体名称、备案号。备案号必须是超链接，指向 https://beian.miit.gov.cn，不能只写号码；隐私政策、用户协议等也必须是真实可访问链接，不能是空 href="#" 或失效地址。
常见错误包括：
- 把 © 写成
(c)或 “Copyright”，语义和显示都不标准 - 年份写死为 “2024” 却已是 2026 年，没做动态更新
- 备案号用纯文本，没加
href="https://beian.miit.gov.cn" - 公司名含
&或"没转义为&或"，导致 HTML 解析异常
JS 动态更新年份时要注意降级
纯前端用 JS 更新年份最常用，但必须考虑 JS 失效场景：搜索引擎抓取、网络拦截、老设备不执行脚本——此时页面会显示空白年份或旧年份。
推荐写法：<footer><small>© <span id="year">2026</span> My Site</small></footer>，再配 JS：document.getElementById('year').textContent = new Date().getFullYear();
关键点：
- 静态年份必须作为回退内容存在，不能靠 JS 完全注入
- 别用
innerHTML直接覆写整个<footer></footer>，容易破坏已有结构或事件绑定 - 服务端渲染或构建时替换更可靠，比如 PHP：
© <?php echo date('Y'); ?>，或 Vite 插件替换{year}占位符
移动端小屏下长公司名+年份易折行，white-space: nowrap 配合响应式字体缩放比单纯居中更稳妥。
