的语义是标出与上下文相关的文本,非单纯视觉高亮;须嵌套于有意义的上下文中,确保可访问性与CSS对比度达标,不可替代 作装饰用。

mark 标签不是“加亮色”而是“标出相关文本”
的语义是「突出显示文档中与当前上下文相关的部分」,不是视觉上的“高亮笔效果”。浏览器默认用黄色背景只是示意,实际样式应由 CSS 控制,且必须确保可访问性(比如色觉障碍用户依赖对比度,不能只靠颜色区分)。
- 别用
替代—— 语义丢失,SEO 和屏幕阅读器无法识别意图 - 搜索结果页中匹配关键词、文章中引用他人原话时的强调、代码示例里被指出的错误行,才是典型使用场景
- 若只是想加背景色而无语义需求,用
更合适
怎么写才符合 HTML5 语义规范
语义正确的 必须嵌套在有意义的上下文中,不能孤立存在。它不改变文本层级,也不影响段落结构,但需明确「为什么这段值得标出」。
- ✅ 正确:
根据《网络安全法》第21
- ✅ 正确:
我们坚持以人民为中心的发展思想。
立即学习“前端免费学习笔记(深入)”;
- ❌ 错误:
重要通知:系统将于今晚升级
(没上下文,纯装饰) - ❌ 错误:
(标题本身已是强调,产品优势
叠加冗余)
CSS 自定义 mark 样式要注意什么
浏览器默认 是黄色背景 + 黑色文字,但很多项目会重置。关键点不在“怎么改颜色”,而在“改完是否仍可读、是否破坏语义传达”。
- 必须保证文字与背景的对比度 ≥ 4.5:1(WCAG AA 标准),例如
background-color: #ffeb3b配深灰文字可以,但配浅黄文字不行 - 避免用
opacity或半透明背景,会导致文字发虚、屏幕阅读器可能跳过 - 不要给
加border-radius或阴影——这些纯视觉修饰会干扰语义聚焦 - 推荐最小化定制:
mark { background-color: #ffdd40; color: #212121; }
和 span / strong / em 混用时的边界在哪
和其它内联元素可以共存,但必须逻辑自洽。它的优先级低于语义结构(如 表达重要性),高于纯样式容器(如 )。
- ✅ 合理:
(既强调必要性,又标出关键词)该参数必填,否则接口返回 400。
- ✅ 合理:
(用户输入“admin”时触发权限校验。
表语气,标具体值) - ⚠️ 警惕:
API(无语义,包裹后反而稀释了的目的)
当成前端“高亮组件”的快捷写法,却忘了它本质是个**内容标注工具**。只要编辑者或 CMS 后台不能准确判断“此处是否真有上下文相关性”,就不该自动插入 。











