Содержание

Тег — пункты списка

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

Описание

HTML тег <li> (li сокращение от англ. list item — элемент списка) определяет пункты списка и может включать в себя любые другие HTML-элементы (списки, абзацы, изображения и др.). По умолчанию браузеры отображают пункты списка с небольшим отступом с левой стороны.

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

Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения.

Обратите внимание, что тег <li> относится к блочным элементам, то есть каждый элемент списка, определенный с его помощью, будет начинаться с новой строки и занимать всю доступную для него ширину.

Примечание: по стандарту HTML5 элемент <li> не обязательно должен завершаться закрывающим тегом.

Атрибуты

value:
Значение, заданное в атрибуте, указывает текущий порядковый номер элемента в списке. Нумерация всех последующих элементов списка будет продолжаться от указанного значения. Пример »

Примечание: работает только с нумерованными списками.

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

Стиль по умолчанию


li {
    display: list-item;
}

Пример


<ol>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>

<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>

Результат данного примера в окне браузера:

Тег li



Пример

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


  Coffee
  Tea
  Milk

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Подробнее примеры ниже.

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

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

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

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

Элемент
<li> Да Да Да Да Да

Различия между HTML 4,01 и HTML5

Атрибут <type> является навестить поддерживается в HTML5.

Атрибут <value> был Устаревшие в HTML 4,01, но поддерживается в HTML5.

Советы и примечания

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

Атрибуты

Атрибут Значение Описание
type 1
A
a
I
i
disc
square
circle		 Не поддерживается в HTML5.
Указывает, какой тип точки маркирования будет использоваться
value number Задает значение элемента списка. Следующие элементы списка будут увеличиваться с этого числа (только для списков <ol>)

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

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

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

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

Попробуйте примеры

Вложенный список
Список внутри списка.

Другой вложенный список
Более сложный вложенный список.

Похожие страницы

HTML Учебник: HTML Lists

HTML DOM Ссылки: Li Object

CSS Учебник: Styling Lists

Параметры CSS по умолчанию

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

li {
    display: list-item;
}

| HTML | WebReference

Элемент <li> (от англ. list item — пункт списка) определяет отдельный пункт списка. Внешний элемент <ul> или <ol> устанавливает тип списка — маркированный или нумерованный.

Синтаксис

<ul>
  <li>элемент маркированного списка</li>
</ul> 

<ol>
  <li>элемент нумерованного списка</li>
</ol>

Закрывающий тег

Не обязателен.

Атрибуты

type
Устанавливает вид маркера нумерованного или маркированного списка.
value
Число, с которого будет начинаться нумерованный список.

Также для этого элемента доступны универсальные атрибуты и события.

Пример

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>LI</title> </head> <body> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li> </ul> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид маркированного списка в браузере

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

HTML тег li | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 22.01.2011

Тег <li> (list item — элемент списка) — тег-контейнер, создает элемент списка. Применяется внутри контейнера <ul> (маркированный список) или <ol> (нумерованный список).

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<ul>
<li>...</li>
</ul>

<ol>
<li>...</li>
</ol>

Атрибуты

Основные Вспомогательные События

class определяет имя используемого класса
compact флаг. Выводит список с уменьшенными отступами.
Не рекомендуется в спецификации HTML 4.01!
dir определяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
id уникальный индетификатор
lang определяет язык отображаемого документа
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
start изменяет порядок нумерации элементов списка
Не рекомендуется в спецификации HTML 4.01!
style задает встроенную таблицу стилей
title всплывающая подсказка
type задает вид маркера
для маркированного списка
  • disc — маркер-диск (по умолчанию)
  • circle — маркер-круг
  • square — маркер-квадрат
для нумерованного
  • A — заглавные латинские буквы
  • a — строчные латинские буквы
  • I — заглавные римские цифры
  • i — строчные римские цифры
  • 1 — арабские цифры (по умолчанию)
Не рекомендуется в спецификации HTML 4.01!
value изменяет порядок нумерации элементов нумерованного списка.
Не рекомендуется в спецификации HTML 4.01!

Пример

Типы маркеров

<ul>
<li type="disc">disc — маркер-диск (по умолчанию)</li>
<li type="circle">circle — маркер-круг</li>
<li type="square">square — маркер-квадрат</li>
</ul>

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

<ol>
<li type="A">Первый</li>
<li type="A">Второй</li>
<li type="a">Третий</li>
<li type="a">Четвертый</li>
</ol>

— На первый-второй расчитайсь!

