是唯一语义正确、原生支持且无障碍友好的高亮标签；其他方案如会导致语义断裂，丧失读屏器提示、SEO价值及邮件客户端兼容性，而深色模式下需显式设置背景色与文字色以满足可访问性要求。
<mark></mark> 是唯一语义正确、浏览器原生支持、无障碍友好的高亮方案；其他标签如 <span></span> 或 <strong></strong> 无法传达“上下文相关高亮”这层含义，纯靠 CSS 模拟会丢失读屏器提示和 SEO 价值。
为什么不能用 <span class="highlight"></span> 替代 <mark></mark>
语义断裂是核心问题。屏幕阅读器不会把 <span class="highlight"></span> 当作特殊内容播报，搜索引擎也不识别其强调意图。而 <mark></mark> 在 Chrome、Firefox、Safari 中都会被读作 “marked text”，部分辅助技术还会触发震动或音调变化。更实际的是：Outlook 邮件客户端会忽略所有自定义类样式，但保留 <mark></mark> 的默认背景（除非被全局 * { background: transparent } 清空）。
- 用
<span></span>+ CSS 意味着你主动放弃可访问性保障 -
<strong></strong>表达的是“重要性”，不是“匹配相关性”——搜索结果里标出用户输入的关键词，不是因为它重要，而是因为它被命中 - 若项目需兼容 IE8 及更早版本，
<mark></mark>确实不被识别，但此时应退回到<span role="mark"></span>+ CSS，而非直接用无语义的 class
直接写 <mark></mark> 为什么在深色模式下看不见
浏览器默认黄色背景（#ff0）在暗色主题下与深灰/黑色文字叠加，对比度常低于 WCAG 要求的 4.5:1，导致文字几乎不可读。更糟的是，Windows 高对比度模式会强制将所有背景设为纯黑，<mark></mark> 直接变“隐形”。
- 必须显式声明
background-color和color，不能依赖 UA 样式 - 至少加
padding: 2px 4px，原生<mark></mark>紧贴文字边缘，视觉上像墨水洇开 - 深色模式适配必须用媒体查询：
@media (prefers-color-scheme: dark) { mark { background-color: #ffca28; color: #121212; } } - 别写
background: none—— 它不清除background-image，应写background-color: transparent
JavaScript 动态高亮关键词时，document.querySelector('mark') 返回 null 怎么办
最常见原因不是 DOM 没加载完，而是根本没生成 <mark></mark> 标签：你用了 innerHTML.replace() 拼字符串，结果匹配的是 <span class="highlight"></span> 或其他模拟方案。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 检查 HTML 源码：真有
<mark></mark>开闭标签，还是只有 class 名？ - 大小写无关紧要（
<mark></mark>也能被选中），但 JS 字符串拼接时若漏了闭合，浏览器会自动修正，但querySelector仍可能找不到完整结构 - 动态插入后未触发重排（如用
textContent设置），<mark></mark>节点实际未挂载到 DOM 树中，可用node.isConnected判断 - 若用 Range API 包裹选区，确保调用
range.surroundContents(mark)后，mark已被插入文档流
多关键词高亮时出现嵌套 <mark><mark></mark></mark> 怎么破
这是典型排序错误。比如同时高亮 "JavaScript" 和 "Script"，若先匹配短词，就会把 "Script" 插入已包裹的 <mark>JavaScript</mark> 内部，造成非法嵌套。浏览器虽会自动展平，但语义已断裂，CSS 选择器失效，读屏器播报混乱。
- 关键词数组必须按长度降序排列：
keywords.sort((a, b) => b.length - a.length) - 正则匹配必须用
g和i标志，中文建议加u（/keyword/giu）避免 Unicode 分割问题 - 转义不能少：
keyword.replace(/[.*+?^${}()|[]]/g, '\$&')，否则用户搜a.b?c直接报错 - 永远只操作文本节点（
node.nodeType === 3），用document.createTreeWalker(element, NodeFilter.SHOW_TEXT)遍历，避开<code>、<script></script>等含 HTML 的节点
真正难的不是让字变黄，而是让 <mark></mark> 在 XSS 防御、DOM 结构安全、语义传达、可访问性对比度、深色模式适配这五层约束下不掉链子——漏掉任何一层，都可能让搜索页对盲人用户“静默”，或在 Outlook 里“完全透明”。
