1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
|
---
title: '<dfn>: Элемент определения'
slug: Web/HTML/Element/dfn
translation_of: Web/HTML/Element/dfn
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>Элемент определения HTML</strong> (<strong><dfn><dfn></dfn></strong>) используется для указания термина, определяемого в контексте фразы или предложения.</span> Элемент{{HTMLElement("p")}}, пара{{HTMLElement("dt")}}/{{HTMLElement("dd")}} или {{HTMLElement("section")}} элемент, который является ближайшим предком <code><dfn></code> считается определением термина.</p>
<p> </p>
<div>{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}</div>
<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull-запрос.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории Контента</a></th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>, явный контент.</td>
</tr>
<tr>
<th scope="row">Разрешенный контент</th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>, но ни один {{HTMLElement("dfn")}} элемент не должен быть потомком.</td>
</tr>
<tr>
<th scope="row">Пропуск тега</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Разрешенные родители</th>
<td>Любой элемент, который принимает <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
</tr>
<tr>
<th scope="row">Разрешенные роли ARIA</th>
<td>Любые</td>
</tr>
<tr>
<th scope="row">DOM интерфейс</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Атрибуты">Атрибуты</h2>
<p>Атрибуты этого элемента включают <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
<p>В HTML5 {{htmlattrxref("title")}} атрибут имеет особое значение, как указано ниже.</p>
<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
<p>Есть несколько не совсем очевидных аспектов использования элемента<code><dfn></code>. Мы рассмотрим их здесь.</p>
<h3 id="Определяемый_термин">Определяемый термин</h3>
<p>Определяемый термин устанавливается в соответствии с этими правилами:</p>
<ol>
<li>Если <code><dfn></code> элемент имеет {{htmlattrxref("title")}} атрибут, значение атрибута <code>title</code> считается определяемым термином. Элемент должен по-прежнему иметь текст внутри него, но этот текст может быть аббревиатурой (возможно, с использованием{{HTMLElement("abbr")}}) или другой формой термина.</li>
<li>Если объект <code><dfn></code> содержит единственный дочерний элемент и не имеет собственного текстового содержимого, а дочерний элемент является {{HTMLElement("abbr")}} элементом с атрибутом <code>title</code>, то строго значение <code>title</code> <code><abbr></code> элемента является определяемым термином.</li>
<li>В противном случае текстовое содержимое <code><dfn></code> элемента является определяемым термином. Это показано {{anch("Базовая идентификация термина", "в примере ниже")}}.</li>
</ol>
<div class="note">
<p>Если <code><dfn></code> элемент имеет атрибут <code>title</code>, он <em>должен</em> содержать определяемый термин и никакой другой текст.</p>
</div>
<h3 id="Ссылки_на_<dfn>_элементы">Ссылки на <code><dfn></code> элементы</h3>
<p>Если вы включаете атрибут {{htmlattrxref("id")}} в <code><dfn></code> элемент, вы можете ссылаться на него, используя {{HTMLElement("a")}} элементы. Они должны ссылаться на использование термина, чтобы читатель смог быстро перейти к определению термина, если он еще не знает его, нажав на ссылку термина.</p>
<p>Это показано ниже в примере {{anch("Ссылки на определения")}}.</p>
<h2 id="Примечания_по_использованию_2">Примечания по использованию</h2>
<ul>
<li>Элемент <code><dfn></code> отмечает определяемый термин; определение термина должно быть дано окружающим {{HTMLElement("p")}}, {{HTMLElement("section")}} или группой списков определений (обычно пара {{HTMLElement("dt")}}{{HTMLElement("dd")}}).</li>
<li>Точное значение определяемого термина определяется следующими правилами:
<ol>
<li>Если элемент <code><dfn></code> имеет {{htmlattrxref("title")}} атрибут, то термин является значением этого атрибута.</li>
<li>Иначе, если он содержит только {{HTMLElement("abbr")}} элемент с {{htmlattrxref("title")}} атрибутом, тогда термин является значением этого атрибута. Это продемонстрировано в {{anch("Использование сокращений и определений вместе")}} ниже.</li>
<li>В противном случае текстовое содержимое <code><dfn></code> элемента является определяемым термином.</li>
</ol>
</li>
</ul>
<h2 id="Примеры">Примеры</h2>
<p>Давайте рассмотрим несколько примеров различных сценариев использования.</p>
<h3 id="Базовая_идентификация_термина">Базовая идентификация термина</h3>
<p>В этом примере просто используется <code><dfn></code> элемент для нахождения местоположения термина в определении.<code>(<strong><dfn>&lt;dfn&gt;</dfn></strong>)</code></p>
<h4 id="HTML">HTML</h4>
<p> </p>
<pre class="brush: html"><p><strong>Элемент определения HTML</strong> (<strong><dfn>&lt;dfn&gt;</dfn></strong>)
используется для обозначения термина, определяемого в контексте фразы или предложения.</p> </pre>
<p> </p>
<p>Поскольку <code><dfn></code> элемент не имеет <code>title</code>, текстовое содержимое самого <code><dfn></code> элемента используется в качестве определяемого термина.</p>
<h4 id="Результат">Результат</h4>
<p>Это выглядит так в вашем браузере:</p>
<p>{{ EmbedLiveSample('Базовая_идентификация_термина', '', '', '', 'Web/HTML/Element/dfn') }}</p>
<h3 id="Ссылки_на_определения">Ссылки на определения</h3>
<p>Чтобы добавить ссылки к определениям, вы создаете ссылку так же, как и всегда, с {{HTMLElement("a")}} элементом. <p><strong>Элемент определения HTML</strong> <code>(<strong><dfn>&lt;dfn&gt;</dfn></strong>)</code> используется для обозначения термина, определяемого в контексте фразы или предложения. </p></p>
<h4 id="HTML_2">HTML</h4>
<p> </p>
<pre class="brush: html"><p><strong>Элемент определения HTML</strong> (<strong><dfn>&lt;dfn&gt;</dfn></strong>)
используется для обозначения термина, определяемого в контексте фразы или предложения.</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>Из-за всего этого мы решили использовать
элемент<code><a href="#definition-dfn">&lt;dfn&gt;</a></code> для этого проекта.</p></pre>
<p> </p>
<p>Здесь мы видим определение - теперь с атрибутом {{htmlattrxref("id")}} <code>«definition-dfn»</code>, который может использоваться в качестве цели для ссылки. Позднее создается ссылка с использованием<code> <a></code> и с {{htmlattrxref("href", "a")}}атрибутом, установленным на <code>«#definition-dfn»</code>, чтобы установить ссылку обратно на определение.</p>
<h4 id="Результат_2">Результат</h4>
<p>Полученный контент выглядит так:</p>
<p>{{ EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Element/dfn') }}</p>
<h3 id="Использование_сокращений_и_определений_вместе">Использование сокращений и определений вместе</h3>
<p>В некоторых случаях вы можете использовать сокращение для термина при его определении. Это можно сделать с помощью<code><dfn></code> и {{HTMLElement("abbr")}} элементов вместе, например так:</p>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html"><p><dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> является одним из самых
производительных научных инструментов, когда-либо созданных.
Он находится на орбите более 20 лет, просматривая небо и отправляя данные и фотографии
беспрецедентного качества и детализации.</p>
<p>Действительно, HST, возможно, <abbr title="Hubble Space Telescope"></abbr> сделал больше
для развития науки, чем любое другое устройство, когда-либо созданное.</p> </pre>
<p>Обратите внимание на <code><abbr></code> элемент, вложенный в <code><dfn></code>. Первый устанавливает, что термин является аббревиатурой («HST») и определяет полный термин («Hubble Space Telescope (Космический телескоп „Хаббл“)») в своем атрибуте <code>title</code>. Последнее указывает на то, что сокращенный термин представляет собой определяемый термин.</p>
<h4 id="Результат_3">Результат</h4>
<p>Вывод приведенного выше кода выглядит следующим образом:</p>
<p>{{ EmbedLiveSample('HTML_3', '', '', '', 'Web/HTML/Element/dfn') }}</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-dfn-element', '<dfn>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-dfn-element', '<dfn>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<dfn>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_в_браузерах">Совместимость в браузерах</h2>
<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, <a href="https://github.com/mdn/browser-compat-data">просмотрите</a> https://github.com/mdn/browser-compat-data и отправьте нам pull-запрос.</div>
<p>{{Compat("html.elements.dfn")}}</p>
<h2 id="См._также">См. также</h2>
<ul>
<li>Элементы, связанные со списками определений: {{HTMLElement("dl")}}{{HTMLElement("dt")}}{{HTMLElement("dd")}}</li>
<li>{{HTMLElement("abbr")}}</li>
</ul>
|
