HTML <li> тег

  • Предыдущая страница <legend>
  • Следующая страница <link>

Определение и использование

<li> тег определяет элемент списка.

<li> тег используется для упорядоченного списка (<ol>) и неупорядоченный список (<ul>) и меню-список (<menu>)

В <ul> и <menu> элементы списка обычно отображаются маркерами.

В <ol> элементы списка обычно отображаются числами или буквами.

Совет:Используйте CSS дляУстановите стиль списка.

См. также:

Урок HTML:HTML Списки

Руководство по HTML DOM:Объект Li

Урок CSS:Установите стиль списка

Пример

Пример 1

упорядоченный (<ol>) и неупорядоченный (<ul>) HTML-список:

<ol>
  <li>Кофе</li>
  <li>茶</li>
  <li>Молоко</li>
</ol>
<ul>
  <li>Кофе</li>
  <li>茶</li>
  <li>Молоко</li>
</ul>

Попробуйте сами

Пример 2

Используйте атрибут value в упорядоченном списке:

<ol>
  <li value="100">咖啡</li>
  <li>茶</li>
  <li>Молоко</li>
  <li>纯水</li>
  <li>果汁</li>
  <li>啤酒</li>
</ol>

Попробуйте сами

Пример 3

Установите различные типы стилей списков (используя CSS):

<ol>
  <li>Кофе</li>
  <li style="list-style-type:lower-alpha">茶</li>
  <li>Молоко</li>
</ol>
<ul>
  <li>Кофе</li>
  <li style="list-style-type:square">茶</li>
  <li>Молоко</li>
</ul>

Попробуйте сами

Пример 4

Создайте список в списке (вложенный список):

<ul>
  <li>Кофе</li>
  <li>Чай
    <ul>
      <li>Пуэр
      <li>绿茶</li>
    </ul>
  </li>
  <li>Молоко</li>
</ul>

Попробуйте сами

Пример 5

Создайте более сложную вложенную список:

<ul>
  <li>Кофе</li>
  <li>Чай
    <ul>
      <li>Пуэр
      <li>Зелёный чай
        <ul>
          <li>Бодайхэ</li>
          <li>Лунное чаё</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Молоко</li>
</ul>

Попробуйте сами

Свойство

Свойство Значение Описание
value Число Доступно только для списков <ol>. Определяет начальное значение элемента списка. Следующие элементы списка будут увеличиваться от этого числа.

Глобальные свойства

<li> Тег также поддерживает Глобальные свойства в HTML.

свойства событий

<li> Тег также поддерживает Свойства событий в HTML.

Настройки CSS по умолчанию

Большинство браузеров будут использовать следующие значения по умолчанию для отображения <li> Элемент:

li {
  display: list-item;
}

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <legend>
  • Следующая страница <link>