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