应使用 <mark> 标记当前上下文中具有相关性或需视觉突出的文本，如搜索关键词、引用条款；它专为“高亮”设计，语义区别于强调重要性的 <strong> 和无语义的 <span>。
什么时候该用 <mark></mark> 而不是 <span></span> 或 <strong></strong>
当你要标记一段**在当前上下文中具有相关性或需要视觉突出的文本**（比如搜索结果中的关键词、文档中被高亮引用的部分），<mark></mark> 是语义最准确的选择。它不是强调重要性（那是 <strong></strong> 的职责），也不是通用容器（<span></span> 没有语义），而是专为“高亮”这个行为设计的。
常见误用：用 <mark></mark> 表示「重点提醒」「警告」或「强调结论」——这会破坏语义，影响可访问性（屏幕阅读器可能忽略或错误播报）和 SEO。
- ✅ 正确场景：用户搜索「JavaScript」后，页面中出现的「
<mark>JavaScript</mark>」 - ✅ 正确场景：法律条文引用中，被本次讨论特别指出的条款原文
- ❌ 错误场景：
<mark>注意：此操作不可逆！</mark>→ 应用<strong></strong>+ CSS 控制样式
<mark></mark> 的默认样式和自定义方式
浏览器对 <mark></mark> 有默认样式（通常是黄色背景 + 黑色文字），但这个样式不固定，且可能被用户代理样式表或系统配色方案覆盖（比如深色模式下部分浏览器会变浅黄甚至透明）。不能依赖默认外观做关键提示。
- 必须通过 CSS 显式定义
background-color和color，尤其要考虑对比度是否满足 WCAG 4.5:1 - 避免仅靠颜色区分信息（比如红/绿标记），需辅以图标、字体粗细或边框等其他视觉线索
- 若要移除默认背景，写
background-color: transparent，不要只写background: none（可能遗漏background-image等）
mark {
background-color: #ffeb3b;
color: #212121;
padding: 0.1em 0.2em;
border-radius: 2px;
}
嵌套、换行与空格处理注意事项
<mark></mark> 是行内元素，可以嵌套在 <p></p>、<div>、<code><li> 甚至 <blockquote></blockquote> 中，但要注意边界行为：
立即学习“前端免费学习笔记（深入）”；
- 不能直接包含块级元素（如
<div>、<code><p></p>），否则 HTML 解析会出错或自动修正结构 - 允许换行符和空格，但前后空白不会被渲染为可见间距；若需留白，用
padding - 多个相邻
<mark></mark>不会自动合并背景（比如<mark>a</mark><mark>b</mark>是两个独立高亮块），如需连续高亮，应包在同一个标签里
<p>这是 <mark>一个完整高亮短语</mark>，不是 <mark>一个</mark><mark>完整</mark><mark>高亮</mark><mark>短语</mark>。</p>
服务端渲染 / SSR 场景下动态插入 <mark></mark> 的风险点
如果后端或模板引擎根据关键词自动包裹 <mark></mark>，必须严格过滤内容，否则易引入 XSS：
- 原始文本中若含
、<code>>、"、'、&，未转义就直接插入<mark>...</mark>会导致标签断裂或脚本执行 -
前端 JS 动态高亮（如搜索高亮插件）同样需用
textContent设置内容，或对 HTML 字符做escape()处理，禁止直接innerHTML - 若高亮逻辑涉及正则匹配，注意
/g标志缺失会导致只替换第一个匹配项
真正容易被忽略的是：高亮后 DOM 结构变化可能影响已绑定的事件监听器（比如原 <span class="item"></span> 被替换成 <mark><span class="item"></span></mark>），事件委托需适配新层级。
