页脚应使用语义化<footer>标签而非<div>，支持SEO与无障碍；可多处使用但不可嵌套<header>/<nav>；推荐Flexbox实现粘性布局而非fixed；联系信息用<address>且仅限邮箱等；响应式需用grid、rem+clamp()及深色模式适配。
页脚用 <footer> 标签，不是 <div> 或 <section>
语义化是关键。浏览器、屏幕阅读器和搜索引擎靠标签判断内容作用，<footer> 明确表示这是页面或区块的底部信息区域。<div class="footer"> 虽然能用 CSS 样式撑起来，但丢掉了结构意义，SEO 和无障碍支持会打折。
常见错误现象：console 里没报错，但 Lighthouse 检测提示“缺少语义化页脚”，或者 NVDA 读屏时跳过你的“版权信息”区块。
- 一个页面可以有多个
<footer>：比如<article>内部也能有自己的<footer>（用于作者、发布时间等） - 不要嵌套
<header>或<nav>到<footer>里——它们是同级语义容器，不是父子关系 -
<footer>默认是块级元素，无需额外设display: block
CSS 固定页脚到底要不要用 position: fixed
绝大多数情况下，**不要**。固定定位会让页脚始终贴在视口底部，遮挡内容、打断滚动流，尤其在移动端或小屏上极易误触或盖住表单按钮。
真正需要的是“粘性页脚”（sticky footer）：当内容少时沉底，内容多时随内容自然下推。主流做法是 Flexbox 布局：
立即学习“前端免费学习笔记（深入）”；
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
main { flex: 1; }
footer { /* 不设高度或设 min-height，自动适应 */ }兼容性注意：IE10+ 支持 flex，若必须兼容 IE9，得回退到 table-cell 或 JS 计算高度——但那已是边缘场景。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
页脚里放什么内容，<address> 标签怎么用才对
页脚核心职责是提供归属、联系、法律类元信息，不是放导航链接或产品推荐的地方。常见内容包括版权年份、公司名称、联系方式、备案号、隐私政策链接等。
<address> 是个常被误用的标签：它**只适用于最近的 <article> 或 <body> 的联系信息**，不能包整个页脚，也不能包邮箱链接以外的内容。
- ✅ 正确：
<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>，别堆在一个标签里
响应式页脚在移动端塌陷，常见布局陷阱
页脚在手机上变窄后，文字换行错乱、图标错位、链接间距消失——问题往往出在过度依赖 float 或未重置 inline-block 的空白符。
实操建议：
- 用
display: grid替代浮动：设置grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))));，列数自动适配 - 避免给
<footer>设固定width或max-width，让它默认 100% 宽度，靠子元素控制收缩 - 图标字体（如 Font Awesome）在小屏上容易糊：优先用 SVG 内联，或确保
font-size用rem+clamp()控制范围 - 点击区域太小？给
<a>加padding: 0.5rem 0.75rem，再用min-height: 44px保 iOS 触控精度
最易被忽略的一点：页脚背景色在深色模式下是否反白？加一句 @media (prefers-color-scheme: dark) { footer { background: #1e1e1e; color: #f0f0f0; } } 成本很低，体验差很多。
