diff options
Diffstat (limited to 'files/ru/web/html/element/ol/index.html')
| -rw-r--r-- | files/ru/web/html/element/ol/index.html | 218 |
1 files changed, 218 insertions, 0 deletions
diff --git a/files/ru/web/html/element/ol/index.html b/files/ru/web/html/element/ol/index.html new file mode 100644 index 0000000000..8024e608a6 --- /dev/null +++ b/files/ru/web/html/element/ol/index.html @@ -0,0 +1,218 @@ +--- +title: '<ol>: The Ordered List element' +slug: Web/HTML/Element/ol +tags: + - HTML + - Основной поток + - элементы +translation_of: Web/HTML/Element/ol +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><ol></code></strong> используется для упорядоченного списка — в частности для пронумерованного списка.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}</div> + +<p class="hidden">Источник для интерактивного примера расположен в GitHub. Если вы желаете сделать вклад в интерактивную часть, распакуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправьте нам pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th> + <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Основной поток</a>, и если дочерний элемент <code><ol></code> включает в себя хотя бы один элемент {{HTMLElement("li")}}, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">явный контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённое содержимое</th> + <td>Ноль или больше {{HTMLElement("li")}} элементов, которые, в свою очередь, содержат вложенные элементы {{ HTMLElement("ol") }} или {{ HTMLElement("ul") }}.</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/Guide/HTML/Content_categories#Flow_content">основной поток</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA-роли</th> + <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{DOMxRef("HTMLOListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Свойства">Свойства</h2> + +<p>Этот элемент включает <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{HTMLAttrDef("reversed")}}</dt> + <dd>Атрибут логического значения (bool) показывает, что предметы указаны по списку в обратном порядке. Пункты в списке будут пронумерованы от большего к меньшему.</dd> + <dt>{{HTMLAttrDef("start")}}</dt> + <dd>Нумерация начнется с указанного числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация <code>type</code> в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы "г" или Римской "iv", используйте <code>start="4"</code>.</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>Задаёт тип нумерации: + <ul> + <li><code>a</code> для строчных букв</li> + <li><code>A</code> для заглавных букв</li> + <li><code>i</code> для строчной Римской нумерации</li> + <li><code>I</code> для заглавной Римской нумерации</li> + <li><code>1</code> для цифр (по умолчанию)</li> + </ul> + + <p>указанный тип используется для всего списка, если только не указан любой другой аттрибут {{HTMLAttrxRef("type", "li")}} в элементе {{HTMLElement("li")}}.</p> + + <div class="blockIndicator note"> + <p><strong>Note:</strong> Если тип цифр в списке не имеет значения (к примеру, юридические или технические документы, где элементы обозначены буквами/цифрами), используйте свойство CSS {{CSSxRef("list-style-type")}}.</p> + </div> + </dd> +</dl> + +<h2 id="Заметки_об_использовании">Заметки об использовании</h2> + +<p>Обычно, элементы списка отображены с <a href="/en-US/docs/Web/CSS/::marker">маркером</a>, предшествующим цифрам или буквам.</p> + +<p><code>Элементы <ol></code> и {{HTMLElement("ul")}} могут быть вложены (nested) на любом уровне, чередуясь между элементами <code><ol></code> и <code><ul></code>.</p> + +<p>Оба элемента <code><ol></code> и {{HTMLElement("ul")}} используются для списков. Различие лишь в том, что в элементе <code><ol></code> порядок имеет значение, как в данных примерах:</p> + +<ul> + <li>Инструкции рецепта</li> + <li>Направление по заданному маршруту</li> + <li>Список ингридиентов на информации о питании, в убывающих пропорциях.</li> +</ul> + +<p>Чтобы определить, каким списком пользоваться, можно поменять порядок элементов с списке.Если значение меняется, используйте элемент <code><ol></code> — в противном случае {{HTMLElement("ul")}}.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Обычный_список">Обычный список</h3> + +<pre class="brush: html"><ol> + <li>Fee</li> + <li>Fi</li> + <li>Fo</li> + <li>Fum</li> +</ol> +</pre> + +<p>Результат HTML кода выше:</p> + +<p>{{EmbedLiveSample("Simple_example", 400, 100)}}</p> + +<h3 id="Список_с_Римскими_числами">Список с Римскими числами</h3> + +<pre class="brush: html"><ol type="i"> + <li>Introduction</li> + <li>List of Greivances</li> + <li>Conclusion</li> +</ol> </pre> + +<p>Результат HTML кода выше:</p> + +<p>{{EmbedLiveSample("Using_Roman_Numeral_type", 400, 100)}}</p> + +<h3 id="Используя_свойство_start">Используя свойство <code>start</code></h3> + +<pre class="brush: html"><p>Finishing places of contestants not in the winners’ circle:</p> + +<ol start="4"> + <li>Speedwalk Stu</li> + <li>Saunterin’ Sam</li> + <li>Slowpoke Rodriguez</li> +</ol> +</pre> + +<p>Результат HTML кода выше:</p> + +<p>{{EmbedLiveSample("Using_the_start_attribute", 400, 100)}}</p> + +<h3 id="Вложенный_список">Вложенный список</h3> + +<pre class="brush: html"><ol> + <li>first item</li> + <li>second item <!-- closing </li> tag not here! --> + <ol> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ol> + </li> <!-- Here's the closing </li> tag --> + <li>third item</li> +</ol> +</pre> + +<p>Результат HTML кода выше:</p> + +<p>{{EmbedLiveSample("Nesting_lists", 400, 150)}}</p> + +<h3 id="Неупорядоченный_список_внутри_упорядоченного_списка">Неупорядоченный список внутри упорядоченного списка</h3> + +<pre class="brush: html"><ol> + <li>first item</li> + <li>second item <!-- closing </li> tag not here! --> + <ul> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ul> + </li> <!-- Here's the closing </li> tag --> + <li>third item</li> +</ol> +</pre> + +<p>Результат HTML кода выше:</p> + +<p>{{EmbedLiveSample("Unordered_list_inside_ordered_list", 400, 150)}}</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-ol-element', '<ol>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Без изменений с последнего W3C, {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Добавлено <code>reversed</code> и приписан <code>start</code>; возможно использование <code>type</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Были убраны <code>compact</code> и <code>type</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица "поддержка браузерами" сгенерирована с помощью структурированных данных. Если хотите внести вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div> + +<p>{{Compat("html.elements.ol")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Другие элементы HTML списка: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}</li> + <li>CSS свойства, которые могут быть полезны для стилизации <code><ol></code> элемента: + <ul> + <li>свойство {{CSSxRef("list-style")}}, для порядковых показов</li> + <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счётчики</a>, для более сложных вложенных списков</li> + <li>свойство <a href="https://developer.mozilla.org/ru/docs/Web/CSS/line-height">line-height</a>, для замены убранного свойства <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/ol#attr-compact">compact</a></li> + <li>Свойство <a href="https://developer.mozilla.org/ru/docs/Web/CSS/margin">margin</a>, для контроля отступа в списке</li> + </ul> + </li> +</ul> |