HTML无原生<footnote>标签，真脚注必须用<sup><a href="#fn1">1</a></sup>与<p id="fn1">1. 内容<a href="#ref1">↩</a></p>锚点联动，配合CSS counters编号、:target高亮及语义化容器实现可跳转、可返回、无障碍、可打印的完整功能。
HTML 没有原生 <footnote> 标签，所有“脚注”效果都靠语义组合 + 锚点跳转实现；强行用 ::after 伪元素或绝对定位塞内容到底部，不是真脚注，也不支持点击返回、无障碍阅读和打印分页。
用 <sup> + id 锚点做可跳转脚注
这是最轻量、兼容性最好、也真正符合 HTML 语义的做法。核心是让正文里的上标数字能点开跳到底部对应内容，底部内容又能点回去。
- 正文中用
<sup><a href="#fn1">1</a></sup>，不是纯文本<sup>1</sup>—— 缺少<a>就无法跳转 - 页脚处用
<p id="fn1">1. 这是脚注内容。<a href="#ref1">↩</a></p>，id必须和href值严格一致（大小写敏感） - 返回链接的
href应指向原文位置，比如给上标加id="ref1"：<sup><a id="ref1" href="#fn1">1</a></sup> - 别用已废弃的
name属性（如<a name="fn1"></a>），HTML5 中只认id
CSS 控制脚注区域样式与布局
脚注内容通常放在 <footer> 或专门的 <section aria-label="Footnotes"> 里，而不是塞进 <div>。样式重点在隔离感和可读性，不是“看起来像 Word 脚注”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给脚注容器加
border-top: 1px solid #eee和padding-top: 1rem，比用margin-top更稳——避免外边距合并导致空白消失 - 脚注文字用
font-size: 0.875em、line-height: 1.6，别设太小（低于 12px 影响可读） - 如果页面有多个脚注，用 CSS counters 自动编号：
ol.footnotes { counter-reset: footnote; }+li::before { counter-increment: footnote; content: counter(footnote) ". "; } - 用
:target高亮当前激活脚注：p:target { background-color: #f8f9fa; }，提升跳转后的视觉反馈
为什么不用 position: absolute 或 ::after 模拟脚注
这类“视觉脚注”看似简单，但实际会破坏三个关键能力：跳转、回溯、可访问性。它们只是把文字压到底部，不是建立引用关系。
立即学习“前端免费学习笔记（深入）”；
-
article::after生成的内容无法被屏幕阅读器识别为“脚注”，也不会出现在文档大纲中 - 绝对定位的脚注在打印时大概率被截断，或出现在错误页码上
- 没有
id和href关联，键盘用户无法用 Tab 键聚焦跳转，违反 WCAG 2.1 - 当正文高度动态变化（如展开/收起内容），伪元素位置容易错位，且无法响应式重排
真正难的不是写出跳转链接，而是保持编号一致性、处理多脚注顺序、确保返回链路不中断——这些细节一旦漏掉，脚注就退化成装饰性文字。别为了省几行代码放弃语义和可用性。
