PHP小码农

Appearance

mark 高亮 ​

<mark> 标签用于标记文本中的相关部分，表示因为这些部分与用户当前活动相关而需要被突出显示。最常见的场景是搜索结果中的关键词高亮。

前置知识

阅读本节前，建议先了解：em 与 i

基础概念 ​

<mark> 是 HTML5 引入的语义标签，用于表示文本中与当前上下文相关的部分。它不表示重要性（那是 <strong> 的作用），也不表示强调（那是 <em> 的作用），而是表示相关性。

<mark> 的典型视觉效果是黄色背景高亮，类似于用荧光笔在纸上标记重点。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>mark 高亮示例</title>
</head>
<body>
  <h1>搜索结果</h1>

  <p>您搜索的关键词是：<mark>HTML5</mark></p>

  <p>在结果中，<mark>HTML5</mark> 是超文本标记语言的第五个主要版本，于 2014 年正式发布。<mark>HTML5</mark> 引入了许多新特性和 API。</p>
</body>
</html>

详细说明 ​

mark 的默认样式 ​

属性默认值（Chrome）说明
displayinline行内元素
background-coloryellow黄色背景
colorblack黑色文字

mark 的语义 ​

<mark> 表示文本与当前用户的操作或关注点相关，而非"重要"或"强调"：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>mark 语义示例</title>
</head>
<body>
  <h1>mark 的语义场景</h1>

  <!-- 搜索结果高亮 -->
  <p>找到 <mark>3 个</mark>包含"教程"的结果。</p>

  <!-- 引用中标注与当前讨论相关的部分 -->
  <blockquote>
    <p>HTML5 最重要的改进之一是引入了语义化标签，如 <mark>header</mark>、<mark>nav</mark>、<mark>main</mark> 等。</p>
  </blockquote>
</body>
</html>

mark 与 strong、em 的区别 ​

标签语义典型场景
<mark>与用户当前活动相关的部分搜索高亮、引用标记
<strong>具有重要性的内容警告、关键结论
<em>需要强调的内容改变句意重点

自定义 mark 样式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自定义 mark 样式</title>
  <style>
    mark {
      padding: 0.1em 0.3em;
      border-radius: 2px;
    }
    .mark-green { background: #c8e6c9; color: #2e7d32; }
    .mark-blue { background: #bbdefb; color: #1565c0; }
    .mark-underline {
      background: transparent;
      color: inherit;
      text-decoration: underline wavy red;
    }
  </style>
</head>
<body>
  <p>默认黄色高亮：<mark>HTML5</mark></p>
  <p>绿色高亮：<mark class="mark-green">CSS3</mark></p>
  <p>蓝色高亮：<mark class="mark-blue">JavaScript</mark></p>
  <p>红色波浪线：<mark class="mark-underline">拼写错误</mark></p>
</body>
</html>

实战示例 ​

搜索结果页面 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>搜索结果</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
    .result { margin: 1.5rem 0; padding: 1rem; border: 1px solid #eee; border-radius: 4px; }
    mark { background: #fff3cd; padding: 0 0.2em; border-radius: 2px; }
    .result-title { font-size: 1.125rem; margin-bottom: 0.5rem; }
    .result-url { color: #006621; font-size: 0.875rem; }
    .result-desc { color: #555; font-size: 0.875rem; }
  </style>
</head>
<body>
  <h1>搜索结果："<mark>HTML5 教程</mark>"</h1>

  <div class="result">
    <div class="result-title"><a href="#">完整的 <mark>HTML5</mark> <mark>教程</mark></a></div>
    <div class="result-url">https://example.com/html5-tutorial</div>
    <div class="result-desc">本 <mark>教程</mark>从零开始讲解 <mark>HTML5</mark> 的基础知识...</div>
  </div>

  <div class="result">
    <div class="result-title"><a href="#"><mark>HTML5</mark> 入门指南</a></div>
    <div class="result-url">https://example.com/html5-guide</div>
    <div class="result-desc">一份详细的 <mark>HTML5</mark> 入门 <mark>教程</mark>，适合初学者...</div>
  </div>
</body>
</html>

注意事项 ​

  • <mark> 不应替代 <strong> 和 <em>，它们语义不同
  • 高亮颜色应保证可读性，避免使用与文字颜色过于接近的背景色
  • 在深色主题中，需要调整 <mark> 的背景和文字颜色

最佳实践 ​

  1. 用于搜索高亮：在搜索结果中标记匹配的关键词
  2. 用于引用标注：在引用文本中标记与讨论相关的部分
  3. 自定义样式：通过 CSS 调整 <mark> 的视觉效果以适配页面主题
  4. 适度使用：不要高亮过多内容，否则失去标记的意义

下一节

继续学习：small 小号文本

参考链接 ​