html无原生标签，真脚注必须用1与1. 内容↩锚点联动，配合css counters编号、:target高亮及语义化容器实现可跳转、可返回、无障碍、可打印的完整功能。

HTML 没有原生 <footnote></footnote> 标签，所有“脚注”效果都靠语义组合 + 锚点跳转实现；强行用 ::after 伪元素或绝对定位塞内容到底部，不是真脚注，也不支持点击返回、无障碍阅读和打印分页。

用 <sup></sup> + id 锚点做可跳转脚注

这是最轻量、兼容性最好、也真正符合 HTML 语义的做法。核心是让正文里的上标数字能点开跳到底部对应内容，底部内容又能点回去。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 正文中用 <sup>@#@#@#@#@#@#@#@#@#@0</sup>，不是纯文本 <sup>1</sup> —— 缺少 @#@#@#@#@#@#@#@#@#@1，id 必须和 href 值严格一致（大小写敏感）
• 返回链接的 href 应指向原文位置，比如给上标加 id="ref1"：<sup>@#@#@#@#@#@#@#@#@#@2</sup>
• 别用已废弃的 name 属性（如 <a name="fn1"></a>），HTML5 中只认 id

CSS 控制脚注区域样式与布局

脚注内容通常放在 <footer></footer> 或专门的 <section aria-label="Footnotes"></section> 里，而不是塞进 <div>。样式重点在隔离感和可读性，不是“看起来像 Word 脚注”。 <ul> <li>给脚注容器加 <code>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
• 当正文高度动态变化（如展开/收起内容），伪元素位置容易错位，且无法响应式重排

真正难的不是写出跳转链接，而是保持编号一致性、处理多脚注顺序、确保返回链路不中断——这些细节一旦漏掉，脚注就退化成装饰性文字。别为了省几行代码放弃语义和可用性。