САЙТ НАХОДИТСЯ В РАЗРАБОТКЕ

HTML Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основы HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитаты HTML Комментарии HTML Цвета HTML CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Класс HTML Идентификатор HTML Фреймы HTML JavaScript HTML Пути к файлам HTML Head HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Семантика HTML Объект HTML Символы HTML Emojis HTML Кодировка HTML URL кодирование HTML XHTML HTML Гид по стилю

HTML Формы

HTML Формы HTML Элементы формы HTML Тип ввода HTML Атрибуты ввода

HTML 5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Переход

HTML Графика

HTML Canvas HTML SVG

HTML Media

HTML Медиа HTML Видео HTML Аудио HTML Плагины HTML YouTube

HTML API

HTML Геолокация HTML Drag/Drop HTML Web хранилище HTML Web работник HTML SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Резюме HTML Доступность

HTML Справочник

HTML Список тегов HTML Атрибуты HTML Глоб. атрибуты HTML События HTML Цвета HTML Canvas HTML Аудио/Видео HTML Набор символов HTML DOCTYPE HTML URL Кодирование HTML Коды языков HTML Коды стран HTTP Сообщений HTTP Метод PX в EM Конвертер Горячие клавиши
Баннер ТОП

HTML Списки

 HTML Пример списка

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

  • Пункт
  • Пункт
  • Пункт
  • Пункт

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

  1. Первый пункт
  2. Второй пункт
  3. Третий пункт
  4. Четвёртый пункт
Попробуйте сами »

Неупорядоченный 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 style="list-style-type:disc;">
  <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 для горизонтального отображения списка

HTML Упражнения

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

Упражнение:

Добавьте элемент списка с текстом "Coffee" внутри элемента <ul>.

<ul>Coffee</ul>

Начать упражнение


HTML Теги списка

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

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