语义正确优先选 <footer>，整站版权放 <body> 直接子级的 <footer>；用 Flex 布局（min-height: 100vh + margin-bottom: auto）实现贴底不遮挡；年份用 JS 动态生成，链接加 rel="noopener"，文字用 clamp() 响应式控制。
底部版权栏用 <footer> 还是 <div>？
语义正确优先选 <footer>，但要注意它不是“页面最底下那个条”，而是“其父容器的页脚”。整站统一版权信息应放在 <body> 直接子级的 <footer> 里；若只是某区块（如文章区）的结尾说明，则用该区块内的 <footer>。误嵌套会导致屏幕阅读器误读、SEO 权重分散。
实际开发中更常见的是：<footer class="site-footer"> —— 既保语义，又方便 CSS 独立控制。
如何让版权栏始终贴底且不遮挡内容？
别用 position: fixed 或 absolute，它们会脱离文档流，容易盖住正文或导致滚动异常。推荐「Flex 布局 + auto margin」方案：
给 <body> 设 display: flex; flex-direction: column; min-height: 100vh;，再给主内容区（如 <main>）加 margin-bottom: auto;，最后 <footer> 自然沉底。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 兼容性好：Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+
- 无需 JS，无高度计算误差
- 内容少时版权栏在视口底部，内容多时随滚动到底部，不悬浮不遮挡
© 符号、年份自动更新、链接怎么写才规范？
年份别手写 © 2024 —— 项目维护半年后就过期。服务端渲染可直接注入当前年；纯静态页用内联 JS 最轻量：
<footer class="site-footer">
© <span id="year"></span> Your Site Name. All rights reserved.
</footer>
<script>document.getElementById('year').textContent = new Date().getFullYear()</script>
链接要加 rel="noopener"（如果 target="_blank"），公司名或品牌名建议包裹 <strong> 而非 <b>，符合语义优先原则。邮箱链接用 mailto: 即可，别裸露明文邮箱地址。
响应式下文字挤成一团？三个关键 CSS 控制点
小屏版权栏最常出问题是文字换行错乱、间距塌陷、链接点击热区太小。核心靠这三句：
-
font-size: clamp(0.75rem, 0.5vw + 0.6rem, 0.875rem);—— 流体字号，比媒体查询更平滑 -
line-height: 1.5;—— 防止多行文字粘连 -
a { padding: 0.25em 0.5em; border-radius: 2px; }—— 给链接可点击区域留够空间，顺便 hover 有反馈
别忘了给 <footer> 加 padding: 1rem 1.5rem;，否则文字紧贴边缘，在 iOS Safari 里显得廉价。
真正难的不是写出来，是每次改完模板都得检查 footer 是否还撑开、是否在 iOS 上触发了缩放、以及年份 JS 是否被 UglifyJS 误删了 getFullYear() 调用 —— 这些地方没报错，但一上线就露馅。
