footer标签必须闭合，否则导致dom错乱、js获取失败、css失效；需正确嵌套于节根元素内，承载版权等元信息，语义明确且配合css实现贴底效果。
footer标签必须闭合，否则后续内容全被吞进去
浏览器解析时，<footer></footer> 是双标签，不写闭合会导致 DOM 树错乱。常见现象是：JS 里 document.querySelector('footer') 返回 null，CSS 的 margin-bottom 失效，甚至整段正文被当成 footer 的子元素渲染。
错误写法：<footer>© 2025 公司</footer>（后面没闭合）
正确写法：<footer>© 2025 公司</footer>
- 模板引擎（如 EJS、Django）中要注意变量插值是否意外截断了闭合标签，比如
<footer></footer>中copyright值含未转义的就会提前闭合 - 用 DevTools 检查 Elements 面板，确认
footer节点有明确起止，且父级结构符合预期
footer不能随便放，得看它“属于谁”
footer 不是视觉定位工具，而是语义归属标记。它绑定的是“最近的节根元素”（sectioning root），比如 、<article></article> 或 <section></section>。放错位置，语义就断了。
- 全站底部版权 → 放在
直接子级，且在或之后 - 某篇文章的作者/发布时间 → 放在对应
<article></article>内部最下方 - 某个
<section></section>下的“相关推荐”按钮 → 可以，但得确认这些按钮确实是该区块的收尾操作，不是通用导航 - 别把
<nav></nav>塞进<footer></footer>：页脚导航可以用<nav aria-label="页脚导航"></nav>，但主导航不属于任何区块的“结尾”，应独立存在
内容要匹配语义，不是所有底部文字都配叫footer
footer 应承载与所属区块直接相关的元信息：版权、作者、联系方式、文档修订时间、隐私政策链接等。广告、登录框、轮播 banner、客服按钮——这些都不是“结尾信息”，硬塞进去会误导读屏软件和搜索引擎。
- 联系信息建议用
<address></address>包裹，例如：<address>contact@example.com</address> - 版权文字可用
<small></small>，因为 HTML5 明确定义它为“附属细则”，语义更精准 - 需要无障碍支持时，在全局页脚加
role="contentinfo"，如：<footer role="contentinfo"></footer> - Lighthouse 检测提示“缺少语义化页脚”，往往是因为用了
<div class="footer"> 而非原生 <code><footer></footer>纯HTML不贴底，footer位置靠CSS配合
只写
<footer></footer>不会让它自动停在视口底部。内容少时，它会悬在半空；内容多时，它自然沉到底部。真要“始终贴底”，得靠 CSS 实现，比如 flex 布局或position: sticky。- 推荐方式：给
设display: flex; flex-direction: column; min-height: 100vh;，再给<main></main>加flex: 1，<footer></footer>就会自动撑到视口底边 - 避免用
position: absolute或fixed，容易遮挡内容或破坏滚动逻辑 - 如果用了
position: sticky，注意触发条件（如bottom: 0）在不同浏览器中的兼容性表现
最难的其实不是怎么写，而是每次加
<footer></footer>前，先问一句：删掉它，上面那段内容还完整吗？如果答案是否定的，那它大概率放对了。 - 推荐方式：给
