mark 是唯一正确选择，因其专为“上下文相关高亮”设计，携带语义且被辅助技术识别；span、strong、em 仅控制样式或语气，无此语义；必须用于搜索匹配、法律/教学重点、代码要点等场景，且需遵守嵌套、包裹范围及显式样式约束。
mark 是唯一正确选择，其他标签无法传达“上下文相关高亮”的语义。
为什么不能用 span、strong 或 em
它们只控制样式或表达语气/重要性，不携带“与当前上下文强相关”这一语义。屏幕阅读器不会特殊提示 span class="highlight"，搜索引擎也无法识别这是搜索匹配项或重点引用。而 mark 在辅助技术中可能被读作 “marked text”，是 HTML5 中唯一为此场景设计的原生元素。
什么时候必须用 mark 而不是视觉模拟
以下场景直接决定是否该用 mark：
- 搜索结果页中用户输入的关键词匹配（如搜索“表单验证”，页面中三处出现该词）
- 法律文档或教学材料里需要临时标出与当前段落逻辑强相关的句子
- 代码示例中指出某行语法要点（如
<mark>v-model</mark>） - 用户拖选一段文本后点击“高亮”，且需保留语义供后续导出或无障碍访问
如果不是以上情况，比如只是 UI 上加个色块强调按钮状态，就该用 span + CSS。
立即学习“前端免费学习笔记（深入）”；
嵌套、包裹范围和 DOM 位置的硬约束
mark 只能包裹纯文本或行内元素，禁止包裹块级结构：
- ✅ 合法：
<p>参考 <mark><code>fetch()</code></mark> API</p> - ❌ 错误：
<mark><div>一大段内容</div></mark>（破坏语义边界，部分浏览器解析失败） - ⚠️ 警惕嵌套：
<mark>外层<mark>内层</mark>文本</mark>语法合法，但语义模糊，多数情况下应避免 - ⚠️ 不要跨节点匹配：高亮“JavaScript”时，若原文是
<code>JS</code> and <code>Script</code>，强行合并为一个mark会撕裂 DOM 结构
样式必须显式声明，否则等于没写
浏览器默认黄色背景在暗色模式、高对比度设置、打印输出、邮件客户端中基本不可见。不写 CSS 就上线，高亮大概率失效：
- 必须设置
background-color和color，确保对比度 ≥ 4.5:1（可用 DevTools 的 Accessibility 面板验证） - 暗色模式需单独适配：
@media (prefers-color-scheme: dark) { mark { background-color: #ffca28; color: #121212; } } - 别写
background: none——它不清除background-image，应写background-color: transparent -
mark是行内元素，padding会影响行高，多行段落中建议加vertical-align: middle
最常被忽略的是打印样式：@media print { mark { background: transparent; } } 这一行不加，PDF 导出时满屏黄底。
