源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

HTML 中的 mark

2026/02/07
15
0

学习目标

  • 理解 <mark> 标签的语义作用及其在 HTML5 中的引入背景

  • 掌握 <mark> 标签的基本语法与默认样式

  • 能够在搜索结果、引用高亮等场景中合理使用该标签

  • 学会通过 CSS 自定义 <mark> 的高亮样式

正文内容

什么是 <mark>

HTML 中的 <mark> 标签用于标记或高亮文本中的一部分内容，表示该部分具有相关性或参考价值。它是 HTML5 新增的语义化标签，常用于以下场景：

  • 搜索关键词在结果页面中的高亮显示

  • 引用文献中需要特别指出的内容

  • 教学材料中标注重点概念

  • 表单错误提示中突出错误字段

语义说明：<mark> 并不表示“重要性”（那是 <strong> 的职责），而是表示“被标记以引起注意”。

浏览器默认将 <mark> 内容渲染为黄色背景 + 黑色文字，但可通过 CSS 完全自定义。

基本语法

<mark>需要高亮的文本</mark>

  • <mark> 是一个行内元素，可嵌套在段落、标题、列表等文本容器中。

  • 支持所有 HTML 全局属性（如 class、id）和 事件属性（如 onclick）。

  • 默认样式通常为：

    mark {
  background-color: yellow;
  color: black;
}

应用示例

基本高亮

默认样式

<!DOCTYPE html>
<html>
<body>
    <h1 style="color: green;">技术笔记</h1>
    <h2>HTML mark 标签</h2>
    <p>
        <mark>技术笔记：</mark> 这是一个专注于
        <mark>计算机科学</mark> 的学习平台。
    </p>
</body>
</html>

效果：
“技术笔记：” 和 “计算机科学” 会被黄色背景高亮，视觉上突出显示，便于读者快速定位关键信息。

自定义高亮样式

绿底白字

<!DOCTYPE html>
<html>
<body>
    <h1>技术笔记</h1>
    <h2>HTML mark 标签（自定义样式）</h2>
    <p>
        <mark>技术笔记：</mark> 这是一个专注于
        <mark style="background-color: green; color: white;">
            计算机科学
        </mark> 的学习平台。
    </p>
</body>
</html>

使用场景

场景

说明

示例

搜索结果高亮

用户搜索关键词后，在结果中高亮匹配项

您搜索了 “HTML 教程”

教学标注

在教材中标出核心术语或易错点

函数返回值类型为 void

引用强调

在长段落中突出引述的关键句

原文指出：“语义化是现代 Web 的基石”

表单反馈

高亮用户输入中的问题部分

邮箱格式错误：user@@example.com

重点总结

  • <mark> 是 HTML5 引入的语义化高亮标签，用于标记具有参考或相关性的文本。

  • 默认样式为黄色背景，但可通过 CSS 完全自定义颜色、边框等。

  • 常用于搜索高亮、教学标注、引用强调等场景。

  • 与 <strong>（重要性）和 <b>（纯加粗）有本质区别，应根据语义选择。

  • 虽然主要服务于视觉用户，但在关键场景中应辅以其他无障碍措施。

思考题

  1. 在一个电商网站的商品搜索结果页中，如何合理使用 <mark> 标签提升用户体验？请写出一段示例代码。

  2. 如果你希望所有 <mark> 元素在深色主题下自动变为深蓝背景 + 浅黄文字，应如何通过 CSS 实现？

  3. 为什么 <mark> 不适合用来表示“警告信息”？应该用什么标签替代？