<mark>:标记文本元素

¥Attributes

该元素仅包含 全局属性。

¥This element only includes the global attributes.

¥Usage notes

<mark> 的典型用例包括：

¥Typical use cases for <mark> include:

• 当用于引文（<q>）或块引用（<blockquote>）时，它通常表示特别令人感兴趣但在原始来源材料中未标记的文本，或需要特别审查的材料，尽管原作者并不认为如此 具有特别重要的意义。可以将其想象为在书中使用荧光笔标记你感兴趣的段落。
• 否则，<mark> 指示可能与用户当前活动相关的文档内容的一部分。例如，这可以用于指示与搜索操作匹配的单词。
• 不要将 <mark> 用于语法高亮；相反，请使用 <span> 元素并应用适当的 CSS。

注意：不要将 <mark> 与 <strong> 元素混淆；<mark> 用于表示具有一定相关性的内容，而 <strong> 表示重要文本的范围。

¥Note: Don't confuse <mark> with the <strong> element; <mark> is used to denote content which has a degree of relevance, while <strong> indicates spans of text of importance.

¥Accessibility

大多数屏幕阅读技术在其默认配置中均未声明 mark 元素的存在。可以使用 CSS content 属性以及 ::before 和 ::after 伪元素来声明它。

¥The presence of the mark element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS content property, along with the ::before and ::after pseudo-elements.

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] ";
}

一些使用屏幕阅读器的人故意禁止播放会造成额外冗长的内容。因此，重要的是不要滥用此技术，并且仅在不知道内容已高亮会对理解产生不利影响的情况下应用它。

¥Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been highlighted would adversely affect understanding.

• 关于留下你的印记的简短说明（更容易理解）| 帕切洛集团
• 调整文本级别样式| 阿德里安·罗塞利

¥Examples

¥Marking text of interest

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

¥In this first example, a <mark> element is used to mark some text within a quote which is of particular interest to the user.

<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>

结果

¥Result

¥Identifying context-sensitive passages

此示例演示使用 <mark> 标记段落内的搜索结果。

¥This example demonstrates using <mark> to mark search results within a passage.

<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" 应用于每个匹配项。

¥To help distinguish the use of <mark> for search results from other potential usage, this example applies the custom class "match" to each match.

结果

¥Result

¥Technical summary