<sup> 标签仅实现上标样式，不提供脚注功能；真正可用的脚注需用 <a href="#fn1"><sup>1</sup></a> 关联文末 id="fn1" 的脚注条目，并添加返回链接，同时避免空格换行，确保语义化与无障碍支持。
sup 标签本身不生成脚注，只负责上标显示
直接用 <sup> 写编号（比如 <sup>1</sup>）只是视觉上把数字变小、抬高，浏览器不会自动关联到文末的脚注内容，也不会跳转、不会读屏支持，更不满足无障碍要求。它只是个纯样式标签，不是脚注解决方案。
要实现可点击、可跳转的脚注，必须配合 id 和 href
真正可用的脚注需要语义化链接：正文用 <a> 包裹 <sup>，指向文末带 id 的脚注条目。
- 正文中写：
<a href="#fn1"><sup>1</sup></a> - 文末脚注写：
<p id="fn1">1. 这是脚注内容。<a href="#ref1">↩</a></p> - 返回链接（可选但推荐）：
<a id="ref1"></a>放在正文编号旁，或用<a href="#fn1">↩</a>放在脚注末尾
sup 里不要放空格或换行，否则会破坏对齐
<sup>1</sup> 没问题，但 <sup> 1 </sup> 或换行缩进会导致上标位置偏移、行高异常，尤其在段落密集处明显。常见错误是复制编辑器自动插入的全角空格或软回车。
- 正确：
<a href="#fn1"><sup>1</sup></a> - 错误：
<a href="#fn1"><sup> 1 </sup></a>（含 ） - 错误：
<sup>\n1\n</sup>（含换行）
现代替代方案：CSS 自定义上标 + aria-label 提升可访问性
如果想避免手写大量 id/href，可以用 CSS 的 vertical-align: super 模拟 <sup>，再通过 aria-label 告诉屏幕阅读器这是脚注编号。
立即学习“前端免费学习笔记（深入）”；
<span class="footnote-ref" data-fn="1" aria-label="脚注 1">1</span>
配合 CSS：
<pre class="brush:php;toolbar:false;">.footnote-ref { font-size: .75em; vertical-align: super; }</code></p>
<p>但这仍需 JS 或后端生成对应脚注块——<code><sup> 本身永远不解决“关联”问题，只是渲染手段。
脚注真正的复杂点不在怎么上标，而在如何保证编号唯一、跳转准确、返回可用、且不被搜索引擎或 RSS 抓取器误判为垃圾链接。手动维护时，id 重复或 href 拼错是最常被忽略的硬伤。
