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