是 html5 语义化标签，用于标示文本中与当前上下文特别相关的词或短语，如搜索高亮、法律条款、教学示例等；须包裹纯文本、转义用户输入、正则转义特殊字符、避免跨标签匹配；需用 css 显式定义样式并适配深色模式；不可用于广告标语、语法高亮或纯装饰性强调。
直接用 <mark></mark> 标签包裹重点词汇就行，这是 HTML5 原生的语义化方式，既清晰又可靠。
什么时候该用 标记重点
它不是“加粗”或“变色”的样式工具，而是告诉浏览器和辅助技术：“这个词在当前上下文中特别相关”。典型场景包括：
- 用户搜索后，在文章中高亮匹配的关键词（如搜索“响应式布局”，文中出现的这个词就用
<mark>响应式布局</mark>） - 法律、标准文档里被援引的具体条款（如
<mark>第24条</mark> 规定……） - 教学材料中标注示例代码里的关键变量名（如
const <mark>userConfig</mark> = {...}） - 引用他人文字时，指出你正在讨论的核心短语（如“正如报告指出：数据质量决定模型上限”）
怎么写才安全又规范
基础写法很简单，但几个细节容易出错：
- 只包纯文本——别把 HTML 标签塞进
<mark></mark>里，例如<mark><strong>重要</strong></mark>是无效嵌套，浏览器会自动修正 - 用户输入的内容必须先转义再包裹，防止 XSS：比如搜索词是
<script>alert(1)</script>，得先转成<script>alert(1)</script>，再套<mark></mark> - 正则匹配关键词时，要转义特殊字符（
.、[、+等），否则keyword = "a.b"会变成错误正则/a.b/g，应处理为/a\.b/g - 避免跨标签匹配，比如在
<p>见<em>附录A</em>说明</p>中搜 “附录”，不能直接替换整个 innerHTML，而应遍历文本节点单独处理
样式怎么调才好用
默认黄色背景在很多场景下并不合适，必须用 CSS 显式定义：
- 至少设置
background-color和color，不能依赖浏览器默认值 - 加点
padding: 2px 4px让文字不贴边，再加border-radius: 3px更柔和 - 深色模式下要适配：用
@media (prefers-color-scheme: dark)单独设背景为浅蓝/浅绿系（如#2563eb20），文字用#fff或#e6e6e6 - 确保文字与背景对比度 ≥ 4.5:1（可用 Chrome DevTools 的 Accessibility 面板检查）
什么情况不该用
它有明确语义边界，滥用反而降低可读性：
- 广告标语、标题副标这类固定强调文案——该用
<strong></strong>或自定义 class - 语法高亮（如代码块中的关键字）——应由
<code>内部的<span class="keyword"></span>处理 - 仅为了视觉装饰（比如让某句“看起来更醒目”）——没有上下文相关性，就失去使用
<mark></mark>的意义 - 大段文字或整段落——
<mark></mark>是行内元素，只适用于词、短语级别
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
