<mark>标签用于语义化标记搜索关键词，需确保上下文匹配、避免XSS风险、显式定义样式并兼顾可访问性。
用 <mark> 标签凸显搜索关键词，核心是语义正确、安全插入、样式可控。它不是“加个黄底”的快捷方式，而是向浏览器、读屏器和搜索引擎明确传达“这段文本与当前搜索强相关”。
语义上：只在匹配上下文中用
用户搜“Vue”，页面中所有出现的“Vue”才应被 <mark> 包裹；不能用于按钮文案、标题副标或广告语。以下场景适用：
- 搜索结果页中动态标记用户输入的关键词（如
<p>关于 <mark>Vue</mark> 的安装指南</p>） - 文档引用中突出被检索的术语（如
<p>参见 <mark>第12条</mark> 相关规定</p>） - 代码示例里标出被修改的部分（如
const timeout = <mark>5000</mark>;）
安全上：绝不拼接 innerHTML
用户输入可能含 <script>、& 或正则元字符（如 .、*），直接字符串替换会引发 XSS 或 DOM 解析错误。正确做法是只操作纯文本节点：
- 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)遍历所有文本节点 - 对每个节点内容做
textContent.replace()，先转义关键词：keyword.replace(/[.*+?^${}()|[]\]/g, '\$&') - 匹配后创建真实 DOM 元素：
const mark = document.createElement('mark'); mark.textContent = matchedText; - 再用
textNode.replaceWith(mark)替换，不拼 HTML 字符串
样式上：必须显式声明，不可依赖默认
浏览器默认黄色背景在阅读模式、邮件客户端、暗色主题或高对比度设置下常失效。生产环境至少写死这些 CSS：
立即学习“前端免费学习笔记（深入）”；
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; }
}
细节上：注意匹配精度和可访问性
英文关键词建议加单词边界 防止误匹配（如避免“cat”匹配到 “education”）；中文无天然分词，需确保全角/半角一致，且不依赖 。同时检查文字与背景对比度 ≥ 4.5:1，保障色觉障碍用户可读。
