用于语义化高亮关键词，需显式设置样式确保可访问性，避免嵌套与滥用，并对用户输入做HTML转义防XSS。
直接用 包裹目标文本就能实现基础高亮，但要真正稳定、可访问、符合语义，得兼顾样式、安全和上下文。浏览器默认黄色背景只是起点，不是终点。
基础用法：语义优先，别当样式工具
关键词 这样的写法能立刻生效，但它的价值不在“变黄”，而在告诉屏幕阅读器、搜索引擎和开发者：“这段文字和当前场景相关”。比如搜索页中用户搜“表单验证”，页面里出现的三处“表单验证”就该用 标记——不是因为要醒目，而是因为它们是查询匹配结果。
- 别用它替代 或 ：强调重要性或语气变化，不是 的职责
- 别大段包裹：整段说明文字 削弱语义，也影响可读性
- 避免嵌套：外层内层 会破坏结构，多数浏览器会自动修正，但读屏器可能播报混乱
样式必须显式声明，不能靠默认
默认黄色在深色模式、高对比度设置、邮件客户端甚至某些阅读器中会失效或不可读。以下 CSS 是底线配置：
-
background-color: #ffeb3b—— 明确指定，不依赖 UA 样式 -
color: #212121—— 配对设置文字色，确保对比度 ≥ 4.5:1 -
padding: 0.1em 0.3em—— 避免文字紧贴边缘，提升识别度 -
border-radius: 3px—— 轻微圆角让视觉更柔和
深色主题下建议加媒体查询：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
@media (prefers-color-scheme: dark) {
mark { background-color: #ffca28; color: #121212; }
}
动态高亮关键词时，安全和准确缺一不可
用户输入的搜索词不能直接拼进 HTML 字符串，否则会触发 XSS 或 DOM 撕裂。正确做法是只操作纯文本节点，并做双重转义：
- HTML 转义：把
&、、"等转为实体，防注入 - 正则转义：把
.、*、(等元字符前加\，保匹配逻辑 - 按长度降序处理多关键词：先匹配 “JavaScript”，再匹配 “Script”，避免嵌套断裂
- 用
TreeWalker遍历文本节点，跳过、等元素，防止切开标签
适用场景有边界，滥用反而降低效果
第24条 在法律文档中引用条款，Vue 3 在技术文档中标注版本号，这类用法清晰传达“此处与上下文强关联”。但以下情况不适合：
- 广告标语如“限时抢购”——用
class="highlight"+ CSS 更合适 - 代码块内语法高亮——应由
内部的处理 - 临时调试标记——上线前必须清理，否则污染语义结构
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
