是语义化高亮标签，用于标记与当前上下文相关、需引起注意的内容，如搜索关键词或法律条款焦点，而非样式容器；误用会破坏可访问性与语义。
mark 标签是语义化高亮，不是样式容器
的核心作用是标记文档中“需要引起注意的、与当前上下文相关的文字”，比如搜索结果中的关键词、引用中的重点句、或教学材料里的强调内容。它不是 的替代品，也不该用来实现任意颜色背景——浏览器默认用黄色背景+黑色文字，正是为了传达“这段被主动标出，有语义意义”。
常见误用包括：用 给按钮加背景、在 CSS 框架里覆盖成粉红/蓝底还声称“更醒目”。这破坏了可访问性（屏幕阅读器会读出 “mark” 角色），也混淆了语义意图。
什么时候该用 mark 而不是 span + class
判断依据只有一个：这段高亮是否承载内容含义，而非纯视觉装饰。
- ✅ 搜索页中用户输入的
"React"在返回结果里被标出 —— 因为它和查询行为直接相关 - ✅ 法律条文里引用条款时，把本次适用的款项目加
—— 表示这是裁量焦点 - ❌ 导航栏里给当前页菜单项加黄色底 —— 应该用
+ CSS - ❌ 文章标题旁加个“热”字标签 —— 属于状态标识，用
?更合适
mark 的样式控制与兼容性注意点
虽然可以重写 background-color 和 color，但要注意：
立即学习“前端免费学习笔记（深入）”；
- 别去掉
padding或设为0，否则文字贴边难读 - 避免使用低对比度配色（如黄底白字），WCAG 至少要 4.5:1
- Safari 对
的默认阴影渲染略宽，可用box-shadow: none统一 - IE 完全不支持
，若需兼容，得靠 JS 检测并 fallback 到带role="mark"的
mark {
background-color: #ffeb3b;
color: #212121;
padding: 0.1em 0.3em;
border-radius: 2px;
box-shadow: none;
}
配合 JavaScript 动态高亮文本的典型陷阱
用 JS 包裹匹配文本时，容易忽略 DOM 结构破坏和事件丢失问题。
- 别直接对
textContent做字符串替换再 innerHTML —— 会清空子元素、销毁绑定事件 - 推荐用
Range+document.createElement('mark')安全包裹 - 高亮后记得调用
window.getSelection().removeAllRanges()，防止拖选干扰 - 若目标文本含 HTML 实体（如
最简安全方案是用 highlight.js 或 mark.js 这类专库，它们已处理好节点分裂、嵌套规避和空格归一化。
