<abbr>：縮寫元素
<abbr> HTML 元素表示縮寫或首字母縮略詞。
在包含縮寫或首字母縮略詞時，首次使用時請以純文字形式提供該術語的完整展開，並使用 <abbr> 標記該縮寫。這會告知使用者該縮寫或首字母縮略詞的含義。
可選的 title 屬性可以在沒有完整展開時提供縮寫或首字母縮略詞的展開。這會向用戶代理提供如何宣佈/顯示內容的提示，同時告知所有使用者該縮寫詞的含義。如果存在，title 必須包含此完整描述，並且不能包含其他內容。
試一試
<p>
You can use <abbr>CSS</abbr> (Cascading Style Sheets) to style your
<abbr>HTML</abbr> (HyperText Markup Language). Using style sheets, you can
keep your <abbr>CSS</abbr> presentation layer and <abbr>HTML</abbr> content
layer separate. This is called "separation of concerns."
</p>
abbr {
font-style: italic;
color: chocolate;
}
屬性
此元素僅支援全域性屬性。當與 <abbr> 元素一起使用時，title 屬性具有特定的語義含義；它必須包含縮寫的完整人類可讀描述或展開。當滑鼠游標懸停在元素上時，瀏覽器通常會將此文字顯示為工具提示。
你使用的每個 <abbr> 元素都是相互獨立的；為一個元素提供 title 不會自動將相同的展開文字附加到內容文字相同的其他元素。
用法說明
典型用例
當然，並非所有縮寫都必須使用 <abbr> 標記。但是，在某些情況下這樣做會很有幫助
語法注意事項
在具有語法數的語言中（即，專案中數字影響句子語法的語言），請在 title 屬性中使用與 <abbr> 元素內部相同的語法數。這在具有兩個以上數字的語言中尤其重要，例如阿拉伯語，但在英語中也相關。
預設樣式
此元素的目的是純粹為了作者的方便，所有瀏覽器預設都將其內聯顯示（display: inline），儘管其預設樣式因瀏覽器而異
一些瀏覽器會為元素內容新增虛線下劃線。其他瀏覽器在新增虛線下劃線的同時將內容轉換為小型大寫字母。其他瀏覽器可能不會像 <span> 元素那樣進行樣式設定。要控制此樣式，請使用 text-decoration 和 font-variant。
無障礙
首次在頁面上使用首字母縮略詞或縮寫時將其完整拼寫出來有助於人們理解它，特別是如果內容是技術或行業術語。
只有在文字中無法展開縮寫或首字母縮略詞時才包含 title。宣讀的單詞或短語與螢幕上顯示的內容之間存在差異，尤其是當它是讀者可能不熟悉的技術術語時，可能會令人不適。
<p>
JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight
data-interchange format.
</p>
這對於不熟悉內容中討論的術語或概念的人、語言新手以及有認知障礙的人特別有幫助。
示例
語義化標記縮寫
要標記縮寫而不提供展開或描述，請使用不帶任何屬性的 <abbr>，如本例所示。
HTML
<p>Using <abbr>HTML</abbr> is fun and easy!</p>
結果
縮寫樣式
你可以使用 CSS 為縮寫設定自定義樣式，如這個基本示例所示。
HTML
<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>
CSS
abbr {
font-variant: all-small-caps;
}
結果
提供展開
新增 title 屬性可讓你為縮寫或首字母縮略詞提供展開或定義。
HTML
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>
結果
定義縮寫
你可以將 <abbr> 與 <dfn> 結合使用，以更正式地定義縮寫，如此處所示。
HTML
<p>
<dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a
markup language used to create the semantics and structure of a web page.
</p>
<p>
A <dfn id="spec">Specification</dfn> (<abbr>spec</abbr>) is a document that
outlines in detail how a technology or API is intended to function and how it
is accessed.
</p>
結果
技術摘要
規範
| 規範 |
|---|
| HTML # the-abbr-element |
瀏覽器相容性
載入中…