和仅用于视觉上下标，不能单独构建注释系统；需结合锚点、/容器及CSS/JS实现完整注脚功能，是轻量替代方案。
HTML5 中的 <sub></sub> 和 <sup></sup> 标签本身**不能直接构建完整的注释引用与注脚系统**，它们仅用于呈现视觉上的下标和上标（如化学式 H2O、数学表达式 x2），不具备语义关联、跳转逻辑或内容折叠能力。要实现真正可用的“注释引用与注脚系统”，需结合其他 HTML5 语义元素（如 <aside></aside>、<footer></footer>、<section></section>）、属性（id、href）及基础交互（锚点链接），<sub></sub>/<sup></sup> 仅作为**可选的视觉标记方式**——比如把上标数字做得更小、略高，增强可读性。
用 <sup></sup> 做引用标记（视觉层）
将上标数字或符号作为正文中的引用标识，提升辨识度：
- 避免纯数字裸写（如 “见注1”），改用
<sup>1</sup>让其自动缩小并上移，符合出版惯例； - 可配合
aria-label提升无障碍支持，例如：<a href="#footnote-1" aria-label="查看第1条注脚"><sup>1</sup></a>； - 不建议用
<sup></sup>包裹整段说明文字（如<sup>参见《XX手册》第42页</sup>），这违反语义且影响可访问性。
用锚点 + <section></section> 或 <aside></aside> 构建注脚容器（结构层）
真正的注脚内容应放在文档末尾或侧边栏，使用语义化容器包裹，并通过 ID 关联：
- 在正文需要引用处插入带
href的链接：<a href="#fn1"><sup>1</sup></a>； - 在页面底部定义对应注脚块：
<section id="fn1" class="footnote"><p>此处为第1条注脚详细说明……</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12110" title="响应式烟草公司HTML5网站模板"><img src="https://img.php.cn/upload/webcode/000/000/003/178608513864290.jpg" alt="响应式烟草公司HTML5网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12110" title="响应式烟草公司HTML5网站模板">响应式烟草公司HTML5网站模板</a> <p>响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12110" title="响应式烟草公司HTML5网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></section>； - 推荐用
<aside role="doc-endnotes"></aside>包裹全部注脚（符合 WAI-ARIA 文档角色规范），比单纯用<div> 更语义清晰。 <h3>增强体验：简单 CSS 与可选 JS 补充</h3> <p>纯 HTML 锚点跳转足够基础使用，但可小幅优化体验：</p> <ul> <li>CSS 中可微调 <code>sup的垂直对齐与字体大小：sup { font-size: 0.75em; vertical-align: super; }； - 为注脚链接添加悬停样式（如加下划线或变色），提示可点击；
- 如需“点击展开/收起”或“悬浮显示提示框”，必须用 JavaScript 实现（
<sup></sup>本身无交互能力），此时建议用data-footnote属性存内容，避免重复 DOM。
替代方案：优先考虑 <details></details> + <summary></summary>（现代轻量选择）
对于行内简短注释，<details></details> 是更语义、更易用的原生方案：
-
<details><summary><sup>①</sup></summary>这是悬浮可见的注释内容</details>； - 无需 JS 即可展开/收起，兼容主流浏览器（Chrome 12+、Firefox 49+、Safari 15.4+）；
- 比锚点跳转更聚焦上下文，适合术语解释、缩写说明等非长篇注脚场景。
不复杂但容易忽略：语义结构决定可访问性与长期维护性，<sub></sub>/<sup></sup> 只是“怎么画得像”，而 <a></a>、<section></section>、<aside></aside> 才决定“它是什么、怎么用”。
