<mark>: 標記文字元素
<mark> HTML 元素表示標記或突出顯示的文字,用於參考或註釋目的,因為標記的段落與包含它的上下文中相關。
試一試
屬性
此元素只包含全域性屬性。
使用注意事項
<mark> 的典型用例包括
- 當用在引號 (
<q>) 或塊引用 (<blockquote>) 中時,它通常表示對使用者特別感興趣的文字,但不在原始源材料中標記,或者需要特別審查的材料,即使原始作者認為它並不特別重要。想象一下,這就像在書中使用熒光筆標記你感興趣的段落。 - 否則,
<mark>表示文件內容中可能與使用者當前活動相關的部分。例如,這可能用於指示與搜尋操作匹配的單詞。 - 不要使用
<mark>進行語法高亮顯示;相反,請使用<span>元素,並應用相應的 CSS。
注意: 不要將<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 |
瀏覽器相容性
BCD 表格僅在瀏覽器中載入