应使用语义化的 <footer> 标签包裹页脚内容，它可位于 <body> 级别或嵌套于 <article>/<section> 中，需包含实际内容（如版权声明、链接等），避免无意义符号、错误嵌套及纯样式化用法，并兼顾无障碍与SEO。
用 <footer> 标签包裹底部内容
HTML5 明确规定，页面或区块的页脚信息应该用 <footer> 元素标记，而不是用 <div class="footer"> 或 <div id="bottom"> 这类无语义写法。它本身不带默认样式，但能被屏幕阅读器识别、被搜索引擎理解结构。
常见错误现象：Element footer not allowed as child of element body in this context —— 这通常是因为把 <footer> 放在了 <header>、<main> 或 <article> 外面，但又不在合法的父容器中（比如直接放在 <body> 下其实是允许的；真正出错常因嵌套在 <p> 或 <span> 里）。
-
<footer>可以出现在<body>级别（整页页脚），也可嵌套在<article>或<section>内部（表示该区块的页脚，比如一篇文章末尾的作者和发布时间） - 不要用它放版权符号 © 单独一行——
<footer>是容器，里面得有实际内容，比如段落、链接、地址等 - 避免和
<address>混用：<address>专用于联系信息（且只能包含联系相关的内容），而<footer>更通用
版权信息写在 <footer> 里，但别只写年份
很多人只塞个 © 2024 就完事，这既不利于可访问性，也不符合语义规范。年份本身是数据，不是完整声明；单独一个符号对屏幕阅读器不友好。
使用场景：公司官网底部、博客归档页、文档站点页脚
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<p>© <time datetime="2024">2024</time> Your Company. All rights reserved.</p>——<time>提供机器可读的时间语义 - 如果年份要动态更新，JS 注入时注意别破坏
<time datetime>的格式，否则会影响 SEO 和无障碍支持 - 避免用
<small>包裹整个版权行来“视觉上变小”——它语义是附属细则，不是样式钩子；改用 CSS 控制字体大小
页脚定位别硬靠 position: fixed 或 absolute
很多开发者一想到“固定在底部”，立刻上 position: fixed，结果导致内容被遮挡、打印样式错乱、移动端视口计算异常。
性能 / 兼容性影响：fixed 定位会脱离文档流，触发重排；在 iOS Safari 中可能引发输入框弹起时页脚错位；打印 PDF 时经常消失。
- 优先用自然流式布局：确保
<main>有足够高度，<footer>跟在其后即可“沉底” - 需要粘性底部（始终在视口底或内容之后）？用 Flexbox：
body { display: flex; flex-direction: column; min-height: 100vh; }+main { flex: 1; } - 真要用 fixed，务必加
bottom: 0和width: 100%，并手动为<body>加padding-bottom避免内容被盖住
无障碍与 SEO 容易被忽略的点
页脚不是装饰区，它是辅助技术用户快速跳转的关键锚点之一。搜索引擎也会通过它判断站点权威性和更新频率。
常见错误现象：“跳至页脚”链接缺失、页脚内链接无描述性文字、用图片替代文字版权信息
- 必须提供
<a href="#footer">跳至页脚</a>，且<footer>要有id="footer"或role="contentinfo"（后者更语义化） - 所有链接需有明确目的，避免“点击这里”“了解更多”这类空泛文案；例如用
<a href="/privacy">隐私政策</a>而非<a href="/privacy">点击此处</a> - 避免在页脚堆砌关键词或隐藏链接——现代搜索引擎会把它当作垃圾信号处理
