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