最轻量且语义正确的脚注实现是用配合id/href锚点联动：正文用1，文末用1. 内容…↩，并确保id唯一、大小写一致。
<sup></sup> 标签本身不做脚注，只负责上标样式；真脚注必须靠 <sup></sup> + id/href 锚点联动实现，否则点击无效、屏幕阅读器读不出、打印时错位。
用 <sup></sup> + id 实现可跳转脚注
这是最轻量、兼容性最好、也真正语义正确的做法。关键不是“怎么写上标”，而是“怎么让上标能点、能跳、能回”。
-
<sup>1</sup>必须包裹在@#@#@#@#@#@#@#@#@#@0 - 文末脚注内容必须用带相同
id的块级元素承接，比如：<p id="fn1">1. 这是脚注内容。@#@#@#@#@#@#@#@#@#@1</p> - 正文中引用点建议加
id="ref1"，返回链接href="#ref1"才能精准跳回原位置 -
<sup></sup>内不能有空格或换行，<sup> 1 </sup>会导致垂直对齐偏移、行高异常
脚注容器该用 <footer></footer> 还是 <aside></aside>？
别用 <footer></footer> —— 它语义是“页面/章节的元信息（作者、版权、日期）”，不是“对正文的补充说明”。用错会误导屏幕阅读器和搜索引擎。
- 推荐用
<aside role="doc-endnotes"></aside>：W3C 明确定义role="doc-endnotes"表示“文档末尾的脚注集合”，无障碍支持完善 - 如果脚注只服务单一段落，可用
<section role="note"></section>就近放在段落后，而非硬塞到底部 - 避免纯
<div>：无语义，无法被辅助技术识别为脚注区域 <li>CSS 中给脚注容器加 <code>border-top: 1px solid #eee和padding-top: 1rem，比margin-top更稳，防止外边距合并导致空白消失 - 屏幕阅读器不读伪元素生成的序号，视障用户根本不知道这是第几条脚注
- 复制粘贴时，
::before生成的 “1.” 不会被复制，引用关系断裂 - 打印时部分浏览器忽略伪元素，导致 PDF 里脚注没编号
- 正确写法是：
<sup>1</sup>和<p id="fn1">1. 内容…</p>，再用 CSS 控制font-size、vertical-align等样式 - 若需自动编号逻辑（如批量生成），应在构建时或 JS 渲染阶段注入真实数字，而非依赖运行时 CSS 计数
-
<details></details>无法与正文建立跨文档锚点关系，不支持从脚注跳回原文任意位置（只能回到<summary></summary>所在行） - 学术写作中常需多处引用同一脚注（如“同上”），
<details></details>无法复用内容，只能重复定义 - 打印时默认展开，若未加
@media print { details { display: block; } }，可能撑破页边距 - 若坚持用它，至少保留
<sup><details><summary>1</summary>…</details></sup>结构，维持上标视觉习惯
编号用 CSS counter 还是手写数字？
必须手写数字进 HTML，counter 只能用于样式增强，不能替代语义编号。
为什么不用 <details><summary></summary></details> 替代传统脚注？
<details></details> 是合法替代方案，但适用场景不同——它适合“按需展开的补充说明”，不是“学术引用式脚注”。
最容易被忽略的是 ID 唯一性和大小写敏感性：href="#Fn1" 和 id="fn1" 不匹配，点击就失效；多人协作或 CMS 导出时，ID 重复极常见，上线前务必用浏览器控制台检查 “Duplicate ID” 警告。
