用标签加背景色最省事，但需注意Safari兼容性、文字可见性、避免全局污染、暗色模式适配；视频字幕背景色须用video::cue伪元素；搜索高亮必须安全处理文本节点以防XSS。
直接用 <mark></mark> 标签加背景色最省事
想快速给一段文字加黄色背景，<mark>关键词</mark> 就够了。浏览器默认渲染为黄色底+黑字，不用写任何 CSS，所有现代浏览器都支持。
但要注意：Safari 12 及更早版本会忽略未显式声明的 background-color，只显示默认黄底；如果父级设置了深色文字（比如 color: white），而你没设 color，文字可能不可见。
- 必须显式写
style="background-color: #ff6b6b; color: white;"才能确保跨浏览器一致 - 十六进制、RGB、英文名（如
lightcoral）都可用，但别漏单位（如px）或分号 -
padding: 2px 4px能让高亮更舒展，不是必须，但推荐加
mark 样式要避免全局污染，类名必须带前缀
项目里多处要用不同颜色高亮时，别直接写 mark { background-color: ... } —— 第三方库（比如 Markdown 解析器、UI 组件）也可能用 <mark></mark>，一改就全崩。
正确做法是定义带语义前缀的类，比如：
立即学习“前端免费学习笔记（深入）”；
mark.highlight-error { background-color: #fee2e2; color: #b91c1c; }
mark.highlight-success { background-color: #dcfce7; color: #166534; }
然后在 HTML 中用 <mark class="highlight-error">404</mark>。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 类名不带前缀（如
error）容易和团队其他 CSS 冲突 - 如果真要改全局
mark，上线前务必检查所有已存在的<mark></mark>是否仍符合业务语义 - 暗色模式需手动适配：
@media (prefers-color-scheme: dark) { mark.highlight-error { background-color: #7f1d1d; } }
视频字幕用 <track></track> 标签，不能直接设背景色
<track></track> 是纯元数据容器，不渲染，也不接受 style 或 class。你想给视频字幕加背景色，实际生效的是 WebVTT 文件里的 CSS 类，或通过 <video></video> 的 textTrack API 动态注入样式。
常见错误：在 HTML 里给 <track></track> 加 class="subtitle-bg" 或 style="background: black" —— 完全无效，浏览器会静默忽略。
- WebVTT 文件中可用
<v speaker></v>或<b></b>等内联标签，但背景色必须靠外部 CSS 控制 - 真正起作用的是
video::cue伪元素，例如：video::cue { background-color: rgba(0,0,0,0.7); padding: 2px 6px; } - 注意
video::cue不支持所有 CSS 属性（比如border-radius在部分浏览器中无效）
搜索高亮千万别用 innerHTML.replace()
用户搜 a.b?c，直接 new RegExp(keyword) 会因特殊字符报错；搜 <script>alert(1)</script> 可能触发 XSS；搜到 <code>console.log() 里，还可能把标签撕开，导致 DOM 解析失败。
安全做法只操作文本节点：
- 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)遍历纯文本节点 - 对每个节点的
textContent做匹配，关键词先双重转义：keyword.replace(/[&"'`=/]/g, c => `${c.charCodeAt(0)};`).replace(/[.*+?^${}()|[]\]/g, '\$&') - 匹配后创建
document.createElement('mark')，设textContent，再用node.parentNode.replaceChild(mark, node)
这一步最容易被跳过，但一旦上线，就是 XSS 漏洞或 DOM 崩溃的温床。