<ol>
<li type="1">— Первый!</li>
<li type="1">— Второй!</li>
<li type="1" value="1">— Первый!</li>
<li type="1">— Второй!</li>
</ol>

Рекомендации по использованию

  • закрывающий тег обязателен по спецификациям XHTML (</li>)
  • тег <li> должен находиться внутри контейра: <ul>, <ol>, <dir>, <menu>
  • может содержать CDATA, строчные и блочные элементы
  • обязательных атрибутов нет
  • не рекомендуем использовать атрибуты compact, start и type, вместо них следует применять таблицы стлей
  • разные браузеры могут по разному отображать один и тот же тип булетов, так же как и по умолчанию может отличаться установленный тип

Твой код:
<html> <head> <title></title> </head> <body> <ul> <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> </ul> <ol> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> </ol> </body> </html> Сделай код и жми тут

Результат:
большой полигон

По теме

HTML теги. HTML списки. Тег LI.

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена HTML тегу <li>. Описание тега <li>, атрибуты тега <li>, синтаксис тега <li>, пример использования тега <li>. Тег <li> относится к группе тегов HTML списков, тег <li> используется в нумерованных списках, в списках директорий, в маркированных списках, в списках меню, не используется только в списках определений.

HTML тег <li>. Описание <li>.

Содержание статьи:

HTML тег <li> относится к тегам предназначенным для формирования HTML списков.

Тег <li> предназначен для создания пунктов списка или как их еще называют элементы списка. Тег <li> сам по себе бесполезен без тега <ul> или <ol>. Теги <li> и <ul> формируют так называемые неупорядоченные списки, чаще их называют маркированные списки. Теги <li> и <ol> формируют нумерованный список, второе название – упорядоченные списки.

HTML элемент <li> является блочным элементом, то есть, его ширина зависит от области, в которой он стоит, внутри элемента <li> могут располагаться как блочные, так и строчные элементы, благодаря чему можно формировать вложенные списки HTML. Обратите внимание, что элементы <ol> и <ul> являются блочными, но внутри этих элементов можно размещать только элементы <li>.

Тег <li>. Синтаксис тега <li>.

Закрывающий тег для <li> не обязателен, хоть он и является парным HTML тегом, но по правилам хорошего тона закрывающий тег должен быть написан обязательно.

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<ul>

 

<li>Первый элемент</li>

 

<li>Второй элемент</li>

 

<li>Третий элемент</li>

 

</ul>

 

<ol>

 

<li>Раз</li>

 

<li>Два</li>

 

<li>Три</li>

 

</ol>

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

Тег <li>, так же, как и любой другой тег из группы HTML списков, имеет атрибуты событий и универсальные HTML атрибуты. У тега <li> имеется два уникальных атрибута:

Атрибут type, с помощью атрибута type можно задать вид маркера, в случае с маркированным списком

Атрибут value, служит для изменения порядка нумерации, в случае с упорядоченным списком.

Теги HTML списков

В языке HTML имеется целая группа тегов предназначенных для формирования HTML списков.

Теги, формирующие HTML списки:

Тег <li>. Пример использования тега <li>.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Пример использования тега LI</title> </head> <body> <ol type=»I»> <li>Первый <ol type=»i» start=»50″> <li>1.1</li> <li>1.2</li> <li>1.3</li> <li>1.4</li> </ol> </li> <li>Второй <ol reversed type=»A»> <li>2.1</li> <li>2.2</li> <li>2.3</li> </ol> </li> </ol> </body> </html>

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Пример использования тега LI</title>

</head>

<body>

<ol type=»I»>

<li>Первый

<ol type=»i» start=»50″>

<li>1.1</li>

<li>1.2</li>

<li>1.3</li>

<li>1.4</li>

</ol>

</li>

<li>Второй

<ol reversed type=»A»>

<li>2.1</li>

<li>2.2</li>

<li>2.3</li>

</ol>

</li>

 

</ol>

</body>

</html>

Если вы скопируете пример в текстовый редактор(рекомендую Notepad++, бесплатный редактор с подсветкой синтаксиса), а затем запустите его в браузере, то увидите:

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru 

Что значит li в html

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

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

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

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

Синтаксис

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 — маркер — квадрат.

HTML тег <li>

HTML тег <li> (li сокращение от англ. list item — элемент списка) определяет пункты списка и может включать в себя любые другие HTML-элементы (списки, абзацы, изображения и др.). По умолчанию браузеры отображают пункты списка с небольшим отступом с левой стороны.

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

Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения.

