mark标签本质是语义标记而非视觉装饰，必须显式定义background-color、color、padding、border-radius并适配深色模式，否则在高对比度模式、outlook邮件、css重置等场景下默认样式会失效。
mark 标签在文档结构中不负责“视觉主导”，它只负责声明「这段文本因当前上下文被临时标出」——浏览器默认给它加黄色背景，只是 UA 样式层面的善意提示，不是它的本质。
为什么mark的默认样式在很多场景下会失效
你写的 <mark>搜索词</mark> 在开发时看着好好的，上线后却突然看不见高亮，常见原因有：
- 用户启用了阅读模式（Safari/Edge），UA 样式被剥离，
mark变成纯文本 - 邮件客户端（如 Outlook）直接忽略所有 UA 样式，
mark的黄色背景彻底消失 - 系统开启高对比度模式（Windows），部分浏览器会强制重置
background-color为透明 - 项目用了 CSS reset 或 modern-normalize，悄悄清掉了 UA 的
mark样式
所以生产环境必须显式定义：background-color、color、padding、border-radius，缺一不可。
mark 的视觉表现必须配合暗色模式适配
硬写 background-color: #ffeb3b 在深色主题下会刺眼且可读性差，更糟的是文字可能完全糊掉。正确做法是用媒体查询主动切换：
mark {
background-color: #ffeb3b;
color: #212121;
padding: 0.1em 0.25em;
border-radius: 2px;
}
@media (prefers-color-scheme: dark) {
mark {
background-color: #ffca28;
color: #121212;
}
}
注意：不要依赖 color-scheme: light dark 声明去“触发”浏览器自动换色——它只影响表单控件和滚动条，对 mark 无效。
别把mark当视觉装饰工具用
如果你只是想让某段文案在 banner 里“看起来醒目一点”，或者给按钮加个荧光效果，mark 不是答案。它会被屏幕阅读器读作 “marked text”，而用户根本没在搜、没在审阅、也没上下文关联——这属于语义污染。
- 固定 UI 高亮 → 用
span class="highlight"+ CSS - 强调重要结论或警告 → 用
strong或aside+ role - 搜索关键词、引用锚点、代码修改标记 → 才轮到
mark
真正难的不是写对样式，而是每次加 <mark></mark> 前问一句：这个高亮，是给人看的，还是给机器读的，还是两者都得扛住？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
