学术文章脚注必须用语义化HTML实现，即触发点与内容区通过id/href双向锚点配对，禁用硬编码和absolute定位，确保可访问、可打印、可复用。
学术文章脚注不能靠 <sup></sup> + 手动编号硬凑，否则引用跳转失效、重用困难、打印/导出时错位——必须用语义化 HTML + 原生交互机制实现可访问、可复用、可打印的脚注系统。
用 <aside></aside> + id/href 实现双向锚点
脚注本质是「正文触发点」和「注释内容区」的双向链接关系。<sup></sup> 只负责上标样式，不带语义；<aside></aside> 是 W3C 明确推荐用于旁注、脚注的语义容器。
实操建议：
- 每个脚注触发位置写成：
<a href="#fn1" id="fnref1" role="doc-noteref"><sup>1</sup></a>（role="doc-noteref"告诉屏幕阅读器这是注释引用） - 对应脚注内容放在文末
<aside role="doc-endnotes"></aside>内：<li id="fn1" role="doc-endnote">这里是注释文字... <a href="#fnref1" role="doc-backlink">↩</a> </li> - 必须配对
id和href，大小写、数字、连字符都要完全一致，否则点击无响应 - 不要用
javascript:void(0)或空href，会破坏键盘 Tab 导航和打印锚点
避免用 position: absolute 覆盖脚注区域
常见错误是把脚注内容用 CSS 绝对定位压在页面底部，看似“像 Word 脚注”，实则导致：打印时消失、屏幕阅读器无法朗读、移动端缩放后错位、CSS 未加载时内容不可见。
立即学习“前端免费学习笔记（深入）”；
正确做法是让脚注作为文档流自然排布：
- 把所有
<li role="doc-endnote">放在<aside role="doc-endnotes"></aside>中，该容器放在
