<mark>: mark 文本元素

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

<mark> HTML 元素表示出于引用或标注目的而被标记高亮的文本,因为该标记的段落在其周围上下文中具有相关性。

试一试

<p>Search results for "salamander":</p>

<hr />

<p>
  Several species of <mark>salamander</mark> inhabit the temperate rainforest of
  the Pacific Northwest.
</p>

<p>
  Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and
  other small creatures.
</p>
mark {
  /* Add your styles here */
}

属性

此元素仅包含全局属性

用法说明

<mark> 的典型用例包括:

  • 当在引用 (<q>) 或块引用 (<blockquote>) 中使用时,它通常表示原文中未标记但用户特别感兴趣的文本,或者虽然原作者认为它并不特别重要,但仍需要仔细审查的材料。可以将其想象成用荧光笔在书中标记你认为有趣的部分。
  • 否则,<mark> 表示文档内容中可能与用户当前活动相关的部分。例如,这可能用于指示与搜索操作匹配的单词。
  • 请勿出于语法高亮目的使用 <mark>;相反,请使用带有适当 CSS 的 <span> 元素。

注意: 不要将 <mark><strong> 元素混淆;<mark> 用于表示具有一定相关性的内容,而 <strong> 用于表示重要性的文本跨度。

无障碍

在大多数屏幕阅读器的默认配置中,mark 元素的存在不会被播报。可以通过使用 CSS content 属性,以及 ::before::after 伪元素来使其被播报。

css
mark::before,
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

mark::before {
  content: " [highlight start] ";
}

mark::after {
  content: " [highlight end] ";
}

一些使用屏幕阅读器的用户会故意禁用播报会产生过多冗余内容的选项。因此,重要的是不要滥用此技术,仅在不了解内容已被高亮会严重影响理解的情况下应用它。

示例

标记感兴趣的文本

在第一个示例中,<mark> 元素用于标记引用中对用户特别感兴趣的某些文本。

html
<blockquote>
  It is a period of civil war. Rebel spaceships, striking from a hidden base,
  have won their first victory against the evil Galactic Empire. During the
  battle, <mark>Rebel spies managed to steal secret plans</mark> to the Empire's
  ultimate weapon, the DEATH STAR, an armored space station with enough power to
  destroy an entire planet.
</blockquote>

结果

识别上下文相关的段落

此示例演示了使用 <mark> 在段落中标记搜索结果。

html
<p>
  It is a dark time for the Rebellion. Although the Death Star has been
  destroyed, <mark class="match">Imperial</mark> troops have driven the Rebel
  forces from their hidden base and pursued them across the galaxy.
</p>

<p>
  Evading the dreaded <mark class="match">Imperial</mark> Starfleet, a group of
  freedom fighters led by Luke Skywalker has established a new secret base on
  the remote ice world of Hoth.
</p>

为了帮助区分 <mark> 在搜索结果中的使用与其他潜在用法,此示例为每个匹配项应用了自定义类 "match"

结果

技术摘要

内容类别 流式内容语句内容、明显内容。
允许内容 短语内容.
标签省略 无,起始标签和结束标签都必须存在。
允许父级 任何接受短语内容的元素。
隐式 ARIA 角色 没有对应的角色
允许的 ARIA 角色 任意
DOM 接口 HTMLElement

规范

规范
HTML
# the-mark-element

浏览器兼容性