<mark>标签是HTML5新增的语义化标签，专用于标记与当前上下文相关的内容（如搜索关键词、引用重点、法律条款），需配合CSS定制样式以保障可访问性，不可用于纯装饰性高亮。
<mark> 标签是语义化标记高亮内容最直接的方式，但它不是“万能高亮按钮”——用错位置、忽略样式或混用场景，反而会让高亮失效或破坏可访问性。
什么时候该用 <mark> 而不是 CSS class？
它专为“文档中需要突出显示的、与当前上下文相关的内容”设计，比如搜索结果中的关键词、引用中的重点句、或用户当前关注的段落。不是所有“看起来要黄底”的地方都适合用 <mark>。
- ✅ 推荐：用户搜索后匹配出的关键词（
<mark>React</mark> 生态常用工具）</li> <li>✅ 推荐：法律条文中被援引的关键条款（<code><mark>第37条</mark> 规定……）</li> <li>❌ 避免：纯装饰性高亮（如标题副标、广告标语），应改用 <code>class="highlight"
+ CSS 控制 - ❌ 避免：动态 JS 插入大量
<mark>后又频繁移除，会触发 DOM 重排，卡顿明显
<mark> 的默认样式和必须覆盖的 CSS 属性
浏览器对 <mark> 有默认背景色（通常是黄色），但这个颜色在暗色主题、高对比度模式或印刷场景下可能完全不可读。
- 必须设置
background-color，不能依赖默认值 - 必须配对设置
color，否则深色背景上文字发灰看不清 - 建议加
padding: 2px 4px，避免文字紧贴边缘 - 可选
border-radius: 3px，但别超过4px，否则在小字号下圆角会吞掉文字 - 不要设
font-weight或font-size，它只是强调，不是结构层级变更
正则替换时容易踩的坑：转义 + 全局匹配 + 大小写
用 JS 动态插入 <mark> 时，如果直接拼接用户输入的关键词，keyword.replace(/abc/g, '...') 会崩在 +、.、( 这类正则元字符上。
- 必须先转义：用
keyword.replace(/[.*+?^${}()|[]\]/g, '\$&') - 必须加
gi标志：new RegExp(pattern, 'gi')，否则大小写不敏感就失效 - 避免跨文本节点匹配：一个
<p>里含<strong>，正则可能切开标签，导致 HTML 损坏 - 更稳妥的做法是用
TreeWalker遍历纯文本节点，再对每个节点做nodeValue替换
比 <mark> 更现代的选择：CSS Custom Highlight API
如果你需要高亮但不想污染 DOM（比如编辑器里多人协作标注、PDF 渲染页内搜索结果），CSS Custom Highlight API 是目前唯一无侵入方案，但注意兼容性：
- Chrome / Edge 105+ 支持完整，Firefox 需开启
layout.css.highlight-api.enabled标志 - Safari 完全不支持（截至 2026 年 4 月）
- 它不生成新元素，只靠
document.highlightRegistry.set()和::highlight()伪类联动 - 无法用 JS 直接获取高亮区域的
offsetTop等布局信息，调试困难
真正难的从来不是“怎么加黄底”，而是判断“该不该加”、以及“加完之后别人还能不能顺畅阅读”。<mark> 是语义锚点，不是视觉开关。
