使用HTML的
2026-05-12 14:08:43
0浏览
收藏
HTML的`
footer标签必须闭合，否则后续内容全被吞进去
浏览器解析时， 是双标签，不写闭合会导致 DOM 树错乱。常见现象是：JS 里 document.querySelector('footer') 返回 null，CSS 的 margin-bottom 失效，甚至整段正文被当成 footer 的子元素渲染。
错误写法：（后面没闭合）
正确写法：
- 模板引擎（如 EJS、Django）中要注意变量插值是否意外截断了闭合标签，比如
中copyright值含未转义的就会提前闭合 - 用 DevTools 检查 Elements 面板，确认
footer节点有明确起止，且父级结构符合预期
footer不能随便放，得看它“属于谁”
footer 不是视觉定位工具，而是语义归属标记。它绑定的是“最近的节根元素”（sectioning root），比如 、 或 。放错位置，语义就断了。
- 全站底部版权 → 放在
直接子级，且在或之后 - 某篇文章的作者/发布时间 → 放在对应
内部最下方 - 某个
下的“相关推荐”按钮 → 可以，但得确认这些按钮确实是该区块的收尾操作，不是通用导航 - 别把
塞进：页脚导航可以用，但主导航不属于任何区块的“结尾”，应独立存在
内容要匹配语义，不是所有底部文字都配叫footer
footer 应承载与所属区块直接相关的元信息：版权、作者、联系方式、文档修订时间、隐私政策链接等。广告、登录框、轮播 banner、客服按钮——这些都不是“结尾信息”，硬塞进去会误导读屏软件和搜索引擎。
- 联系信息建议用
包裹，例如：contact@example.com - 版权文字可用
，因为 HTML5 明确定义它为“附属细则”，语义更精准 - 需要无障碍支持时，在全局页脚加
role="contentinfo"，如： - Lighthouse 检测提示“缺少语义化页脚”，往往是因为用了
华为擎云推教育AI方案，鸿蒙大模型深入校园
- 上一篇
- 华为擎云推教育AI方案，鸿蒙大模型深入校园
- 下一篇
- draw.io制作思维导图教程