Обратите внимание, что тег <li> относится к блочным элементам, то есть каждый элемент списка, определенный с его помощью, будет начинаться с новой строки и занимать всю доступную для него ширину.

Примечание: по стандарту HTML5 элемент <li> не обязательно должен завершаться закрывающим тегом.

HTML тег <li>

Тег <li> определяет отдельные пункты HTML списка. Тип списка определяется соответствующими тегами: <ul> — маркированный список, <ol> — нумерованный список, <menu> — контекстное меню.

В браузере пункты списка имеют небольшой отступ с левой стороны.

Синтаксис¶

Тег <li> парный. В спецификации HTML5 закрывающий тег можно не использовать.

Тег <li> является блочным элементом, это значит его содержимое занимает всю строку, и все дальнейшие элементы переносятся на другую строку.

Вложенность тегов | HTML

Важной концепцией HTML является вложенность тегов. Внутрь HTML-тега можно помещать не только текст, как было ранее, но и другие теги. Это позволяет создавать сложную вёрстку, в которой области отделены друг от друга: меню от шапки сайта, рекламный блок от основного контента и так далее.

Некоторые элементы в HTML требуют вложенности одних тегов в другие. Например, списки:

<ul>
  <li>Первый элемент списка</li>
  <li>Второй элемент списка</li>
</ul>
  • Первый элемент списка
  • Второй элемент списка

Для определения списка используется тег <ul>, который указывает, что это маркированный список. Внутри располагаются теги <li>, определяющие элементы нашего списка.

Такие вложенности похожи на деревья, где есть вершина дерева (тег <ul>) и листья (теги <li>)

|──ul
| |──li
| |──li

Интересно: тег, внутри которого вложены другие теги, ещё называют обёрткой или враппером/wrapper

Дерево может разрастаться и дальше. В уроках про списки будет показано, что внутри элементов списка могут располагаться другие списки и этот процесс почти бесконечен.

Но бывают и исключения. В HTML нельзя вкладывать параграфы в параграфы. Пример ниже будет неправильным:

<p>Параграф
  <p>А вот ещё параграф внутри параграфа</p>.
  Параграф недоволен таким соседством
</p>

В этом уроке мы познакомились с концепцией вложенности тегов в HTML и рассмотрели её на примере создания маркированных списков. В процессе прохождения курса вы изучите множество ситуаций, когда вложенность является лучшим решением, а так же узнаете о тегах, которые нельзя вкладывать друг в друга

Задание

Создайте маркированный список из трёх элементов. Этот тип списка вы изучили в уроке

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы отловить этот момент, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Тег HTML li — Tutorial Republic

Тема: Теги HTML5 СправочникПредыдущая|Следующая

Описание

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

        В следующей таблице приведены контекст использования и история версий этого тега.

        Родитель:
          ,
            , ,
        Размещение: Блок
        Содержимое: Блочный, встроенный и текстовый
        Начальный/конечный тег: Начальный тег: требуется , конечный тег: требуется
        Версия: HTML 2, 3.2, 4, 4.01, 5

        Синтаксис

        Основной синтаксис тега

      1. задается следующим образом:

        HTML / XHTML:

      2. …

        3. В приведенном ниже примере показан тег

      3. в действии. 

          <ул>
    
      4. Элемент 1
        5. 
    
      5. Элемент 2
        6. 
    
      6. Элемент 3
        7.

    Специфические для тега атрибуты

    В следующей таблице показаны атрибуты, относящиеся к тегу

  • .

    Атрибут Значение Описание
    тип круг
    диск
    квадрат
    a
    A
    i
    I
    1     		Устарело Укажите маркер или тип нумерации для элемента списка.
    значение номер Устанавливает номер текущего элемента списка (только для нумерованных списков).

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

    Как и все другие теги HTML, тег

  • поддерживает глобальные атрибуты в HTML5.

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

    Тег

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

    Совместимость с браузером

    Тег

  • поддерживается всеми основными современными браузерами.

    Базовая поддержка —

    • Firefox 1+
    • Google Chrome 1+
    • Internet Explorer 2+
    • Apple Сафари 1+
    • Опера 4+

    Дополнительная литература

    См. учебник по HTML-спискам.

    Связанные теги:

      ,
        .

        HTML тег li — Dofactory

        Тег

      1. создает элемент списка в элементе списка.

        Элементы в ненумерованном списке (

          ) отмечены маркером.

          Элементы в упорядоченном списке (

            ) с порядковым номером.

            Три

          1. элементов с названиями должностей в упорядоченном списке (
              ).

              1. Дизайнеры
              2. Разработчики
              3. Менеджеры 
                <ол>
  
            1. Дизайнеры
              2. 
  
            2. Разработчики
              3. 
  
            3. Менеджеры
              4.
            Попробуйте вживую

            ol = упорядоченный список
            ul = неупорядоченный список
            li = элемент списка

            Чтобы добавить элементы в список HTML, используйте тег

          2. (элемент списка).

            Этот элемент помещается внутри

              (неупорядоченный список) или
                (нумерованный список).

                Тег

                  с 3 элементами
                • и тег
                    с 4 элементами
                  1. .

                    Роли проекта:
                    • Дизайнеры
                    • Разработчики
                    • Менеджеры

                    Задачи проекта:
                    1. Дизайн
                    2. Разработка
                    3. Тест
                    4. Развернуть 
                      Роли в проекте:
