HTML - тег <li>
Пример
Один упорядоченный (<ol>) и один неупорядоченный (<ul>) HTML-список:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Тег <li>
определяет элемент списка.
Тег <li>
используется внутри упорядоченных списков ( <ol> ), неупорядоченных списков ( <ul> ) и в списках меню ( <menu> ).
В <ul> и <menu> элементы списка обычно отображаются с маркерами.
В <ol> элементы списка обычно отображаются цифрами или буквами.
Совет: используйте CSS для оформления списков .
Поддержка браузера
Element | |||||
---|---|---|---|---|---|
<li> | Yes | Yes | Yes | Yes | Yes |
Атрибуты
Attribute | Value | Description |
---|---|---|
value | number | Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number |
Глобальные атрибуты
Тег <li>
также поддерживает глобальные атрибуты в HTML .
Атрибуты события
Тег <li>
также поддерживает атрибуты событий в HTML .
Дополнительные примеры
Пример
Использование атрибута value в упорядоченном списке:
<ol>
<li value="100">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>
Пример
Установите различные типы стилей списка (с помощью CSS):
<ol>
<li>Coffee</li>
<li
style="list-style-type:lower-alpha">Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li
style="list-style-type:square">Tea</li>
<li>Milk</li>
</ul>
Пример
Создайте список внутри списка (вложенный список):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Пример
Создайте более сложный вложенный список:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
Связанные страницы
Учебник по HTML: HTML-списки
Справочник по HTML DOM: объект Li
Учебное пособие по CSS: списки стилей
Настройки CSS по умолчанию
Большинство браузеров будут отображать <li>
элемент со следующими значениями по умолчанию:
li {
display: list-item;
}