试一试
<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"
。
结果
技术摘要
规范
规范 |
---|
HTML # the-mark-element |
浏览器兼容性
加载中…