<ул>
  
                  2. Дизайнеры
                    3. 
  
                  3. Разработчики
                    4. 
  
                  4. Менеджеры
                    5.

                Задачи проекта: <ол>
              1. Дизайн
              2. Разработка
              3. Тест
              4. Развернуть
              Попробуйте вживую

              В этой таблице перечислены атрибуты тега

            • .

              Атрибут Значение Описание
              значение номер Значение элемента списка
              идентификатор   идентификатор Определяет уникальный идентификатор для элемента li.
              класс   имена классов Устанавливает один или несколько классов CSS для применения к элементу li.
              стиль CSS-стили Задает стиль для элемента li.
              данные-*   значение Определяет дополнительные данные, которые может использовать JavaScript.
              скрытый   скрытый Указывает, скрыт ли элемент li.
              название   текст Устанавливает заголовок, который отображается в виде всплывающей подсказки.

              Дополнительные глобальные атрибуты см. в нашем списке глобальных атрибутов.

              Оформление номеров в упорядоченном списке

              Числа в элементе

                можно настроить с помощью CSS.

                Элемент

                  с пользовательским стилем номера
                1. .

                  1. Дизайнеры
                  2. Разработчики
                  3. Менеджеры 
                    <стиль>
  ол.пользовательский { стиль списка: нет; сброс счетчика: сброс; }
  ol.custom li { приращение счетчика: сброс; }
  ol.custom li::before { content: counter(resetter) ". "; цвет: #ef4444; }


<ол>
  
                2. Дизайнеры
                  3. 
  
                3. Разработчики
                  4. 
  
                4. Менеджеры
                  5.
                Попробуйте вживую

                Тег

              1. является частью группы тегов которые используются для создания списков (т.е. списки элементов) на веб-страницах. Эта группа называется группой тегов списка. Вместе они позволяют создавать комплексные HTML-списки.

                Ниже приведены теги списка.

                Элемент Описание
                <ул> Создает неупорядоченный маркированный список
                <ол> Создает упорядоченный по номерам или алфавиту список
                		3. Определяет элемент списка.Используется в элементах
                  и
                <дл> Определяет список описаний
                <дт> Добавляет термин или имя в элемент
                <дд> Добавляет описание термина или имени к элементу

                Вот когда

              3. Поддержка началась для каждого браузера:

                Хром

                		1.0 Сентябрь 2008 г.

                Фаерфокс

                		1,0 Сентябрь 2002 г.

                IE/пограничный

                		1,0 август 1995 г.

                Опера

                		1.0 Январь 2006 г.

                Сафари

                		1,0 Январь 2003 г.

                Группа списка · Bootstrap

                Группы списков — это гибкий и мощный компонент для отображения серии содержимого. Модифицируйте и расширяйте их для поддержки практически любого содержимого внутри.

                Базовый пример

                Самая простая группа списков — это неупорядоченный список с элементами списка и соответствующими классами. Разработайте его с помощью следующих опций или с помощью собственного CSS по мере необходимости.

                • Крас Хусто Одио
                • Dapibus ac facilisis в
                • Морби лео рисус
                • Porta ac consectetur ac
                • Вестибюль эроса 
                  <ул>
  
              4. Крас Хусто Одио
                5. 
  
              5. Dapibus ac facilisis в
                6. 
  
              6. Морби лео рисус
                7. 
  
              7. Конструкция порта переменного тока
                8. 
  
              8. Вестибюль в эросе
                9.

            Активные элементы

            Добавить .active на .list-group-item , чтобы указать текущий активный выбор.

            • Крас Хусто Одио
            • Dapibus ac facilisis в
            • Морби лео рисус
            • Porta ac consectetur ac
            • Вестибюль эроса 
              <ул>
  
          3. Крас Хусто Одио
            4. 
  
          4. Dapibus ac facilisis в
            5. 
  
          5. Морби лео рисус
            6. 
  
          6. Конструкция порта переменного тока
            7. 
  
          7. Вестибюль в эросе
            8.

        Отключенные элементы

        Добавить .disabled на .list-group-item , чтобы он отображался как disabled. Обратите внимание, что некоторые элементы с .disabled также потребуют пользовательского JavaScript, чтобы полностью отключить их события кликов (например, ссылки).

        • Крас Хусто Одио
        • Dapibus ac facilisis в
        • Морби лео рисус
        • Porta ac consectetur ac
        • Вестибюль эроса 
          <ул>
  
      2. Крас Хусто Одио
        3. 
  
      3. Dapibus ac facilisis в
        4. 
  
      4. Морби лео рисус
        5. 
  
      5. Конструкция порта переменного тока
        6. 
  
      6. Вестибюль в эросе
        7.

    Ссылки и кнопки

    Используйте s или

    Заподлицо

    Добавить .list-group-flush , чтобы удалить некоторые границы и закругленные углы для отображения элементов группы списка от края до края в родительском контейнере (например, в карточках).

    • Крас Хусто Одио
    • Dapibus ac facilisis в
    • Морби лео рисус
    • Porta ac consectetur ac
    • Вестибюль эроса 
      <ул>
  
  • Крас Хусто Одио
    • 
  
  • Dapibus ac facilisis в
    • 
  
  • Морби лео рисус
    • 
  
  • Конструкция порта переменного тока
    • 
  
  • Вестибюль в эросе
    •

    Контекстные классы

    Используйте контекстные классы для оформления элементов списка с помощью фона и цвета с отслеживанием состояния.

    • Dapibus ac facilisis в
    • Это первичный элемент группы списка
    • Это вторичный элемент группы списка
    • Это элемент группы списка успешных операций
    • Это элемент группы списка опасностей
    • Это элемент группы списка предупреждений
    • Это элемент группы информационного списка
    • Это элемент группы светового списка
    • Это групповой элемент темного списка 
      <ул>
  
  • Dapibus ac facilisis в
    • 

  
  
  • Это основной элемент группы списка.
    • 
  
  • Это дополнительный элемент группы списка.
    • 
  
  • Это групповой элемент списка успеха.
    • 
  
  • Это элемент группы списка опасностей.
    • 
  
  • Это элемент группы списка предупреждений.
    • 
  
  • Это элемент группы информационного списка.
    • 
  
  • Это элемент группы облегченного списка.
    • 
  
  • Это групповой элемент черного списка.
    •

    Контекстные классы также работают с .список-группа-элемент-действие . Обратите внимание на добавление здесь стилей наведения, отсутствующих в предыдущем примере. Также поддерживается состояние .active ; примените его, чтобы указать активный выбор в элементе группы контекстного списка. 

      <дел>
  Dapibus ac facilisis

  
  Это основной элемент группы списка
  Это дополнительный элемент группы списка
  Это элемент группы списка успеха
  Это элемент группы списка опасностей
  Это элемент группы списка предупреждений
  Это элемент группы информационного списка
  Это элемент группы облегченного списка
  Это элемент группы темного списка
    Передача смысла вспомогательным технологиям

    Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана.Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .sr-only .

    С значками

    Добавьте значки к любому элементу группы списка, чтобы показать количество непрочитанных сообщений, активность и многое другое с помощью некоторых утилит.

    • Крас Хусто Одио 14
    • Dapibus ac facilis в 2
    • Морби Лео Рисус 1 
      <ул>
  
  • 
    Крас Хусто Одио
    14
  
    • 
  
  • 
    Dapibus ac facilis в
    2
  
    • 
  
  • 
    Морби Лео Рисус
    1
  
    •

    Пользовательский контент

    Добавьте практически любой HTML-код внутри, даже для групп связанных списков, таких как приведенный ниже, с помощью утилит flexbox.

      <дел>
  <а href="#">
    <дел>
       
    Заголовок элемента группы списка
     
      3 дня назад

    • Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.

    Donec id elit non mi porta. <а href="#"> <дел>
    Заголовок элемента группы списка
    3 дня назад

    Donec id elit non mi porta gravida at eget metus.Меценат sed diam eget risus varius blandit.

    Donec id elit non mi porta. <а href="#"> <дел>
    Заголовок элемента группы списка
    3 дня назад