— HTML | MDN

HTML-элемент <li> используется для создания элементов списка. Он также должен находиться в родительском элементе: упорядоченном списке (<ol>), неупорядоченном списке (<ul>), или меню (<menu>). В меню и неупорядоченных списках, элементы списка обычно отображаются с маркерами в виде круга. В упорядоченных списках, они обычно отображаются с маркерами в виде возрастающего счётчика слева, например числа или буквы.

Категории контентаНет.
Допустимое содержимоеПотоковый контент
Пропуск теговЗакрывающий тег может быть опущен, если за элементом непосредственно следует другой элемент <li> или если в родительском элементе нет больше содержимого.
Допустимые родителиЭлементы <ul>, <ol>
, или <menu>. Хотя и не соответствует использованию, устаревший <dir> (en-US) тоже может быть родительским элементом.
Допустимые ARIA-ролиmenuitem (en-US), menuitemcheckbox (en-US), menuitemradio (en-US), option (en-US), presentation (en-US), radio (en-US), separator (en-US), tab (en-US), treeitem (en-US)
DOM-интерфейсHTMLLIElement (en-US)

Этот элемент включает глобальные атрибуты.

value

Этот числовой атрибут указывает на текущий порядковый номер элемента в списке, заданного с помощью элемента <ol>. Единственное разрешённое значение этого атрибута — число, даже если список отображается с римскими цифрами или буквами. Элементы списка, которые идут после элемента с таким атрибутом, нумеруются с заданного значения. Атрибут

value не имеет значения для неупорядоченных списков (<ul>) или для меню (<menu>).

Примечание: Этот атрибут был убран в HTML4, но заново добавлен в HTML5. Примечание: Предыдущие до Gecko 9.0, отрицательные значения неправильно конвертировались в 0. Начиная с Gecko 9.0 все числовые значения воспринимаются правильно.

type Устарело

Этот символьный атрибут указывает на тип нумерации:

Для более подробных примеров смотрите страницы <ol> и <ul>.

Упорядоченный список

<ol>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ol>

Упорядоченный список с пользовательским значением

<ol type="I">
  <li value="3">Третий элемент</li>
  <li>Четвёртый элемент</li>
  <li>Пятый элемент</li>
</ol>

Неупорядоченный список

<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>
Specification
HTML Standard
# the-li-element

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • Остальные списковые HTML-элементы: <ul>, <li>, <menu> и устаревший <dir> (en-US);
  • CSS-свойства, которые были бы полезны для стилизации <li> элементов:
    • свойство list-style (en-US), для выбора стиля маркера/порядкового номера,
    • CSS счётчики, для обработки сложных вложенных списков,
    • свойство margin, для контроля отступа между элементами списка.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Тег HTML элемент списка

Рейтинг: 4 из 5, голосов 8

02 октября 2019 г.

Тег <li> в HTML определяет элемент (пункт) списка.

Тег <li> должен быть дочерним тегом нумерованного списка <ol> или маркированного списка <ul>.

При помощи CSS свойств для конкретного пункта списка можно изменять параметры: тип маркера, его положение (для маркированного списка), тип нумерации (для нумерованного списка). Подробнее на странице: Создание списков. Все о HTML списках.

Синтаксис

<li>контент элемента</li>

Отображение в браузере

Тег li в маркированном списке:

Основные характеристики 3D принтера:

  • Область печати
  • Точность позиционирования по осям X, Y, Z
  • Диаметр сопла
  • Диаметр нити
  • Высота слоя
  • Скорость печати

Тег li в нумерованном списке:

Документы для подачи заявки на визу:

  1. Действительный заграничный паспорт
  2. Визовая анкета
  3. Одна фотография длиной и шириной 5 см
  4. Письмо-подтверждение назначенного собеседования

Пример использования <li> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Элемент li в маркированном HTML списке</title>
</head>
<body>
<ul>
<li>Область печати</li>
<li>Точность позиционирования по осям X, Y, Z</li>
<li>Диаметр сопла</li>
<li>Высота слоя</li>
<li>Скорость печати</li>
</ul>
</body>
</html>

