<dfn>:定義元素

基線 廣泛可用

此功能已經完善,可在許多裝置和瀏覽器版本上執行。它自以下日期起在所有瀏覽器中都可用 2015 年 7 月.

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

  • 祖先段落(一段文字,有時用 <p> 元素標記)
  • 配對
  • <dfn> 元素最近的 祖先元素,

試一試

屬性

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

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
<p>
  The
  <strong>HTML Definition element (<dfn id="definition-dfn">&lt;dfn&gt;</dfn>)</strong>
  is used to indicate the term being defined within the context of a definition
  phrase or sentence.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine
  voluptatem vocant. Confecta res esset. Duo Reges: constructio interrete.
  Scrupulum, inquam, abeunti;
</p>

<p>
  Because of all of that, we decided to use the
  <code><a href="#definition-dfn">&lt;dfn&gt;</a></code> element for this
  project.
</p>

在這裡,我們看到了定義——現在具有 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 屬性中指定了完整術語(“哈勃太空望遠鏡”)。後者表示縮寫術語代表要定義的術語。

結果

技術摘要

內容類別 流內容短語內容可感知內容
允許的內容 短語內容,但不能有 <dfn> 元素作為後代。
標籤省略 無,起始和結束標籤都是必需的。
允許的父元素 任何接受 短語內容 的元素。
隱式 ARIA 角色 術語
允許的 ARIA 角色 任何
DOM 介面 HTMLElement

規範

規範
HTML 標準
# the-dfn-element

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參閱