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
|
---
title: <li>
slug: Web/HTML/Element/li
tags:
- Element
- HTML
- Reference
- списки
translation_of: Web/HTML/Element/li
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML-элемент <code><li></code></strong> используется для создания элементов списка.</span> Он также должен находиться в родительском элементе: упорядоченном списке ({{HTMLElement("ol")}}), неупорядоченном списке ({{HTMLElement("ul")}}), или меню ({{HTMLElement("menu")}}). В меню и неупорядоченных списках, элементы списка обычно отображаются с маркерами в виде круга. В упорядоченных списках, они обычно отображаются с маркерами в виде возрастающего счётчика слева, например числа или буквы.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/li.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="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
<td>Нет.</td>
</tr>
<tr>
<th scope="row">Разрешённое содержимое</th>
<td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a></td>
</tr>
<tr>
<th scope="row">Пропуск тегов</th>
<td>Закрывающий тег может быть опущен, если за элементом непосредственно следует другой элемент {{HTMLElement("li")}} или если в родительском элементе нет больше содержимого.</td>
</tr>
<tr>
<th scope="row">Разрешённые родители</th>
<td>Элементы {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, или {{HTMLElement("menu")}}. Хотя и не соответствует использованию, устаревший {{HTMLElement("dir")}} тоже может быть родительским элементом.</td>
</tr>
<tr>
<th scope="row">Разрешённые ARIA-роли</th>
<td>{{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("presentation")}}, {{ARIARole("radio")}}, {{ARIARole("separator")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td>
</tr>
<tr>
<th scope="row">DOM-интерфейс</th>
<td>{{domxref("HTMLLIElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Атрибуты">Атрибуты</h2>
<p>Этот элемент включает <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
<dl>
<dt>{{htmlattrdef("value")}}</dt>
<dd>Этот числовой атрибут указывает на текущий порядковый номер элемента в списке, заданного с помощью элемента {{HTMLElement("ol")}}. Единственное разрешённое значение этого атрибута — число, даже если список отображается с римскими цифрами или буквами. Элементы списка, которые идут после элемента с таким атрибутом, нумеруются с заданного значения. Атрибут <strong>value</strong> не имеет значения для неупорядоченных списков ({{HTMLElement("ul")}}) или для меню ({{HTMLElement("menu")}}).
<div class="note"><strong>Примечание</strong>: Этот атрибут был убран в HTML4, но заново добавлен в HTML5.</div>
<div class="note">
<p><strong>Примечание:</strong> Предыдущие до {{Gecko("9.0")}}, отрицательные значения неправильно конвертировались в 0. Начиная с {{Gecko("9.0")}} все числовые значения воспринимаются правильно.</p>
</div>
</dd>
<dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt>
<dd>Этот символьный атрибут указывает на тип нумерации:
<p class="hidden">Строчные буквы — это которые не заглавные.</p>
<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>
Этот атрибут переопределяет тип унаследованный от родительского элемента {{HTMLElement("ol")}} или любого другого.
<div class="note"><strong>Примечание к использованию:</strong> Этот атрибут был убран: используйте CSS-свойство {{cssxref("list-style-type")}} взамен.</div>
</dd>
</dl>
<h2 id="Примеры">Примеры</h2>
<p>Для более подробных примеров смотрите страницы {{htmlelement("ol")}} и {{htmlelement("ul")}}.</p>
<h3 id="Упорядоченный_список">Упорядоченный список</h3>
<pre class="brush: html"><ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
</pre>
<p>{{EmbedLiveSample("Упорядоченный_список")}}</p>
<h3 id="Упорядоченный_список_с_пользовательским_значением">Упорядоченный список с пользовательским значением</h3>
<pre class="brush: html"><ol type="I">
<li value="3">Третий элемент</li>
<li>Четвёртый элемент</li>
<li>Пятый элемент</li>
</ol>
</pre>
<p>{{EmbedLiveSample("Упорядоченный_список_с_пользовательским_значением")}}</p>
<h3 id="Неупорядоченный_список">Неупорядоченный список</h3>
<pre class="brush: html"><ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul></pre>
<p>{{EmbedLiveSample("Неупорядоченный_список")}}</p>
<h2 id="Спецификации">Спецификации</h2>
{{Specifications}}
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>Остальные списковые HTML-элементы: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} и устаревший {{HTMLElement("dir")}};</li>
<li>CSS-свойства, которые были бы полезны для стилизации <code><li></code> элементов:
<ul>
<li>свойство {{cssxref("list-style")}}, для выбора стиля маркера/порядкового номера,</li>
<li><a href="/ru/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счётчики</a>, для обработки сложных вложенных списков,</li>
<li>свойство {{cssxref("margin")}}, для контроля отступа между элементами списка.</li>
</ul>
</li>
</ul>
|
