是HTML中唯一语义化标记“上下文相关高亮”的标签，用于搜索关键词、代码改动等场景，区别于仅视觉装饰的，确保屏幕阅读器和搜索引擎识别其语义。
mark 标签就是干这个的：用语义化方式标记一段文本，让浏览器默认渲染成黄色背景（类似荧光笔），且不改变文本结构或语义权重。
为什么不用 span + CSS 模拟？
能用 span 实现视觉效果，但会丢失语义——屏幕阅读器、搜索引擎、文档解析工具无法识别“这是被标记的相关内容”。mark 明确表达“这段文字在当前上下文中具有相关性”，比如搜索结果中的关键词、代码示例中被指出的语法点、对比文档里的变动部分。
常见误用：strong 或 em 被拿来当高亮用，这属于语义错配。前者强调重要性，后者强调语气，都不是“上下文相关标记”。
mark 的基础写法与浏览器默认行为
直接包裹文本即可生效：
<p>搜索结果包含 <mark>JavaScript</mark> 和 <mark>CSS</mark> 相关内容。</p>
浏览器默认样式等效于：
mark { background-color: yellow; color: black; }
注意三点：
- 默认颜色是
yellow，不是#ffff00或其他变体，不同 UA 可能有细微差异 - 不继承父级
font-size或line-height异常值，但会受color影响（所以黑色文字+黄色背景才清晰） - 嵌套合法：
外层内层文本，但语义上应避免无意义嵌套
自定义样式时最容易忽略的兼容性点
覆盖默认样式很常见，但以下细节常导致意外表现：
-
mark是行内元素，padding会影响行高，尤其在多行段落中可能撑开间距；建议用vertical-align: middle对齐 - 某些旧版 Safari（≤15.6）对
mark的border-radius渲染不一致，圆角可能被裁切，需加overflow: hidden或改用box-shadow模拟 - 如果重置了
background为none，又没设color，文字可能和背景色混在一起（比如深灰背景+默认黑字） - 打印样式表里，
mark默认仍带背景色，如需打印友好，应显式写@media print { mark { background: transparent; } }
和 PDF/Office 高亮的本质区别
Word、PowerPoint、SumatraPDF 的“高亮”本质是注释层或格式标记，可开关、导出、跨设备同步；而 mark 是 HTML 内容的一部分，一旦写入就固定存在，不可交互式关闭（除非 JS 动态移除）。它不保存用户操作痕迹，也不生成独立注释对象。
这意味着：做静态文档、SEO 友好页面、搜索关键词标亮时，mark 是首选；但要做协作批注、可编辑标注、带作者信息的高亮，就得靠 JS 插件或后端注释系统。
