САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

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

HTML Формы

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

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые Элементы HTML5 Семантика HTML5 Миграция HTML5 Синтасис

HTML Графика

HTML Canvas HTML SVG HTML Google Карта

HTML Медиа

HTML Медиа HTML Видео HTML Аудио HTML Объекты HTML YouTube

HTML API

HTML Геолокация HTML Перетаскивание HTML Веб Хранилище HTML Веб Работник HTML СОС

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Заключение HTML Возможности

HTML Справочники

HTML Список Тегов HTML Атрибуты HTML Глобальные HTML События HTML Цвета HTML Холст HTML Аудио/Видео HTML Декларации HTML Набор Кодировок HTML URL Код HTML Коды языка HTML Коды стран HTTP Сообщения HTTP Методы Ковертер PX в EM Клавишные комбинации

HTML Списки



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

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

  • Страница
  • Страница
  • Страница
  • Страница

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

  1. Первая страница
  2. Вторая страница
  3. Третья страница
  4. Четвертая страница
Редактор кода »

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

Ненумерованный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.

Элементы списка по умолчанию, будут помечены диском (маленькие черные кружками):

Пример

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

Редактор кода »


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

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

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

Пример - Диск

<ul style="list-style-type:disc">
 <li>Кофе</li>
  <li>Чай</li>
 <li>Молоко</li>
</ul>
Редактор кода »

Пример - Круг

<ul style="list-style-type:circle">
 <li>Кофе</li>
  <li>Чай</li>
 <li>Молоко</li>
</ul>
Редактор кода »

Пример - Квадрат

<ul style="list-style-type:square">
 <li>Кофе</li>
  <li>Чай</li>
 <li>Молоко</li>
</ul>
Редактор кода »

Пример - Ничего

<ul style="list-style-type:none">
 <li>Кофе</li>
  <li>Чай</li>
 <li>Молоко</li>
</ul>
Редактор кода »

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

Упорядоченный список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>.

Элементы списка будут обозначены номера по умолчанию:

Пример

<ol>
 <li>Кофе</li>
  <li>Чай</li>
 <li>Молоко</li>
</ol>
Редактор кода »

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

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

Тип Описание
type="1" Элементы списка будут пронумерованы цифрами (по умолчанию)
type="A" Элементы списка будут пронумерованы заглавными буквами
type="a" Элементы списка будут пронумерованы строчными буквами
type="I" Элементы списка будут пронумерованы прописными римскими цифрами
type="i" Элементы списка будут пронумерованы строчными римскими цифрами

Цифры:

<ol type="1">
 <li>Кофе</li>
  <li>Чай</li>
 <li>Молоко</li>
</ol>
Редактор кода »

Заглавные Буквы:

<ol type="A">
 <li>Кофе</li>
  <li>Чай</li>
 <li>Молоко</li>
</ol>
Редактор кода »

Строчные Буквы:

<ol type="a">
 <li>Кофе</li>
  <li>Чай</li>
 <li>Молоко</li>
</ol>
Редактор кода »

Прописные Римские Цифры:

<ol type="I">
 <li>Кофе</li>
  <li>Чай</li>
 <li>Молоко</li>
</ol>
Редактор кода »

Строчные Римские Цифры:

<ol type="i">
 <li>Кофе</li>
  <li>Чай</li>
 <li>Молоко</li>
</ol>
Редактор кода »

Описание списка HTML

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

Описание списка представляет собой список терминов с описанием каждого термина.

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

Пример

<dl>
 <dt>Кофе</dt>
 <dd>- черный горячий напиток</dd>
 <dt>Молоко</dt>
 <dd>- белый холодный напиток</dd>
</dl>
Редактор кода »

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

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

Пример

<ul>
  <li>Кофе</li>
  <li>Чай
    <ul>
      <li>Черный чай</li>
      <li>Зеленый чай</li>
    </ul>
  </li>
  <li>Молоко</li>
</ul>
Редактор кода »

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


Горизонтальные Списки

Списки 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">Дома</a></li>
  <li><a href="#news">Новости</a></li>
  <li><a href="#contact">Контакты</a></li>
  <li><a href="#about">О</a></li>
</ul>

</body>
</html>
Редактор кода »

Краткое содержание

  • Используйте 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 списка

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