Movatterモバイル変換


[0]ホーム

URL:


  1. 給開發者的 Web 技術文件
  2. HTML:超文本標記語言
  3. HTML 參考
  4. Elements
  5. <dfn>

此頁面由社群從英文翻譯而來。了解更多並加入 MDN Web Docs 社群。

View in EnglishAlways switch to English

<dfn>:定義元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

<dfn>HTML 元素表示要定義的術語。<dfn> 元素應該在完整的定義語句中使用,其中<dfn> 元素的祖先<p> 元素、<dt>/<dd> 配對或<dfn> 元素的最近<section> 祖先被認為是該術語的完整定義。

嘗試一下

<p>  A <dfn>validator</dfn> is a program that checks for syntax  errors in code or documents.</p>
/* stylelint-disable-next-line block-no-empty */dfn {}

屬性

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

title 屬性具有特殊意義,如下所述。

使用注意事項

使用<dfn> 元素有一些不那麼顯而易見的方面。我們在這裡進行探討。

指定要定義的術語

遵循以下規則識別要定義的術語:

  1. 如果<dfn> 元素有title 屬性,則title 屬性的值被視為要定義的術語。元素仍然必須包含文本,但該文本可以是縮寫(可能使用<abbr>)或術語的其他形式。
  2. 如果<dfn> 包含單個子元素並且自身沒有任何文本內容,且子元素是具有自己的title 屬性的<abbr> 元素,那麼<abbr> 元素的title 的確切值就是要定義的術語。
  3. 否則,<dfn> 元素的文本內容就是要定義的術語。這在下面的第一個範例中顯示。

備註:如果<dfn> 元素有title 屬性,則它必須包含要定義的術語,並且不能包含其他文本。

連結到<dfn> 元素

如果在<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>&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>

請注意<abbr> 元素嵌套在<dfn> 元素內。前者確定該術語是一個縮寫(「HST」),並在其title 屬性中指定完整術語(「哈勃太空望遠鏡」)。 後者表示縮寫術語代表一個被定義的術語。

結果

技術摘要

內容類型流內容段落型內容、捫及內容。
允許的內容段落型內容,但不能有任何<dfn> 元素作為後代。
標籤省略不允許,開始和結束標籤都是必須的。
允許的父元素 任何接受段落型內容的元素。
隱含的 ARIA 角色term
允許的 ARIA 角色任何
DOM 介面HTMLElement

規範

Specification
HTML
# the-dfn-element

瀏覽器相容性

參見

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2026 Movatter.jp