HTML Definition element
(
<dfn>
) is used to indicate the term being defined within the context of a definition phrase or sentence.
<p>
element, the
<dt>
/
<dd>
pairing, or the
<section>
element which is the nearest ancestor of the
<dfn>
is considered to be the definition of the term.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
| 内容类别 | 流内容 , 措词内容 ，可触及内容。 |
|---|---|
| 准许内容 |
措词内容
, but no
<dfn>
element must be a descendant.
|
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts 措词内容 . |
| Implicit ARIA role |
term
|
| Permitted ARIA roles | 任何 |
| DOM 接口 |
HTMLElement
|
This element's attributes include the 全局属性 .
In HTML5, the
title
attribute has special meaning, as noted below.
There are some not-entirely-obvious aspects to using the
<dfn>
element. We examine those here.
The term being defined is identified following these rules:
<dfn>
element has a
title
attribute, the value of the
title
attribute is considered to be the term being defined. The element must still have text within it, but that text may be an abbreviation (perhaps using
<abbr>
) or another form of the term.
<dfn>
contains a single child element and does not have any text content of its own, and the child element is an
<abbr>
element with a
title
attribute itself, then the exact value of the
<abbr>
元素的
title
is the term being defined.
<dfn>
element is the term being defined. This is shown
in the first example below
.
若
<dfn>
element has a
title
attribute, it
must
contain the term being defined and no other text.
<dfn>
元素
If you include an
id
属性在
<dfn>
element, you can then link to it using
<a>
elements. Such links should be uses of the term, with the intent being that the reader can quickly navigate to the term's definition if they're not already aware of it, by clicking on the term's link.
This is shown in the example under Links to definitions 下文。
Let's take a look at some examples of various usage scenarios.
This example simply uses a plain
<dfn>
element to identify the location of a term within the definition.
<p>The <strong>HTML Definition element</strong> (<strong><dfn><dfn></dfn></strong>) is used to indicate the term being defined within the context of a definition phrase or sentence.</p>
由于
<dfn>
element has no
title
, the text contents of the
<dfn>
element itself are used as the term being defined.
This looks like this rendered in your browser:
To add links to the definitions, you create the link the same way you always do, with the
<a>
元素。
<p>The <strong>HTML Definition element</strong> (<strong><dfn id="definition-dfn"><dfn></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>Negare non possum. Dat enim intervalla et relaxat. Quonam modo? Equidem e Cn. Quid de Pythagora? In schola desinis. </p> <p>Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum est igitur, quid sit voluptas; Quid enim? Non est igitur voluptas bonum. Urgent tamen et nihil remittunt. Quid enim possumus hoc agere divinius? </p> <p>Because of all of that, we decided to use the <code><a href="#definition-dfn"><dfn></a></code> element for this project.</p>
Here we see the definition — now with an
id
属性，
"definition-dfn"
, which can be used as the target of a link. Later on, a link is created using
<a>
采用
href
属性设置为
"#definition-dfn"
to set up the link back to the definition.
The resulting content looks like this:
In some cases, you may wish to use an abbreviation for a term when defining it. This can be done by using the
<dfn>
and
<abbr>
elements in tandem, like this:
<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>
element nested inside the
<dfn>
. The former establishes that the term is an abbreviation ("HST") and specifies the full term ("Hubble Space Telescope") in its
title
attribute. The latter indicates that the abbreviated term represents a term being defined.
The output of the above code looks like this:
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
dfn
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
完整支持