HTML Списки

Курс по основам HTML. W3Schools на русском. Уроки для начинающих

❮ Prev Next ❯

Как создать списки на веб-странице?

HTML список. Пример

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

Item
Item
Item
Item

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

First item
Second item
Third item
Fourth item

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

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

Неупорядоченный (ненумерованный) список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>. Элементы списка будут обозначены метками (маленькие черные кружочки) по умолчанию:

Пример:

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

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

Неупорядоченный список HTML - выберите маркер пункта списка

CSS свойство list-style-type используется для определения стиля маркера элемента списка:

Значение	Описание
disc	Устанавливает маркер элемента списка в виде закрашенного кружочка (как и по умолчанию)
circle	Устанавливает маркер элемента списка в виде пустого кружочка
square	Устанавливает маркер элемента списка в виде квадрата
none	Элементы списка не будет помечено (то есть маркеры не будут отображаться)

Пример - disc:

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

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

Пример - circle:

<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

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

Пример - square:

<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

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

Пример - none:

<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

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

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

Упорядоченный (нумерованный) список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>. Элементы списка будут обозначены номерами по умолчанию:

Пример:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

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

Упорядоченный HTML список - атрибут type

Атрибут type тега <ol> определяет тип маркера элемента списка:

Значение	Описание
type="1"	Элементы списка будут пронумерованы числами (по умолчанию)
type="A"	Элементы списка будут пронумерованы большими буквами
type="a"	Элементы списка будут пронумерованы маленькими буквами
type="I"	Элементы списка будут пронумерованы большими римскими числами
type="i"	Элементы списка будут пронумерован маленькими римскими числами

Числа:

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

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

Большие буквы:

<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

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

Маленькие буквы:

<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

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

Большие римские цифры:

<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

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

Маленькие римские цифры:

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

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

HTML списки описания

HTML также поддерживает списки описания.

Список описания - это список терминов с описанием каждого термина. Тег <dl> определяет список описания, тег <dt> определяет термин (название), а тег <dd> описывает каждый термин:

Пример:

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

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

Вложенные HTML списки

Список может быть вложенным (списки внутри списков):

Пример:

<ul>
<li>Coffee</li>
<li>Tea
<ul>
    <li>Black tea</li>
      <li>Green tea</li>
    </ul>
</li>
<li>Milk</li>
</ul>

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

Примечание: Элементы списка могут содержать новый список и другие элементы HTML, например изображения, ссылки и др.

Контроль подсчёта списка

По умолчанию, упорядоченный список начнёт отсчёт с единицы - 1. Если вы хотите начать отсчёт с какого-то другого определённого числа, вы можете использовать атрибут start (начало):

Пример:

<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

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

Горизонтальный список с помощью CSS

HTML списки можно создавать разными способами с помощью CSS. Одним из популярных способов является формирование списка по горизонтали, чтобы создать навигационное меню:

Пример:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

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

Примечание: Вы можете узнать больше о CSS в Учебнике по CSS.

Резюме раздела

Используйте HTML элемент <ul> для определения неупорядоченного списка
Используйте CSS свойство list-style-type для определения вида маркера элемента списка
Используйте HTML элемент <ol> для определения упорядоченного (нумерованного) списка
Используйте HTML атрибут type чтобы определить тип нумерации
Используйте HTML элемент <li> для определения элемента списка
Используйте HTML элемент <dl> для определения списка описания
Используйте HTML элемент <dt> чтобы определить термин описания
Используйте HTML элемент <dd> чтобы описать термин в списке описания
Списки могут быть вложенными внутри списков
Элементы списка могут содержать другие элементы HTML
Используйте CSS свойство float: left или display: inline для отображения списка горизонтально

Проверьте себя с помощью упражнений!

Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 » Упражнение 5 » Упражнение 6 »

HTML теги списка

Тег	Описание
`<ul>`	Определяет неупорядоченный (ненумерованный) список
`<ol>`	Определяет упорядоченный (нумерованный) список
`<li>`	Определяет элемент списка
`<dl>`	Определяет список описания
`<dt>`	Определяет термин в списке описания
`<dd>`	Описывает термин в списке описания

Примечание: Для получения полного списка всех доступных HTML тегов, посетите Справочник HTML тегов.

❮ Prev Next ❯