标签用于语义化高亮，表示内容在当前上下文中被突出标注，适用于搜索匹配、引文强调、教学标注三类场景；不可滥用或仅作视觉装饰，须保留其语义特性。
HTML5 的
它明确告诉浏览器和辅助技术：“这段文字在当前上下文中被**突出标注**”，比如搜索结果中的关键词、文档中需要强调的引用片段、或用户操作后动态标出的匹配内容。它的核心价值不在样式，而在语义—— 只是涂黄， 则表达“这是被标记的内容”。
什么时候该用
符合以下任一条件才推荐使用，否则用 、 或 CSS 更合适：
- 用户搜索后，页面中高亮显示匹配关键词（如搜索“React”后，文章里所有
React） - 引用他人文字时，标出你额外添加的强调部分（例如引文后加注：“如原文所述，
组件应保持无状态”）
- 教学/文档类页面中，用以标出代码示例里需要特别注意的某一行或某个变量名（如讲解
useState 时，把const [count, setCount] = useState(0)单独标出）
浏览器默认给 加黄色背景（background-color: #ff0），但这只是 UA 样式，不是规范要求。你可以用 CSS 覆盖：
mark {
background-color: #fff3cd;
color: #856404;
padding: 0.1em 0.2em;
}
但要注意：
– 不要写成 mark { all: unset; } 或彻底移除背景色，否则语义丢失，屏幕阅读器可能忽略其特殊含义；
– 避免仅靠颜色区分（如只用红色），需搭配足够对比度或额外视觉提示（如边框、字体加粗）以满足 WCAG；
– 如果只是临时交互高亮（如鼠标悬停某段落），用 JS 动态加 class 比硬塞 更合理。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：别把
常见误用包括：
- 在标题或导航栏里写
欢迎来到我们的网站
或 CSS - 全文大量使用，比如每段都标几个词，导致语义稀释，辅助技术无法识别重点
- 嵌套在
或内部（如console.log("hello");，且破坏代码块语义；应由代码高亮库自身控制渲染
真正需要 的地方其实不多，用错比不用更干扰理解。
