footer元素必须闭合，应置于最近节根元素内，需CSS配合实现贴底，且须保持语义正确以确保SEO和可访问性。
footer 元素必须有闭合标签，不能只写 <footer>
HTML 中 <footer> 是双标签，单独写开标签不闭合会导致后续内容被浏览器误判为 footer 的子元素，布局错乱或样式失效。常见现象是整个页面底部塌陷、CSS margin-bottom 失效、或者 JS 获取 document.querySelector('footer') 返回 null。
- 正确写法：
<footer>版权信息</footer> - 错误写法：
<footer>（后面没闭合） - 如果用在模板引擎里（如 EJS、Django），注意变量插值后是否意外截断了闭合标签
footer 放在哪？别塞进 <main> 或 <article> 里
<footer> 语义上属于“其最近的节根元素（sectioning root）的页脚”，不是全局限定。这意味着：放在 <article> 内，它就是这篇文章的页脚；放在 <body> 直接子级，才是整页底部。
- 全站底部：放
<body>最末尾，</main>或</section>之后 - 文章底部：放
<article>内部最下方，和<header>对称 - 避免嵌套在
<main>里又想撑满全宽——<main>默认有display: block和内边距，footer 会受限
让 footer 始终贴底需要 CSS 配合，纯 HTML 不行
只写 <footer> 标签不会自动固定在视口底部。常见错误是以为加了标签就“到底部了”，结果内容少时 footer 悬在半空。
- 推荐方案：用 flex 布局控制
<body>，设min-height: 100vh+flex-direction: column，再给main设flex: 1 - 备选方案：CSS
position: sticky; bottom: 0，但只在容器有高度限制时生效，不适用于全页贴底 - 绝对定位
position: absolute; bottom: 0容易遮挡内容或脱离文档流，慎用
SEO 和可访问性容易忽略的点
搜索引擎和读屏软件依赖语义结构识别页面区域。<footer> 不只是视觉容器，它影响页面大纲（outline）和辅助技术导航逻辑。
立即学习“前端免费学习笔记（深入）”；
- 不要用
<div class="footer">替代<footer>——丢失语义，ARIA 屏幕阅读器不会将其识别为页脚区域 - 避免在
<footer>里塞大量交互控件（如登录表单、搜索框），它更适合版权、备案号、友情链接等低交互内容 - 如果页脚含链接，确保对比度达标（至少 4.5:1），否则 WCAG 检查失败
