<abbr>: 縮寫元素

此元素僅支援 全域性屬性。 title 屬性在與 <abbr> 元素一起使用時具有特定的語義含義；它必須包含縮寫的完整人類可讀描述或擴充套件。此文字通常由瀏覽器在滑鼠游標懸停在元素上時作為工具提示呈現。

您使用的每個 <abbr> 元素都獨立於所有其他元素；為一個元素提供 title 不會自動將相同的擴充套件文字附加到具有相同內容文字的其他元素。

當然，並非所有縮寫都必須使用 <abbr> 進行標記。然而，在某些情況下，這樣做會很有幫助

• 當使用縮寫並希望在文件內容流之外提供擴充套件或定義時，請使用帶有適當的 title 的 <abbr>。
• 要定義讀者可能不熟悉的縮寫，請使用 <abbr> 顯示該詞語，並在內聯文字中提供定義。僅當內聯擴充套件或定義不可用時才包含 title 屬性。
• 當縮寫出現在文字中需要在語義上進行標記時，<abbr> 元素很有用。這可以反過來用於樣式或指令碼目的。
• 您可以將 <abbr> 與 <dfn> 結合使用，為作為縮寫或首字母縮略詞的詞語建立定義。請參閱下面的示例 定義縮寫。

在具有 語法數 的語言中（即，專案數量會影響句子語法的語言），請在您的 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>

結果

• 使用<abbr>元素