是HTML5语义化高亮元素，用于标识与上下文强相关的文本，适用于搜索关键词、引用重点、法律条目等场景，不可替代或，需注意嵌套限制、兼容性及XSS防护。
标签是HTML5中专用于语义化高亮文本的原生元素，它不只是“加个黄底”，而是明确告诉浏览器、搜索引擎和读屏器：“这段文字与当前上下文强相关”。比如用户搜索“表单验证”，页面中匹配到的词就该用包裹，而不是随便套个class。
什么时候该用而不是其他方式
它适用于有明确上下文关联的临时强调场景：
- 搜索结果页中命中的关键词
- 引用他人原文时需特别指出的部分
- 法律条款或文档中用户当前关注的条目
- 代码示例里被指出的问题片段（如const x = ;）
别用它替代（表示重要性）或（表示强调语气），也不要用它做装饰性背景色——那该用配合CSS。
基础写法与常见误区
直接包裹即可生效：
立即学习“前端免费学习笔记（深入）”；
<p>本文介绍了 <mark>HTML5语义化</mark> 的核心实践。</p>
但要注意：
- 是内联元素，不能包裹
、
等块级标签- 不要嵌套，比如外层内层外层是无效的
- 避免大段包裹，如整段话都套会稀释语义，失去重点
- IE9+才支持，旧版Android WebView渲染可能不一致，建议始终自定义样式
动态高亮必须防XSS和DOM破坏
用户输入的关键词不能直接拼进HTML字符串，否则可能触发脚本执行或破坏结构。安全做法是：
- 只操作文本节点：用
TreeWalker遍历NodeFilter.SHOW_TEXT - 双重转义关键词：先HTML实体转义（
&→&），再正则特殊字符转义（.→\.） - 用
document.createElement('mark')创建元素，再用replaceChild插入，不碰innerHTML - 原始文本含
<code>console.log()时，确保高亮不撕裂标签结构
样式定制与可访问性要点
浏览器默认黄色背景在深色模式、高对比度设置下基本不可见，必须显式声明CSS：
- 至少设置
background-color和color，确保文字与背景对比度≥4.5:1 - 适配暗色模式：
@media (prefers-color-scheme: dark) { mark { background-color: #ffca28; color: #121212; } } - 别写
background: none——它不清除background-image，应写background-color: transparent - 色觉障碍用户依赖对比度，建议加轻微
box-shadow或padding辅助识别
