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