mark 是 HTML5 新增语义化元素,用于标记文本中需突出或高亮的部分,浏览器默认以黄色背景渲染;支持嵌套与组合、可自定义 CSS 样式,语义强调上下文相关性而非重要性或语气。

mark 标签是 HTML5 新增的语义化元素,专门用于对文本中需要突出、标记或高亮的部分进行标注,浏览器默认会以黄色背景(类似荧光笔效果)渲染它。
基本语法结构
最简单的用法就是用 包裹要高亮的文本:
这是一段普通文字,其中 关键词需要高亮,其余保持原样。
支持嵌套与组合使用
mark 可以和其他行内元素(如 em、strong、a)自由组合,也能嵌套在段落、列表、标题等块级元素中:
立即学习“前端免费学习笔记(深入)”;
搜索结果:HTML5 语法详解
相关文档中提到 mark 标签 的语义是“标记文本”。
自定义样式更灵活
浏览器默认背景色可能不符合设计需求,可通过 CSS 覆盖:
- 修改背景色和文字色:mark { background-color: #ffcc00; color: #333; }
- 添加圆角和内边距提升可读性:mark { padding: 2px 6px; border-radius: 3px; }
- 去除默认样式重置(如需完全自定义):mark { background: none; box-shadow: inset 0 -2px 0 #007acc; }
语义注意点
mark 强调的是“上下文中的相关性”,不是强调重要性(那是 strong)或语气变化(那是 em)。常见适用场景包括:
- 搜索结果中匹配的关键词
- 引用中需要特别指出的片段
- 教学文档中标注示例代码中的重点部分
- 用户操作后动态高亮当前选中内容(配合 JS 使用)



















