标签需用 CSS 显式声明 background-color 和 color（如 mark { background-color: #ff9e44; color: #fff; }），推荐加类名区分语义（如 mark.warning），禁用嵌套，兼顾可访问性与深色模式。
用
是 HTML5 原生语义化标签，专用于标记文档中需要高亮的文本（比如搜索结果、关键词强调）。但它在不同浏览器里默认背景色不同：Chrome 用黄色，Firefox 用黄绿色，Safari 更浅——不能直接依赖默认效果。
必须用 CSS 覆盖 background-color 才能确保颜色一致。注意：不要只改 color（文字色）， 的核心视觉是背景，文字色需同步协调，否则可读性差。
- 务必写
mark { background-color: #ff9e44; color: #fff; }这类显式声明 - 避免只设
background（可能带默认内边距或圆角干扰） - 若项目用 CSS 重置（如 normalize.css），检查是否清除了
mark的默认padding或line-height
自定义
全站统一改 mark 样式看似省事，但实际易冲突：比如某处想用橙色标重点，另一处要蓝底白字标警告，全局样式无法区分。
更稳妥的做法是给 加 class，再针对性写 CSS：
立即学习“前端免费学习笔记（深入）”；
mark.warning { background-color: #e74c3c; color: #fff; }
mark.success { background-color: #2ecc71; color: #fff; }
对应 HTML 写成：危险操作 或 已生效。
- 不推荐用
style属性硬编码颜色（维护困难、无法复用） - 如果用 CSS-in-JS 或组件库，确保该元素的
mark标签未被父级样式意外覆盖（常见于富文本编辑器输出） - 移动端要注意背景色在深色模式下是否可读，必要时加
@media (prefers-color-scheme: dark)调整
标签本身不允许嵌套（HTML 规范限制），比如 前半段后半段 是无效结构，浏览器会自动修正为两个独立 。
如果需要多层语义（例如“整句重点”+“其中某个词特别关键”），只能退而求其次：
- 用
+自定义标签，配合 CSS 控制层级 - 用
data-*属性标记意图（如），再由 JS 动态加样式 - 避免强行用
套，会导致 DOM 结构异常、无障碍阅读器误读
无障碍和语义正确性比颜色更重要
仅靠背景色区分重点，在色觉障碍用户（如红绿色盲）眼里可能完全失效。WCAG 要求：高亮必须辅以其他视觉线索（如边框、图标、字体粗细）或明确语义。
本身有 ARIA 语义（相当于 role="mark"），但若你用 模拟高亮，就必须手动加 role="mark" 和 aria-label（例如 aria-label="重点内容"）。
- 别为了颜色炫酷牺牲可访问性：黄色背景配浅黄文字（#ffffcc + #ffcc00）对比度不足 3:1，通不过 WCAG AA
- 用工具验证：Chrome DevTools 的 Lighthouse → Accessibility 审计能查出对比度问题
- 真要动态改色（如主题切换），优先用 CSS 自定义属性（
--mark-bg），而非 JS 直接操作 style
