HTML动态高亮需分场景选方案：须显式定义背景色与文字色，表格悬停需标准结构及tbody标签，移动端需touch事件模拟，持久高亮依赖JS状态管理，链接多行高亮用渐变背景加background-attachment: local。
HTML 动态高亮不是加个 <mark></mark> 或写个 :hover 就完事——它必须分场景选方案，否则在 Outlook、高对比度模式、移动端或深色主题下直接失效。
用 <mark></mark> 做关键词高亮，为什么页面上看不到黄底？
浏览器默认的 <mark></mark> 样式在真实环境中极不可靠：Windows 高对比度模式会强制清空背景、Outlook 邮件客户端忽略所有 UA 样式、CSS 重置（如 * { background: transparent }）也会让它变透明。
- 必须显式定义
background-color和color，不能依赖默认值 - 加
padding和border-radius，原生<mark></mark>紧贴文字边缘，易误读 - 别只写
background: none—— 它不等于background-color: transparent，可能残留background-image - 动态插入时，必须遍历文本节点（
node.nodeType === 3），不能直接操作innerHTML，否则会撕裂 DOM 或触发 XSS
tbody tr:hover 不生效，90% 是 HTML 结构或设备问题
纯 CSS 表格行悬停高亮，前提是标准表格结构和鼠标环境。触屏设备默认不触发 :hover，而 DOM 结构错一点就全白搭。
- HTML 中必须显式写出
<tbody>，哪怕浏览器自动补全了，<code>tbody tr:hover选择器也匹配不到 - Vue/React 渲染时，别用
<fragment></fragment>或包裹<tr>，必须保留 <code><tbody> 标签层级<li>移动端真机上 <code>:hover基本无效，得用touchstart/touchend模拟，且要加防抖（比如 150ms 延迟清除类） - 父元素若设了
pointer-events: none，或某处写了!important覆盖背景色，hover效果就彻底被压制 - 用
element.classList.add("is-active")显式标记，比toggle更可控（避免误点两次取消） - 按钮是动态插入的？改用事件委托：
document.addEventListener("click", e => { if (e.target.matches(".guide-btn")) { ... } }) - 多步骤指引中，别用按钮文本判断当前步（如
btn.textContent === "下一步"），优先用data-step="2"这类显式属性锚定状态 - 记得给元素加
tabindex="0"并监听Enter/Space键，否则键盘用户无法参与高亮流程 - 用
background: linear-gradient(to right, #ffeb3b, #ffeb3b) left bottom / 100% 6px no-repeat替代纯色背景 - 关键要加
background-attachment: local，让高亮条随文字滚动，而不是随容器 - 必须设
padding-bottom: 3px，否则高亮条紧贴基线，视觉上像没对齐 - 触屏设备上，
:hover不可靠，需用@media (hover: hover) and (pointer: fine)条件启用，再配合touchstart切换临时类
点击后要“一直高亮”，别指望 :active 或 :focus
:active 只在手指/鼠标按下的瞬间存在，松开即消失；:focus 在无键盘操作或 tabindex 缺失时也不稳定。持久高亮本质是状态管理，必须由 JS 控制类名。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
链接换行后背景断层，a:hover 不能只改 background-color
<a></a> 是 inline 元素，background-color 按每行“行框”渲染，多行必然断开。这不是 bug，是规范行为。
最常被跳过的环节是：没给初始状态设背景色就加 transition，或者忘了在深色主题里重写 <mark></mark> 的 color 值——这些地方一漏，高亮就在特定设备或配色下彻底消失。
