<dfn>: The Definition element

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

<dfn> HTML 元素表示一個要定義的術語。<dfn> 元素應該用在完整的定義語句中,其中該術語的完整定義可以是以下之一:

  • 祖先段落(一塊文字,有時由 <p> 元素標記)
  • <dt>/<dd> 配對
  • <dfn> 元素的最近的 section 祖先,

試一試

<p>
  A <dfn id="def-validator">validator</dfn> is a program that checks for syntax
  errors in code or documents.
</p>
dfn {
  /* Add your styles here */
}

屬性

此元素的屬性包括全域性屬性

title 屬性有特殊含義,如下文所述。

用法說明

使用 <dfn> 元素有一些不太明顯但很有用的方面。我們在這裡進行探討。

指定被定義的術語

被定義的術語按照以下規則進行識別:

  1. 如果 <dfn> 元素有一個 title 屬性,則 title 屬性的值被認為是將被定義的術語。該元素仍然必須在其內部包含文字,但該文字可以是縮寫(可能使用 <abbr>)或該術語的另一種形式。
  2. 如果 <dfn> 包含一個子元素且沒有自己的文字內容,並且該子元素是一個帶有 title 屬性的 <abbr> 元素,那麼 <abbr> 元素的 title 的確切值就是被定義的術語。
  3. 否則,<dfn> 元素的文字內容就是被定義的術語。這在 下面的第一個示例 中有展示。

注意: 如果 <dfn> 元素有一個 title 屬性,它必須包含被定義的術語,而不包含任何其他文字。

如果您在 <dfn> 元素上包含一個 id 屬性,您就可以使用 <a> 元素連結到它。這樣的連結應該是對該術語的使用,目的是讓讀者能夠透過點選術語的連結,快速導航到該術語的定義,如果他們還不熟悉的話。

這在下面的 定義連結 中的示例中有所展示。

示例

讓我們來看一些各種使用場景的示例。

術語的基本標識

此示例使用一個普通的 <dfn> 元素來標識定義中的術語位置。

HTML

html
<p>
  The <strong>HTML Definition element (<dfn>&lt;dfn&gt;</dfn>)</strong> is used
  to indicate the term being defined within the context of a definition phrase
  or sentence.
</p>

由於 <dfn> 元素沒有 title,因此 <dfn> 元素本身的文字內容被用作被定義的術語。

結果

要為定義新增連結,您需要像往常一樣使用 <a> 元素來建立連結。

HTML

html

在這裡,我們看到了定義 — 現在帶有一個 id 屬性 "definition-dfn",可用作連結目標。稍後,將使用 <a> 元素建立連結,並將其 href 屬性設定為 "#definition-dfn",以建立回定義連結。

結果

將縮寫和定義結合使用

在某些情況下,您可能希望在使用縮寫來定義術語。可以透過像這樣聯合使用 <dfn><abbr> 元素來實現:

HTML

html
<p>
  The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> is among the
  most productive scientific instruments ever constructed. It has been in orbit
  for over 20 years, scanning the sky and returning data and photographs of
  unprecedented quality and detail.
</p>

<p>
  Indeed, the <abbr title="Hubble Space Telescope">HST</abbr> has arguably done
  more to advance science than any device ever built.
</p>

請注意巢狀在 <dfn> 中的 <abbr> 元素。前者表明該術語是一個縮寫(“HST”),並在其 title 屬性中指定了完整的術語(“Hubble Space Telescope”)。後者表示縮寫的術語代表一個正在被定義的術語。

結果

技術摘要

內容類別 Flow contentphrasing contentpalpable content
允許內容 Phrasing content,但 <dfn> 元素不能是後代。
標籤省略 無,起始標籤和結束標籤都必須存在。
允許父級 任何接受短語內容的元素。
隱式 ARIA 角色 term
允許的 ARIA 角色 任意
DOM 介面 HTMLElement

規範

規範
HTML
# the-dfn-element

瀏覽器相容性

另見