是 HTML5 语义化标签，用于标示与当前上下文相关的需注意内容（如搜索关键词），而非单纯样式控制；其默认黄色背景不可依赖，应通过 CSS 显式定义样式并兼顾暗色模式与可访问性。
用
直接说结论： 是 HTML5 的语义化标签，用于标示文档中“需要引起注意的、与当前上下文相关的部分”，比如搜索结果中的关键词、引用中的重点句。它默认浏览器会渲染为黄色背景，但这个样式不是固定的，也不该依赖它来“实现高亮效果”。
常见误区是把它当 用，结果在某些浏览器或深色主题下看不见，或者被 CSS 重置后完全失效。
- 它的语义是“暂存高亮”（如页面内搜索匹配项），不是“永久强调”
- 默认样式由用户代理（浏览器）提供，
mark元素本身不带强制颜色或背景 - 如果项目有统一高亮规范（比如蓝色底、圆角、文字加粗），必须显式写 CSS 覆盖
如何安全地用
真正可靠的做法：用 表达语义 + 自定义 CSS 控制视觉表现，同时兼顾可访问性和暗色模式。
推荐基础样式写法：
立即学习“前端免费学习笔记（深入）”；
mark {
background-color: #ffeb3b; /* 明确指定，避免依赖 UA 默认 */
color: #212121;
padding: 0.1em 0.3em;
border-radius: 3px;
box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
}
/ 暗色模式下自动切换 /
@media (prefers-color-scheme: dark) {
mark {
background-color: #ffca28;
color: #121212;
}
}
关键点：
- 必须声明
background-color和color，否则在禁用 UA 样式的环境（如某些邮件客户端、阅读模式）里会失效 - 加
padding和border-radius提升可读性，原生mark默认紧贴文字，边缘生硬 - 不要只靠背景色区分——色觉障碍用户可能无法识别，建议搭配轻微阴影或文字加粗（但需谨慎，加粗可能影响行高）
取决于你是否需要向机器/辅助技术传达“这是上下文相关高亮”。如果是搜索结果页、代码编辑器中的实时匹配、PDF 文本抽取后的关键词定位， 更合适；如果是 UI 上的固定强调文案（如“限时优惠”、“VIP 专享”），用 更准确。
错误用法示例：
欢迎加入我们的VIP 会员计划！
问题：这不是“当前上下文相关”的临时标记，而是营销文案的一部分，语义错位，屏幕阅读器可能误读为“此处有搜索命中”。
正确场景示例：
您搜索的关键词 “响应式” 在本文中出现 7 次。
此时 合理，因为它是动态生成的、与用户当前操作（搜索）强绑定的标记。
服务端/前端动态插入
关键词高亮常通过 JS 正则替换实现，容易忽略边界和转义，导致 DOM 损坏或 XSS。
- 别直接用
innerHTML = text.replace(...)，未转义的关键词可能含、&，造成标签闭合错误 - 关键词含正则元字符（如
.、*、?）必须先escapeRegExp()，否则匹配失败或越界 - 大小写敏感要明确控制：
new RegExp(keyword, 'gi')中的i标志不能漏，否则中文或全角字符匹配不到 - 避免嵌套：
abc再次高亮 “ab” 会导致非法嵌套，应先移除已有再处理
简单安全的高亮函数核心逻辑（仅示意）：
function highlightText(text, keyword) {
if (!keyword.trim()) return text;
const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const regex = new RegExp(`(${escapedKeyword})`, 'gi');
return text.replace(regex, '$1');
}注意：这个函数只处理纯文本，若 text 已含 HTML 标签，必须先解析 DOM 或使用更健壮的库（如 highlight.js 的 DOM 模式）。
最易被忽略的一点：高亮后， 内容若被复制粘贴，会带上标签，而多数场景期望只复制纯文本。如有此需求，得监听 copy 事件并清理剪贴板内容。
