HTMLmark标签背景色设置方法

在HTML中正确使用``标签远不止简单改变背景色，它要求开发者必须同时显式设置`background-color`和`color`以确保可读性与可访问性，严格满足WCAG AA级对比度（≥4.5:1），并主动适配深色模式；同时需规避XSS风险——绝不能通过`innerHTML`直接拼接用户输入，而应采用安全的DOM构造方式；更重要的是坚守语义本质：``专用于标识与当前上下文强相关的文本（如搜索关键词、引用重点），而非视觉装饰替代品，滥用将损害辅助技术体验与HTML语义完整性。

直接改 mark 的 background-color 才有效

浏览器对 mark 有默认样式：background-color: #ff0（亮黄）+ color: #000（黑字），但这个黄色只是示意，**不覆盖 background-color 就永远变不了色**。只设 color 不会改变高亮底色，文字可能糊在背景里——比如黄色背景上配浅黄字，根本看不见。

必须显式声明 background-color 和 color，且两者要形成足够对比度（WCAG AA 级建议至少 4.5:1）。示例：

mark {
  background-color: #e74c3c;
  color: #fff;
  padding: 2px 4px;
  border-radius: 2px;
}

• padding 和 border-radius 可安全加，提升可读性与设计一致性
• 避免用 margin：它是内联元素，垂直 margin 无效
• 别依赖浏览器默认值，哪怕只改一个属性也要全写，防止 CSS 重置或框架覆盖

mark 的 color 属性不是可选的装饰项

color 决定文字是否能被看清，不是“锦上添花”。比如深蓝背景（#0a2540）配默认黑字，对比度只有 1.8:1，完全不符合可访问性要求。实测中常见错误包括：

• 只设 background-color，忘了同步调 color
• 用纯灰（如 #666）配浅灰背景，色觉障碍用户无法识别
• 在深色模式下没适配，导致白字压在白色背景上（或黑字陷进黑色背景）

推荐做法是搭配 @media (prefers-color-scheme: dark)：

mark {
  background-color: #ffeb3b;
  color: #212121;
}
@media (prefers-color-scheme: dark) {
  mark {
    background-color: #ffc107;
    color: #121212;
  }
}

别用 innerHTML 直接拼接

用户输入或搜索关键词动态高亮时，常见错误是这样写：

element.innerHTML = text.replace(keyword, '$&');

这会引发 XSS 风险（如果 keyword 含