<mark>是唯一语义化标记“上下文相关高亮”的HTML元素，专用于搜索关键词、文档引用锚点、代码命中项等场景；禁用innerHTML.replace()、必须显式声明样式、禁止用于固定UI或嵌套。
mark 是语义标记，不是视觉快捷键
mark 的核心作用是告诉浏览器、读屏器、搜索引擎：“这段文本在当前上下文里相关，比如匹配了用户搜索词、被临时标注、或属于当前引用焦点”。它不表示“重要”（那是 strong），也不表示“强调语气”（那是 em），更不是为了省事套个黄色背景。如果只是想加个高亮样式，用 span + class 更安全、更可控。
哪些场景必须用 mark，哪些绝对不能用
必须用：mark 是唯一能正确传达“上下文相关高亮”的语义标签：
- 搜索结果页中，用户输入
"useState"，页面里所有匹配的useState文本需包裹为<mark>useState</mark> - 文档批注模式下，标出“待确认术语”，如
<p>请检查 <mark>package.json</mark> 中的字段名</p> - 代码示例中突出某变量名命中，如
const value = <mark>42</mark>;，且该标记需被辅助技术识别为“当前匹配项”
禁用场景：
- 按钮文案：
<button><mark>立即下单</mark></button>—— 这是固定 UI，无上下文依赖 - 整段警告文字：
<div class="alert"><mark>系统即将维护</mark></div>—— 该用strong或 role="alert" - 嵌套使用：
<mark>abc <mark>def</mark> ghi</mark>—— 语义混乱，CSS 难控制，读屏器可能误读
直接 innerHTML.replace() 包裹 mark 会出什么问题
这种写法看着快，实际踩坑密集：
立即学习“前端免费学习笔记（深入）”；
- XSS 风险：用户搜
"<script>alert(1)</script>"，拼进innerHTML就执行脚本 - DOM 结构破坏：原文本含
<strong>React</strong> Native，正则替换后变成<mark><strong>React</strong></mark> Native，mark错误包裹了整个strong元素 - 事件丢失：替换后整个节点重建，input 失焦、监听器失效、表单状态清空
- 中文标点粘连：搜
"Python"，却把"Python3"里的"Python"拆开或漏掉，因未处理词边界
正确做法是用 TreeWalker 遍历纯文本节点，或先提取 textContent，正则转义后替换，再用 document.createElement('mark') 安全插入。
mark 的默认样式根本不能信
浏览器 UA 样式只在部分环境生效，以下情况它会彻底消失或糊成一团：
- Windows 高对比度模式下，黄色背景常被强制抹除
- Safari 阅读模式、Outlook 邮件客户端，
mark可能完全隐形 - 某些 CSS 重置库（如 modern-normalize）会清掉默认
background-color
生产环境必须显式声明：
mark {
background-color: #ffeb3b;
color: #212121;
padding: 0.1em 0.25em;
border-radius: 2px;
}
@media (prefers-color-scheme: dark) {
mark {
background-color: #ffca28;
color: #121212;
}
}
最易被忽略的是 padding —— 不加的话背景紧贴文字，边缘生硬、可读性差，尤其小字号时几乎看不清高亮区域。
