合规做法是用figure+figcaption包裹带来源的有序列表项，cite仅用于作品标题，禁用CSS伪造引用样式。
ol 标签本身不支持直接嵌入引用语义，强行把 blockquote 或 cite 塞进 li 里虽然能渲染，但会破坏结构可访问性与语义层级。真正合规的做法是：**用语义容器包裹整个列表块，再在需要标注出处的列表项内嵌套引用结构**。
用 figure + figcaption 包裹带来源的有序列表项
当某一个 li 内容本身是一段被引用的原文（比如摘录规范条文、法律条款），且需明确标注出处时，figure 是最合适的语义容器：
-
figure可作为独立内容单元，包裹整段引用文字 + 来源说明 -
figcaption必须放在figure内部末尾，天然支持跨行、混合格式（如“《GB/T 28827.3-2012》第5.2条”） - 屏幕阅读器会将
figure视为一个可跳转的语义区块，比纯div+p更可靠
示例：
<ol>
<li>系统应支持用户登录状态持久化。</li>
<li>
<figure>
<p>“所有认证令牌必须在服务端强制绑定设备指纹与IP地址。”</p>
<figcaption>摘自 OWASP ASVS v4.0 第3.2.5节</figcaption>
</figure>
</li>
</ol>
cite 不能直接放 li 里当作者名或 URL 用
很多人误以为 cite 是“引用来源”的万能标签，结果写出类似这样的代码：
<li>用户点击按钮后触发回调函数。<cite>https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener</cite></li>
这是错的——cite 只能用于作品标题（书名、文章名、标准编号等），不能放 URL、作者名、域名或完整句子。浏览器不会报错，但会误导辅助技术。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：把 URL 单独放在
a标签里，cite仅包裹标题部分，例如<cite>MDN Web Docs</cite> <a href="...">addEventListener 文档</a> - 如果出处是标准文件，优先用全称加版本号，如
<cite>ISO/IEC 27001:2022</cite>，而非缩写或链接文本 - 多个出处并列时，不要堆砌多个
cite，改用普通span+data-source属性存结构化数据
避免用 CSS 伪造引用样式替代语义标签
有人为了省事，直接给 li 加 text-indent 和引号伪元素，再塞个灰色小字写“来源：xxx”。这看起来像引用，实则：
- 对屏幕阅读器不可见，视障用户完全无法感知来源信息
- 搜索引擎无法提取结构化引用关系，影响内容可信度识别
- 打印或纯文本导出时，引号和灰色小字全部丢失
- 后续想用 JS 提取所有引用出处时，没有统一选择器可依赖
真要控制样式，应在保留 figure/figcaption 结构的前提下用 CSS 调整字体、颜色、缩进，而不是绕过语义去 hack 渲染效果。
多级有序列表中嵌套引用的注意事项
如果引用内容出现在子级 ol 的某个 li 中（比如步骤说明里的规范依据），要注意两件事：
- 不要把
figure直接放在ol外层——它必须严格嵌套在目标li内部，否则会打断列表计数逻辑 - 若该引用需要被脚本读取（如生成参考文献索引），建议给
figure添加data-ref-id="iso27001-5.2"这类属性，而不是依赖 DOM 位置推断 - 嵌套过深（如
ol > li > ol > li > figure）时，检查 CSS 的margin和padding是否导致视觉层级混乱，必要时用counter-reset重置编号
li 涉及外部依据，也值得用 figure + figcaption 明确标出——否则它只是普通文字，不是可验证、可追溯、可复用的引用。 
