HTML中mark标签颜色设置方法

在HTML中正确使用``标签不仅关乎视觉效果，更涉及可访问性、安全性与语义规范：必须同时显式设置`background-color`和`color`（仅改文字色无效），确保对比度≥4.5:1以满足WCAG AA标准，并通过`@media (prefers-color-scheme: dark)`适配深色模式；动态高亮时严禁直接拼接`innerHTML`，须用DOM方法或框架安全API防范XSS；最关键的是坚守语义——``专用于标识与当前上下文强相关的文本（如搜索关键词、引用重点），而非通用强调工具，滥用将削弱辅助技术体验并破坏文档结构。

直接改 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, '<mark>$&</mark>');

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