脚注应靠近正文引用点并用语义化结构实现，侧边注解宜用独立呈现；脚注区域推荐，需aria-labelledby关联上标；避免div模拟脚注，须用sup与ol/li加返回链接；text-indent与margin配合优化段落呼吸感；响应式下aside需降级为后置说明并确保锚点准确定位。

用 @#@#@#@#@#@#@#@#@#@0

确保每个 id 唯一，且 href 与目标 id 严格匹配（注意 fn1 vs fn-1）

不要省略返回链接，否则键盘用户无法回退

text-indent 和 margin 配合 <p></p> 控制长文本呼吸感

脚注和侧边注解常被塞进窄列，此时段落缩进和间距更关键：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 主文段落用 text-indent: 2em + margin: 1.4em 0，避免首行缩进与段间距冲突
• 脚注条目用 margin-bottom: 0.8em，比正文紧凑但保持可读性
• 侧边注解的 <aside></aside> 内部段落建议取消首行缩进（text-indent: 0），改用 padding-left 或边框视觉区隔
• 所有段落统一设置 line-height: 1.6，防止小字号脚注文字挤成一团

响应式下侧边注解易失效，必须设降级方案

在移动端，<aside></aside> 很可能被压到主文下方，若没提前声明 fallback 行为，用户会找不到注解。不能只靠 CSS float 或 position: sticky：

• 用媒体查询将 <aside></aside> 设为 display: block 并加 margin-top: 1.5em，明确它在小屏就是“后置说明”
• 给侧边注解标题加 <h3 class="aside-title"></h3>，方便用户快速识别上下文
• 避免在 <aside></aside> 里嵌套复杂表格或浮动元素——它们在窄屏中极易错位或溢出
• 测试时重点看 iOS Safari 和 Android Chrome 下锚点跳转是否仍准确定位到脚注项

脚注编号一致性、侧边注解的 DOM 位置、以及小屏下跳转锚点偏移，这三处最容易被忽略。尤其当脚注内容含 <pre class="brush:php;toolbar:false;"></pre> 或图片时，高度计算偏差会导致滚动定位不准。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！