<mark>标签需重置样式以适配深色模式，应使用color-scheme声明并配合@media (prefers-color-scheme: dark)动态设置柔和背景色与高对比文字色，避免语义滥用。
HTML5 里用 <mark> 标注重点，但默认色在深色模式下几乎不可见
<mark> 是 HTML5 原生语义化标签，专用于高亮文本中需要引起注意的部分。但它在多数浏览器中的默认背景色是亮黄色（如 Chrome 是 #ff0），在深色背景（比如 background: #1e1e1e）下会严重过曝、发灰甚至完全看不清文字，不是“高亮”，而是“遮蔽”。
解决思路不是回避 <mark>，而是重置它的样式，且必须兼顾系统级深色模式检测：
- 用
color-scheme: light dark告诉浏览器该元素支持双模式渲染（否则部分浏览器可能忽略后续 media query） - 通过
@media (prefers-color-scheme: dark)单独定义深色模式下的background-color和color - 避免用纯白或纯黑作文字色——深色模式下
<mark>文字建议用#fff或#e6e6e6，背景用柔和的蓝/绿/紫系（如#2563eb20），别用#000或#ff0
为什么不能只靠 CSS 变量或 class 切换深色模式
仅靠 JS 切换 class（如 dark-mode）或自定义 CSS 变量，无法响应系统级主题变更（比如用户在 macOS 设置里临时切换深色模式，页面没刷新）。@media (prefers-color-scheme: dark) 是唯一能实时响应系统偏好变化的原生机制。
常见错误写法：
立即学习“前端免费学习笔记（深入）”；
.mark-dark { background-color: #374151; color: #f9fafb; }这种静态 class 方式在用户切换系统主题后不会自动更新，除非你额外监听 matchMedia 并手动 toggle class——增加复杂度且易漏掉首次加载判断。
正确做法是把所有颜色逻辑收归媒体查询内，例如：
mark {
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
mark {
background-color: #3b82f620;
color: #f9fafb;
padding: 0.1em 0.2em;
}
}
@media (prefers-color-scheme: light) {
mark {
background-color: #fef9c3;
color: #92400e;
}
}
<mark> 的语义边界：什么该标，什么不该标
<mark> 不是视觉强调工具，而是语义标记：它表示“在当前上下文中具有相关性或高优先级的内容”，比如搜索结果中的关键词、文档中被引用的段落、代码示例中被讲解的语法点。
以下场景**不该用** <mark>：
- 纯装饰性高亮（如标题副词加亮）→ 改用
<span class="highlight">+ 自定义样式 - 错误提示中的红色文字 → 应用
<span aria-live="polite">+ 错误色，保持可访问性 - 代码块内语法高亮 → 由
prism.js或highlight.js控制，不混用<mark>
滥用 <mark> 会导致屏幕阅读器重复播报“marked text”，干扰信息获取。
深色模式下标注的兼容性细节和坑
Firefox 对 color-scheme 的支持比 Chrome 晚几个版本（v93+ 才完整支持），旧版 Firefox 会忽略 color-scheme 声明但仍执行 media query，所以单独写 media query 更稳妥。
容易被忽略的三点：
-
background-color必须带透明度（如#3b82f620）或使用 rgba，否则在深色背景下与文字对比度不足；WCAG 要求文本与背景对比度 ≥ 4.5:1，可用浏览器 DevTools 的无障碍检查器验证 - 不要给
<mark>设border-radius过大（如4px以上），小字号文本（14px 以下）圆角会切割文字边缘，尤其在 Windows 渲染下明显 - Safari 在某些版本中对
<mark>的行高继承异常，建议显式设置line-height: normal或与父元素一致
深色模式适配不是加个 media query 就完事，关键在颜色值的选择逻辑和语义使用的克制——标得少，才标得准。
