footer标签本身不控制位置，必须配CSS才能贴底；需用flexbox布局：body设min-height:100vh和display:flex，main设flex:1，footer作为body最后一个子元素即可实现粘性底部。
footer标签本身不控制位置，必须配CSS才能贴底
很多人写完 <footer>© 2026 MySite</footer> 发现它浮在内容下方、离视口底部一大截——这不是标签写错了，是没告诉浏览器“该占多高”。<footer> 只是语义容器，渲染行为和 <div> 一样，默认按文档流排列。页面内容短时，它就停在内容末尾；内容长时，才自然沉到底部。真要“粘性底部”，得靠 CSS 主动撑开空间。
关键约束有三个：
– body 必须设 min-height: 100vh，否则 flex 布局无高度基准
– 主内容区（推荐用 <main>）必须设 flex: 1 或 flex-grow: 1
– <footer> 必须是 body 的最后一个直接子元素，顺序错一个，整个布局就失效
用 flexbox 实现粘性底部最稳，别碰 position: fixed
给 body 加 display: flex; flex-direction: column，再让 <main> 吃掉剩余空间，<footer> 就会自动卡在视觉底部。这种方案兼容 Chrome 29+ / Firefox 20+ / Safari 9+ / IE11，且不影响打印、屏幕阅读器和 SEO。
反例 position: fixed; bottom: 0 看似省事，实际埋坑：
– 页面内容比视口短时，footer 盖住正文最后一段
– 页面内容比视口长时，footer 悬在半空、不随滚动到底
– 打印预览里 footer 会重复出现在每一页底部
– 屏幕阅读器可能跳过它，或误判为悬浮控件
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<body style="display: flex; flex-direction: column; min-height: 100vh;">
<header></header>
<main style="flex: 1;"></main>
<footer style="text-align: center; padding: 1rem 0; background: #333; color: #fff;">
© 2026 MySite. All rights reserved.
</footer>
</body>
文字居中却偏左？检查 footer 宽度和父容器边距
加了 text-align: center 还是左偏，大概率不是样式没生效，而是 <footer> 本身没占满整行。常见干扰源：
– body 或 html 有默认 margin（尤其用了 Normalize.css 却忘了重置）
– 包裹 <footer> 的外层容器设了 max-width 或 margin: 0 auto
– <footer> 里放了多个块级 <div>，指望 text-align 把它们一起居中（不行，得用 display: flex; justify-content: center）
快速验证方法：
– 给 <footer> 加 outline: 1px solid red，看红色框是否铺满整行
– 临时删掉所有外层容器，只留 <body> → <footer> 结构，观察是否恢复正常
版权年份别用 JavaScript 动态生成
用 new Date().getFullYear() 渲染年份，对爬虫、JS 禁用用户、静态站点生成器都不友好。Google Rich Results 测试工具会把年份当占位符忽略，备案信息可能被判定为不完整。
更可靠的做法：
– 构建时用 Webpack/Vite 插件或后端模板（如 Nunjucks、Jinja）注入当前年份
– 写死年份（如 © 2024–2026 MySite），每年手动更新一次
– 如果必须动态，至少 fallback 到静态文本：<span id="copyright-year">2026</span> + JS 尝试替换，失败也不崩
另外，rel="license" 要慎用：只有链接指向真实可访问的许可证文件（如 https://spdx.org/licenses/MIT.html）才有意义。指向 404 页面或纯文本“版权所有”会触发结构化数据警告。
