mark标签的核心价值在于语义传达而非黄色背景，它向浏览器、搜索引擎和辅助技术明确标识文本与当前上下文相关；默认样式不可靠，易受暗色模式、css重置、对比度不足等影响，且动态渲染、正则错配、中文分词等问题常导致dom查询失败或高亮错位。
不是。mark 标签的核心价值不在黄色背景，而在它向浏览器、搜索引擎和辅助技术明确传递“这段文本与当前上下文相关”这一语义。
为什么不能只靠默认黄色背景
浏览器默认给 mark 加黄色背景，只是用户代理（UA）样式的一种实现，它既不稳定也不可靠：
- 暗色模式下，部分浏览器会自动反转或弱化该背景，导致文字不可读
- CSS 重置库（如
normalize.css或classless.css）可能直接清空mark的background-color - 若未显式设置
color，黑色文字在深色背景上会丢失对比度，违反 WCAG 4.5:1 可访问性要求 - 依赖默认样式等于放弃控制权——你无法保证用户看到的“高亮”真的被识别为高亮
document.querySelector('mark') 返回 null 是怎么回事
常见于动态渲染场景，尤其是 SSR 或框架中未正确插入节点时：
- 服务端渲染后，
mark被当作字符串拼进innerHTML，但未经过 DOM 解析（比如 React 中误用dangerouslySetInnerHTML且未转义） - DOM 操作过程中，用
replaceChild替换文本节点时，若新节点未正确挂载，mark实际未进入文档流 - 脚本执行时机早于
mark插入完成，例如在DOMContentLoaded前就调用查询 - 关键词正则替换时误匹配 HTML 标签内容（如把
<div class="service"> 中的 <code>service高亮），导致解析失败或标签结构损坏中文搜索高亮容易错位的根源
中文无天然词边界，
/服务/gi这类简单正则会把“服务器”“微服务”全包进去，破坏语义和可读性：- 正确做法是用 Unicode 边界断言：
/(? - 必须跳过元素节点和注释节点，只处理
Node.TEXT_NODE，否则会丢失事件监听器、表单值等运行时状态 - 高亮前需用
getSelection().getRangeAt(0).cloneRange()缓存选区，否则replaceChild后光标位置彻底丢失 - 不要用
innerHTML +=拼接，它会触发整段重绘，且无法保留原有 DOM 属性和绑定
什么时候不该用
mark语义错配比样式难看更危险，以下情况请果断放弃
mark：- 纯装饰性需求：比如 slogan 文案加荧光效果，用
span+ CSS 更干净 - 语法高亮：代码块中的关键字应由
code内部的span和 class 控制，mark不参与语法分析 - 大段包裹：如
<mark><p>整段文字</p></mark>——mark是行内元素，不能包含块级内容 - 嵌套使用：如
<mark>外层<mark>内层</mark></mark>—— 语义冗余，辅助技术可能无法准确播报层级
真正麻烦的从来不是怎么写
mark，而是判断哪段文字值得被它“认领”。语义一旦贴错，后续所有样式、SEO、无障碍优化都得返工。 - 正确做法是用 Unicode 边界断言：
