diff options
Diffstat (limited to 'files/ru/web/html/element/li/index.html')
| -rw-r--r-- | files/ru/web/html/element/li/index.html | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/files/ru/web/html/element/li/index.html b/files/ru/web/html/element/li/index.html new file mode 100644 index 0000000000..93210daadd --- /dev/null +++ b/files/ru/web/html/element/li/index.html @@ -0,0 +1,160 @@ +--- +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 notranslate"><ol> + <li>Первый элемент</li> + <li>Второй элемент</li> + <li>Третий элемент</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("Упорядоченный_список")}}</p> + +<h3 id="Упорядоченный_список_с_пользовательским_значением">Упорядоченный список с пользовательским значением</h3> + +<pre class="brush: html notranslate"><ol type="I"> + <li value="3">Третий элемент</li> + <li>Четвёртый элемент</li> + <li>Пятый элемент</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("Упорядоченный_список_с_пользовательским_значением")}}</p> + +<h3 id="Неупорядоченный_список">Неупорядоченный список</h3> + +<pre class="brush: html notranslate"><ul> + <li>Первый элемент</li> + <li>Второй элемент</li> + <li>Третий элемент</li> +</ul></pre> + +<p>{{EmbedLiveSample("Неупорядоченный_список")}}</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-li-element', '<li>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<li>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Атрибут <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.li")}}</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> |