应使用 标记当前上下文中具有相关性或需视觉突出的文本,如搜索关键词、引用条款;它专为“高亮”设计,语义区别于强调重要性的 和无语义的 。

什么时候该用 而不是 或
当你要标记一段**在当前上下文中具有相关性或需要视觉突出的文本**(比如搜索结果中的关键词、文档中被高亮引用的部分), 是语义最准确的选择。它不是强调重要性(那是 的职责),也不是通用容器( 没有语义),而是专为“高亮”这个行为设计的。
常见误用:用 表示「重点提醒」「警告」或「强调结论」——这会破坏语义,影响可访问性(屏幕阅读器可能忽略或错误播报)和 SEO。
- ✅ 正确场景:用户搜索「JavaScript」后,页面中出现的「
JavaScript」 - ✅ 正确场景:法律条文引用中,被本次讨论特别指出的条款原文
- ❌ 错误场景:
注意:此操作不可逆!→ 应用+ CSS 控制样式
的默认样式和自定义方式
浏览器对 有默认样式(通常是黄色背景 + 黑色文字),但这个样式不固定,且可能被用户代理样式表或系统配色方案覆盖(比如深色模式下部分浏览器会变浅黄甚至透明)。不能依赖默认外观做关键提示。
- 必须通过 CSS 显式定义
background-color和color,尤其要考虑对比度是否满足 WCAG 4.5:1 - 避免仅靠颜色区分信息(比如红/绿标记),需辅以图标、字体粗细或边框等其他视觉线索
- 若要移除默认背景,写
background-color: transparent,不要只写background: none(可能遗漏background-image等)
mark {
background-color: #ffeb3b;
color: #212121;
padding: 0.1em 0.2em;
border-radius: 2px;
}
嵌套、换行与空格处理注意事项
立即学习“前端免费学习笔记(深入)”; 这是 一个完整高亮短语,不是 一个完整高亮短语。 如果后端或模板引擎根据关键词自动包裹 真正容易被忽略的是:高亮后 DOM 结构变化可能影响已绑定的事件监听器(比如原 是行内元素,可以嵌套在 、 甚至 中,但要注意边界行为:),否则 HTML 解析会出错或自动修正结构
padding
不会自动合并背景(比如 ab 是两个独立高亮块),如需连续高亮,应包在同一个标签里服务端渲染 / SSR 场景下动态插入
的风险点,必须严格过滤内容,否则易引入 XSS:
、
>、"、'、&,未转义就直接插入 ... 会导致标签断裂或脚本执行textContent 设置内容,或对 HTML 字符做 escape() 处理,禁止直接 innerHTML
/g 标志缺失会导致只替换第一个匹配项 被替换成 ),事件委托需适配新层级。











