是唯一语义化标记文本高亮的 html 标签，用于表达内容层面的强调而非纯视觉效果，正确场景包括搜索关键词高亮和代码关键改动标注，误用会导致可访问性缺失与语义混乱。
<mark></mark> 是 HTML 中唯一专用于语义化标记「文本高亮」的标签，不是样式工具，而是告诉浏览器和辅助技术：“这段文字在当前上下文中被突出标注过”。
什么时候该用 <mark></mark> 而不是 span + CSS？
核心判断标准：是否表达「内容层面的强调」，而非仅视觉变化。
- 搜索结果中高亮用户输入的关键词（如页面内搜索、服务端返回带匹配片段的 HTML）——
<mark></mark>正确，因为它是“被找到的那部分” - 代码示例里标出某行关键改动 —— 用
<mark></mark>，它比span更准确传达“此处被特意指出” - 只是想让一段文字变黄背景、无语义需求（比如设计稿要求某 slogan 做荧光效果）——别用
<mark></mark>，纯 CSS 控制更干净
<mark></mark> 的默认样式和可访问性影响
浏览器默认给 <mark></mark> 加黄色背景 + 黑色文字，但这只是 UA 样式，不影响语义。真正重要的是它对辅助技术的影响：
- 多数屏幕阅读器会读出 “marked text” 或触发特殊提示音（取决于设置），用户能感知到这是被标注内容
- 如果用
span模拟高亮却没加role="mark"，辅助技术完全无法识别其意图 - 不要重置
<mark></mark>的background-color为透明或与正文一致——等于主动丢弃语义
常见误用：嵌套、样式覆盖和 SSR 场景
容易踩坑的地方不在写法多难，而在忽略上下文约束：
立即学习“前端免费学习笔记（深入）”；
-
<mark></mark>可以嵌套，但没实际意义；语义上一次标注就够了，嵌套反而干扰解析 - 用
!important强行覆盖<mark></mark>默认背景时，记得同步调整color，否则可能在深色模式下文字不可读 - 服务端渲染（SSR）时若动态插入
<mark></mark>，需确保前后端解析一致；React/Vue 中直接插字符串易导致 XSS，应走安全的 DOM 渲染路径（如dangerouslySetInnerHTML配合转义）
真正麻烦的从来不是怎么写 <mark></mark>，而是决定哪段文字值得被它“认领”——语义一旦错配，修复成本远高于样式重构。
