标签冲突源于语义误用：引用标注（作者主动标记原话重点）与搜索高亮（用户触发的动态匹配）目的、机制、可访问性传达均不同，须分层处理且不可嵌套。

标签本身不冲突，冲突来自误用——它只负责“上下文相关高亮”，不是“引用强调”或“视觉突出”的通用工具。真正的问题，是把语义不同的场景混在一起处理。

明确区分两类语义：引用标注 ≠ 高亮标记

引用标注（比如引述他人原话时标出重点）属于内容解释行为，本质是作者对引用内容的二次解读；而文本高亮（如搜索关键词匹配）是用户行为触发的上下文响应。两者目的不同、触发机制不同、可访问性传达也不同。

• 引用中的重点应由作者主动标记，且需保留在原始语境中，例如：

  他说：“性能优化必须前置”，而非事后补加。

• 搜索高亮是动态生成的，依赖用户输入，必须通过 JavaScript 安全注入，并向读屏器声明“这是本次查询的匹配结果”。
• 若同一段文字既被引用又含搜索词，只能包裹搜索匹配部分；引用重点应靠 或 + 注释说明，不可套用 。

嵌套使用时的优先级与 DOM 安全规则

HTML 允许 嵌套在

或 里，但禁止 包裹另一个 ，也不该出现在 内部作强调升级——这会混淆语义层级。

• 合法结构：

  文档指出useMemo 适合缓存计算结果。

• 错误结构：

  文档指出useMemo 适合缓存计算结果。

  （嵌套 mark，语义失效）
• 更错结构：

  注意：必须使用 useEffect 清理副作用

  （用 mark 替代 strong，丢失重要性语义）

冲突场景下的处理建议

当页面既要展示引用又要支持搜索高亮，需分层处理，不能让 JS 高亮逻辑覆盖语义结构。

• 静态引用内容预先用 标出作者认定的重点，样式独立控制（如浅蓝底）；
• 搜索高亮仅作用于纯文本节点，避开已有 、、<a> 等元素内部；</a>
• 若用户搜到的内容恰好落在引用的 范围内，不重复包裹——已有的 就是当前上下文的最高相关标记，无需叠加；
• 可通过 data-mark-context="quote" 或 data-mark-context="search" 区分来源，方便 CSS 或读屏器差异化播报。

可访问性层面的冲突规避

读屏器对 的播报是固定的：“被标记的文本”，不会自动附加“来自引用”或“来自搜索”。所以语义冲突最终会变成信息丢失。

• 避免让屏幕阅读器听到连续两个 ，例如“被标记的文本，被标记的文本”；
• 引用重点建议配合 aria-label="引用中强调的技术要点" 显式说明意图；
• 搜索高亮必须用 TreeWalker 遍历文本节点实现，确保只在真实匹配处插入 ，不破坏原有语义节点。