<mark> 是唯一传达文本与上下文强相关性的语义化元素，用于搜索匹配、引用片段、代码变量名等场景，不可替代 <strong> 或 <em>，且必须显式定义背景色、文字色、内边距及圆角，并适配深色模式。
标签不是“加个黄底”的视觉装饰，而是唯一向浏览器、搜索引擎和读屏器传达“这段文本与当前上下文强相关”的语义化元素。
语义核心：标出上下文相关性，而非强调重要性
它适用于搜索结果中匹配的关键词、引用里需特别指出的片段、教学文档中标注的代码变量名等场景。不能替代（表示重要性）或（表示语气变化），也不该用于固定文案如按钮文字或警告标语——那些属于UI表达，加反而会让辅助技术误判为“搜索命中”。
常见语义错位例子：
- 标题“表单验证指南”整段套——实际只应高亮用户搜索的“表单验证”四字
- 警告语“请务必验证！”被包裹——这该用或带class的警示样式
- 第3.2节出现在锚点说明中——此处是导航定位，非上下文相关标记
样式必须显式声明，不可依赖默认值
浏览器默认黄色背景在暗色模式、高对比度设置、邮件客户端或阅读模式下极易失效甚至完全隐形。生产环境至少要定义三项：
- background-color 和 color 必须同时设置，确保足够对比度（深色主题下建议#ffca28配#121212）
- padding 推荐 0.1em 0.3em，避免背景紧贴文字边缘
- border-radius 加 2–3px 圆角提升可读性；可选 box-shadow: inset 0 -2px 0 #007acc 增强视觉锚点
务必补充深色模式适配：
```css@media (prefers-color-scheme: dark) {
mark { background-color: #ffca28; color: #121212; }
}
动态高亮必须安全操作文本节点
直接 innerHTML.replace() 是高危写法：会撕裂 HTML 结构、触发 XSS、丢失事件监听器。正确路径是只操作纯文本节点：
- 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)遍历所有文本节点 - 跳过空节点（
node.textContent.trim() === ''） - 对关键词做双重转义：HTML 字符（& " ' ` = /）和正则元字符（.*+?^${}()|[]\）
- 匹配后创建
document.createElement('mark')，用node.parentNode.replaceChild()替换原节点
嵌套与兼容性注意事项
是内联元素，只能包裹纯文本或其他行内元素（如、），不能直接包 或。IE9+ 支持，但旧版 Android WebView 渲染不一致，务必覆盖样式。服务端渲染时需防 XSS，前端动态插入时禁用 innerHTML 拼接。
