diff options
Diffstat (limited to 'files/ru/web/html/element/dfn/index.html')
| -rw-r--r-- | files/ru/web/html/element/dfn/index.html | 209 |
1 files changed, 209 insertions, 0 deletions
diff --git a/files/ru/web/html/element/dfn/index.html b/files/ru/web/html/element/dfn/index.html new file mode 100644 index 0000000000..c34e105cbd --- /dev/null +++ b/files/ru/web/html/element/dfn/index.html @@ -0,0 +1,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> |