Footer 标签是语义化结构容器，用于标识页面底部区域，不具存储功能；应包裹站点地图、社交链接、备案号等固定信息，置于 body 直接子元素或 article/section 内，提升可访问性与 SEO。
Footer 标签本身不用于“存储”信息，而是语义化地标识页面底部内容区域。它不保存数据，也不具备数据库或本地存储功能；它的作用是结构化展示站点地图、社交链接、备案号等固定页脚信息。
用 Footer 包裹页脚内容，提升可访问性与 SEO
将站点地图、社交图标链接、ICP备案号等统一放在 <footer> 元素内，有助于屏幕阅读器识别页面结构，也便于搜索引擎理解页面布局。
- 确保
<footer>是<body>的直接子元素，或嵌套在<article>/<section>内（表示该区块的底部） - 避免在
<footer>中放置主导航或重复的侧边栏内容 - 备案号建议用中文明确标注，例如：
京ICP备12345678号-1，并附上工信部链接
组织站点地图：用语义化列表呈现导航链接
页脚中的站点地图通常指精简版导航，不是 XML 站点地图文件（sitemap.xml）。可用无序列表分组呈现核心栏目：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 使用
<nav aria-label="页脚导航">增强可访问性 - 按逻辑分组，如“产品”“资源”“公司”“支持”，每组用
<section>或带标题的<div> - 避免堆砌所有页面链接，只放用户高频访问的 5–10 个关键入口
集成社交链接：图标+文字+无障碍描述
社交链接应清晰可点击，并对辅助技术友好：
立即学习“前端免费学习笔记（深入）”；
- 每个链接用
<a href="..."><span aria-hidden="true">?</span><span class="visually-hidden">关注我们的微博</span></a>结构 - 图标用 SVG 或字体图标时，务必添加
aria-hidden="true"，文字说明用 visually-hidden 类隐藏但保留给读屏器 - 链接目标建议加
rel="noopener noreferrer"（尤其外链），保障安全
合规展示备案号：位置固定、信息完整、链接有效
根据中国《非经营性互联网信息服务备案管理办法》，备案号须在网站底部显著位置标明：
- 放在
<footer>最底部，文字大小适中（不小于 12px），颜色与背景有足够对比度 - 格式示例：
© 2024 XXX公司. 京ICP备12345678号-1. <a href="https://www.php.cn/link/4dad75d2365dedf73aa94b7606de7426" target="_blank" rel="noopener">京公网安备 11010802012345号</a> - 若含公安备案号，需同步提供有效链接至公安部备案系统
