footer标签不能放脚本，因其仅语义化承载元信息（如版权、作者、联系信息），嵌入会破坏结构语义、影响SEO与无障碍访问，且违反W3C规范。
footer 标签里**不能放脚本执行逻辑**，也不该包含 <script></script> 标签——它只负责语义化地包裹元信息，不是运行环境容器。
为什么 footer 里写 <script></script> 是错的
HTML5 规范明确将 footer 定义为“节段（section）或文档的页脚”，语义上仅承载与当前内容区块相关的**元数据**：作者、版权、修订时间、联系信息、法律链接等。插入 <script></script> 会破坏语义一致性，导致：
- 屏幕阅读器误判结构层级，把脚本当作可读内容播报
- 搜索引擎降低页面结构可信度，影响 SEO 权重分配
- W3C 验证器报错：
Element script not allowed as child of element footer in this context - 某些构建工具（如 Hugo、Jekyll 的静态生成阶段）可能跳过或剥离非法嵌套
footer 中哪些内容算“合法”
只要属于当前节段的附属元信息，都符合语义。常见合规用法包括：
- 版权年份和声明：
<p>© <time datetime="2026">2026</time> 我的网站. 版权所有。</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> - 作者与发布时间：
<address>作者：张三</address> <time datetime="2026-04-28">2026-04-28</time> - 法律类链接（需用
nav包裹）：<nav aria-label="页脚导航"><ul><li><a href="/privacy">隐私政策</a></li></ul></nav> - 联系方式（用
address标签）：<address><a href="mailto:contact@example.com">contact@example.com</a></address>
脚本该放哪儿才对
所有运行时逻辑必须脱离语义容器，按规范位置组织：
- 全局初始化脚本统一放在
底部（前），确保 DOM 已就绪 - 与页脚交互相关的逻辑（比如点击“回到顶部”按钮），应通过选择器绑定到实际元素，例如：
document.querySelector('.footer-back-to-top')，而非把<script></script>塞进footer - 如果使用模块化方案（ESM），脚本仍需独立引入，用
type="module"属性，不改变位置语义
真正容易被忽略的是：语义标签不是“视觉容器”，它的价值在解析层。哪怕你用 CSS 把 footer 挪到页面中间，它依然代表“该节段的元信息结尾”。脚本混进去，等于给机器读取器塞了干扰项。
