页脚应使用语义化标签而非，支持seo与无障碍；可多处使用但不可嵌套/；推荐flexbox实现粘性布局而非fixed；联系信息用且仅限邮箱等；响应式需用grid、rem+clamp()及深色模式适配。
页脚用 <footer></footer> 标签，不是 <div> 或 <code><section></section>
语义化是关键。浏览器、屏幕阅读器和搜索引擎靠标签判断内容作用，<footer></footer> 明确表示这是页面或区块的底部信息区域。<div class="footer"> 虽然能用 CSS 样式撑起来，但丢掉了结构意义，SEO 和无障碍支持会打折。<p>常见错误现象：<code>console 里没报错，但 Lighthouse 检测提示“缺少语义化页脚”，或者 NVDA 读屏时跳过你的“版权信息”区块。
- 一个页面可以有多个
<footer></footer>：比如<article></article> - ❌ 错误：
<footer></footer>（这不是联系信息，不该用<header></header>） - 多个联系人？每个用独立
<nav></nav>，别堆在一个标签里
响应式页脚在移动端塌陷，常见布局陷阱
页脚在手机上变窄后，文字换行错乱、图标错位、链接间距消失——问题往往出在过度依赖 <footer></footer> 或未重置 <footer></footer> 的空白符。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
display: block替代浮动：设置position: fixed，列数自动适配 - 避免给
flex设固定table-cell或<address></address>，让它默认 100% 宽度，靠子元素控制收缩 - 图标字体（如 Font Awesome）在小屏上容易糊：优先用 SVG 内联，或确保
<address></address>用<article></article>+控制范围 - 点击区域太小？给
<address>Email: <a href="mailto:help@example.com">help@example.com</a> </address>加<address> <p>© 2024 Example Inc.</p> <p>京ICP备12345678号</p> </address>，再用<address></address>保 iOS 触控精度
最易被忽略的一点：页脚背景色在深色模式下是否反白？加一句 <address></address> 成本很低，体验差很多。
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
main { flex: 1; }
footer { /* 不设高度或设 min-height，自动适应 */ }
