HTML5里Mark标签实现文本高亮显示的具体语法

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

mark 标签是 HTML5 新增的语义化元素，专门用于对文本中需要突出、标记或高亮的部分进行标注，浏览器默认会以黄色背景（类似荧光笔效果）渲染它。

基本语法结构

最简单的用法就是用 <mark></mark> 包裹要高亮的文本：

<p>这是一段普通文字，其中 <mark>关键词需要高亮</mark>，其余保持原样。</p>

支持嵌套与组合使用

mark 可以和其他行内元素（如 em、strong、a）自由组合，也能嵌套在段落、列表、标题等块级元素中：

<h3>搜索结果：<mark><strong>HTML5</strong> 语法详解</mark></h3>
<p>相关文档中提到 <a href="#highlight"><mark>mark 标签</mark></a> 的语义是“标记文本”。</p>

自定义样式更灵活

浏览器默认背景色可能不符合设计需求，可通过 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 使用）