試一試
<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 |
瀏覽器相容性
載入中…