HTML中没有\_SUP标签，必须用标准<sup>元素实现上标；脚注需结合<a href="#fn1"><sup>1</sup></a>与对应id锚点才能实现点击跳转。
HTML 中没有 _SUP 标签，用 <sup> 替代
浏览器根本不认识 _SUP —— 这不是标准 HTML 标签，写进去只会被忽略或当成普通文字。真要上标，必须用标准的 <sup> 元素。脚注编号、单位（如 cm2）、数学表达式（如 xn）都靠它。
常见错误是复制 Word 或某些 CMS 导出的伪标签，比如 _SUP(1) 或 [sup]1[/sup]，这些在纯 HTML 页面里完全不生效。
脚注编号 + 链接到文末说明，需要双向锚点
光有上标没用，用户点不了、跳不到对应解释。得让 <sup> 包裹的内容变成可点击链接，并指向页面底部（或侧边栏）的脚注全文。核心是 <a href="#fn1"><sup>1</sup></a> 配合 <div id="fn1">...。
-
href值必须以#开头，且与目标元素的id完全一致（区分大小写） - 脚注正文建议用
<ol>或<dl>组织，但id仍要设在具体条目上，比如<li id="fn1">此处是脚注1内容</li> - 别用
name属性做锚点（<a name="fn1"></a>），HTML5 已废弃，兼容性差
样式微调：避免上标挤占行高或颜色混淆
默认 <sup> 字体偏小、位置偏高，但可能和周围文字基线对不齐，或点击区域太小。加几行 CSS 能明显改善体验：
sup {
font-size: 0.8em;
line-height: 0;
vertical-align: super;
position: relative;
top: -0.2em;
}
关键点：
-
line-height: 0防止上标拉高整行高度（尤其多行段落里） -
vertical-align: super是基础对齐，top: -0.2em微调垂直位置，不同字体需实测 - 如果脚注链接用了默认蓝色下划线，建议单独重置：
a sup { color: inherit; text-decoration: none; }
动态脚注（如 React/Vue）要注意 ID 唯一性和渲染时机
服务端渲染或静态页里，id="fn1" 写死没问题；但前端框架生成脚注时，多个组件实例可能重复输出相同 id，导致链接总跳到第一个匹配项。
解决方法：
- 用唯一前缀拼接 ID，比如
id={`fn-${uuid}-1`}，配合链接href={`#fn-${uuid}-1`} - 确保脚注容器（如
<footer>）在 DOM 中真实存在且已挂载，否则scrollIntoView()或原生锚点跳转会失败 - 不要依赖
document.getElementById在组件初始化时查脚注节点——它可能还没渲染出来
脚注看似简单，但跨框架、跨设备、跨编辑器时，ID 冲突、样式错位、锚点失效这三类问题最常出现，检查时优先盯住控制台有没有 “Duplicate ID” 警告，再看链接 href 和目标 id 是否真的一致。
