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
210
211
212
213
214
215
216
217
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>
|