Поддержка браузерами

Тег
<li> Да Да Да Да Да

Атрибуты тега <li>

Атрибут Значение Описание
value число

Устанавливает значение нумерации для текущего пункта. Последующие пункты <li> будут иметь номера идущие за указанным.
Только для нумерованных списков <ol>.

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

Устаревшие атрибуты

Атрибут Значение Описание
type 1
A
a
I
i
disc
square
circle

Тип оформления списка:

1 — арабские цифры (1, 2, 3, 4, 5…).
A — английский алфавит. Заглавные (прописные) буквы (A, B, C, D, E…).
a — английский алфавит. Строчные буквы (a, b, c, d, e…).
I — римские цифры. Заглавные (прописные) символы (I, II, III, IV, V…).
i — римские цифры. Строчные символы (i, ii, iii, iv, v…).

disc — маркер — диск (заполненный круг).
square — маркер — кольцо.
circle — маркер — квадрат.

by Lebedev

: Элемент элемента списка — HTML: язык гипертекстовой разметки

HTML-элемент

  • используется для представления элемента в списке. Он должен содержаться в родительском элементе: упорядоченном списке (
      ), ненумерованном списке (
        ) или меню (
        ). В меню и неупорядоченных списках элементы списка обычно отображаются с помощью маркеров. В упорядоченных списках они обычно отображаются с возрастающим счетчиком слева, например цифрой или буквой.

        Этот элемент включает глобальные атрибуты.

        значение

        Этот целочисленный атрибут указывает текущее порядковое значение элемента списка, как определено элементом

          . Единственным допустимым значением этого атрибута является число, даже если список отображается римскими цифрами или буквами. Элементы списка, которые следуют за этим, продолжают нумерацию от установленного значения. Атрибут
          значение           не имеет значения для ненумерованных списков (
            ) или для меню ( ).

        тип Устаревший Нестандартный

        Этот символьный атрибут указывает тип нумерации:

        • a : строчные буквы
        • A : прописные буквы
        • i : строчные римские цифры
        • I : римские цифры в верхнем регистре
        • 1 : номера

        Этот тип переопределяет тот, который используется его родительским элементом

          , если таковой имеется.

          Примечание: Этот атрибут устарел; вместо этого используйте свойство CSS list-style-type .

        Более подробные примеры см. на страницах

          и
            .

            Заказной список 

             
              
  
            1. первый элемент
              2. 
  
            2. второй элемент
              3. 
  
            3. третий элемент
              4.

            Упорядоченный список с пользовательским значением 

             
              
  
            1. третий элемент
              2. 
  
            2. четвертый элемент
              3. 
  
            3. пятый элемент
              4.

            Ненумерованный список 

             
              
  
            • первый элемент
              • 
  
            • второй элемент
              • 
  
            • третий элемент
              •
            Категории контента Нет.
            Разрешенный контент Текущее содержимое.
            Отсутствие тега Конечный тег можно опустить, если за элементом списка сразу следует другой элемент
          • , или если больше нет содержимое в своем родительском элементе.
            • Разрешенные родители
              ,
                или <меню> элемент. Хотя и не соответствующее использование, устаревшее также может быть родителем.
            Неявная роль ARIA элемент списка когда ребенок ол , ул или меню
            Разрешенные роли ARIA пункт меню , пункт менюфлажок , пункт менюрадио , опция , нет , презентация , радио , сепаратор , вкладка , элемент дерева
            Интерфейс DOM HTMLLIElement
            Спецификация
            Стандарт HTML
            # the-li-element
            0 90 загрузка только в таблицах браузера BCD. Включите JavaScript для просмотра данных.

            • Другие элементы HTML, связанные со списками:
                ,
                  , и устаревший ;
                1. свойств CSS, которые могут быть особенно полезны для стилизации элемента
                2. :
                  • свойство в стиле списка , чтобы выбрать способ отображения порядкового номера,
                  • CSS-счетчики для обработки сложных вложенных списков,
                  • свойство margin для управления отступом элемента списка.

              Обнаружили проблему с содержанием этой страницы?

              • Отредактируйте страницу на GitHub.
              • Сообщить о проблеме с содержимым.
              • Посмотреть исходный код на GitHub.

              Хотите принять участие?

              Узнайте, как внести свой вклад.

              Эта страница была последний раз изменена участниками MDN.

              Тег HTML li

              ❮ Назад Полный справочник HTML Далее ❯


              Пример

              Один упорядоченный (

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

                  <ол>

                • Кофе

                • Чай

                • Молоко


              • Кофе

              • Чай

              • Молоко

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

              Другие примеры «Попробуйте сами» ниже.

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

              Тег

            • определяет элемент списка.

              Тег

            • используется внутри упорядоченных списков (
                ), неупорядоченных списков (
                  ) и в списки меню (<меню>).

                  В

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

                    В

                      элементы списка обычно отображаются цифрами или буквами.

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

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

                      Элемент
                    		1.  Да Да Да Да Да

                      Атрибуты

                      Атрибут Значение Описание
                      значение номер Только для списков
                        . Задает начальное значение элемента списка. следующие элементы списка будут увеличиваться с этого числа

                      Глобальные атрибуты

                      Тег

                    2. также поддерживает глобальные атрибуты в HTML.

                      Атрибуты событий

                      Тег

                    3. также поддерживает атрибуты событий в HTML.

                      Дополнительные примеры

                      Пример

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


                      1. Кофе

                      2. Чай

                      3. Молоко

                      4. Вода

                      5. Сок

                      6. Пиво

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

                      Пример

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


                         
                      1. Кофе

                        2.  
                      2. Чай

                        3.  
                      3. Молоко


                         
                      • Кофе

                        •  
                      • Чай

                        •  
                      • Молоко

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

                      Пример

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


                          < li>Кофе
                         
                      • Чай
                           

                        • Черный чай

                          •      
                        • Зеленый чай


                         

                        •  
                      • Молоко

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

                      Пример

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


                         
                      • Кофе

                        •  
                      • Чай
                           

                        • Черный чай

                          •      
                        • Зеленый чай
                          <ул>
                        • Китай

                        • Африка

                          •        


                        •    

                       

                      4.  
                    4. Молоко

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

                  Связанные страницы

                  Учебник по HTML: Списки HTML

                  Ссылка на HTML DOM: Li Object

                  Учебник по CSS: Списки стилей

                  Большинство браузеров 7 элемент
                • со следующими значениями по умолчанию:

                  li {
                    display: list-item;
                  }

                  ❮ Предыдущий Полный справочник HTML Следующий ❯


                  ВЫБОР ЦВЕТА

                  Лучшие учебники
                  Учебное пособие по HTML
                  Учебное пособие по CSS
                  Учебное пособие по JavaScript
                  Учебное пособие
                  Учебное пособие по SQL
                  Учебное пособие по Python
                  Учебное пособие по W3. CSS
                  Учебное пособие по Bootstrap
                  Учебное пособие по PHP
                  Учебное пособие по Java
                  Учебное пособие по C++
                  Учебное пособие по jQuery

                  904 Справочник по HTML
                  Справочник по CSS
                  Справочник по JavaScript
                  Справочник по SQL
                  Справочник по Python
                  Справочник по W3.CSS
                  Справочник по Bootstrap
                  Справочник по PHP
                  Цвета HTML
                  Справочник по Java
                  Справочник по Angular
                  Справочник по jQuery

                  Основные примеры
                  Примеры HTML
                  Примеры CSS
                  Примеры JavaScript
                  Примеры инструкций
                  Примеры SQL
                  Примеры Python
                  Примеры W3.CSS
                  Примеры Bootstrap
                  Примеры PHP
                  Примеры Java
                  Примеры XML
                  Примеры jQuery
                  FORUM | О

                  W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

                  No related posts.