国内网站页脚须用<footer>包裹，含可点击跳转至https://beian.miit.gov.cn的备案号（如京ICP备12345678号），版权信息用©及动态年份范围，结构用Flex布局确保响应式合规。
页脚HTML结构怎么写才合规
国内网站页脚必须包含备案号，且需可点击跳转至工信部官网；版权信息建议含年份范围和主体名称。结构上用 <footer> 语义化包裹，避免用 <div> 冒充。
- 备案号必须是真实有效的
京ICP备12345678号格式，不能虚构或省略“号”字 - 版权符号统一用
©，不要用图片或自定义字符 - 工信部链接必须是
https://beian.miit.gov.cn，且用target="_blank"新窗口打开 - 年份建议动态生成（如
© 2020–2024），静态写死易过期
备案号超链接的正确写法
很多开发者直接把备案号当纯文本放进去，结果被监管平台识别为“未有效链接”。必须用 <a> 包裹，且 href 值要精确匹配工信部校验规则。
- 链接地址必须是
https://beian.miit.gov.cn，http或带路径参数（如/portal/site/index）均无效 - 链接文字必须与备案号完全一致，包括空格、标点、大小写，例如：
<a href="https://beian.miit.gov.cn">京ICP备12345678号</a> - 不要加
rel="nofollow"，会影响监管系统爬虫抓取 - 如果使用CDN或代理，确保该链接在任意网络环境下都能直连（部分地区会拦截非备案域名跳转）
响应式页脚排版常见坑
小屏幕下文字挤成一团、备案号换行断裂、链接不可点——这些问题往往不是CSS没写好，而是HTML结构不合理。
- 避免用
<table>或浮动布局，改用 Flex：给<footer>加display: flex; flex-wrap: wrap; - 版权信息和备案号建议分两个
<p>，不要塞进同一个段落，否则移动端容易断开“京ICP备”和数字 - 字体大小别设死，用
rem或em，iOS Safari 对px小字号有最小渲染限制 - 备案号链接需有足够点击热区，
padding至少4px，否则触控易误操作
如何让备案号自动更新年份
手写 © 2024 每年都要改，漏改就成合规风险。服务端渲染项目可直接用后端变量，但纯静态页就得靠JS补位——注意执行时机。
立即学习“前端免费学习笔记（深入）”；
- 放在
<footer>底部的<script>中，用new Date().getFullYear() - 不要用
document.write()，它会清空整个页面 - 推荐写法：
document.querySelector('footer .copyright').textContent = '© 2020–' + new Date().getFullYear(); - 如果页脚被框架（如Vue/React）管理，优先在组件生命周期里更新，而非全局脚本
