試一試
<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> 元素有一些不太明顯但很有用的方面。我們在這裡進行探討。
指定被定義的術語
被定義的術語按照以下規則進行識別:
- 如果
<dfn>元素有一個title屬性,則title屬性的值被認為是將被定義的術語。該元素仍然必須在其內部包含文字,但該文字可以是縮寫(可能使用<abbr>)或該術語的另一種形式。 - 如果
<dfn>包含一個子元素且沒有自己的文字內容,並且該子元素是一個帶有title屬性的<abbr>元素,那麼<abbr>元素的title的確切值就是被定義的術語。 - 否則,
<dfn>元素的文字內容就是被定義的術語。這在 下面的第一個示例 中有展示。
注意: 如果 <dfn> 元素有一個 title 屬性,它必須包含被定義的術語,而不包含任何其他文字。
連結到 <dfn> 元素
如果您在 <dfn> 元素上包含一個 id 屬性,您就可以使用 <a> 元素連結到它。這樣的連結應該是對該術語的使用,目的是讓讀者能夠透過點選術語的連結,快速導航到該術語的定義,如果他們還不熟悉的話。
這在下面的 定義連結 中的示例中有所展示。
示例
讓我們來看一些各種使用場景的示例。
術語的基本標識
此示例使用一個普通的 <dfn> 元素來標識定義中的術語位置。
HTML
html
<p>
The <strong>HTML Definition element (<dfn><dfn></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"><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>
Because of all of that, we decided to use the
<code><a href="#definition-dfn"><dfn></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 屬性中指定了完整的術語(“Hubble Space Telescope”)。後者表示縮寫的術語代表一個正在被定義的術語。
結果
技術摘要
| 內容類別 | Flow content、phrasing content、palpable content。 |
|---|---|
| 允許內容 |
Phrasing content,但 <dfn> 元素不能是後代。 |
| 標籤省略 | 無,起始標籤和結束標籤都必須存在。 |
| 允許父級 | 任何接受短語內容的元素。 |
| 隱式 ARIA 角色 | term |
| 允許的 ARIA 角色 | 任意 |
| DOM 介面 | HTMLElement |
規範
| 規範 |
|---|
| HTML # the-dfn-element |
瀏覽器相容性
載入中…