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

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к Файлу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 CanvasHTML SVGHTML 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> Описывает термин в описание списка