Учебник по 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-фреймы HTML JavaScript Пути HTML-файлов HTML-голова HTML-макет HTML Отзывчивый HTML компьютерный код HTML-семантика Руководство по стилю HTML HTML-сущности HTML-символы HTML-смайлики HTML-кодировка HTML-кодирование URL-адреса HTML против XHTML

HTML -формы

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

HTML- графика

HTML-холст HTML SVG

HTML- медиа

HTML-медиа HTML-видео HTML-аудио HTML-плагины HTML YouTube

HTML -API

HTML-геолокация Перетаскивание HTML Веб-хранилище HTML Веб-воркеры HTML HTML SSE

HTML- примеры

HTML-примеры HTML-викторина HTML-упражнения HTML-сертификат Резюме HTML Доступность HTML

HTML -ссылки

Список тегов HTML HTML-атрибуты Глобальные атрибуты HTML Поддержка HTML-браузера HTML-события Цвета HTML HTML-холст HTML-аудио/видео Типы документов HTML Наборы символов HTML HTML-кодирование URL-адреса Языковые HTML-коды HTTP-сообщения HTTP-методы Конвертер PX в EM Горячие клавиши

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


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


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

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

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

Пример

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


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

Свойство CSS list-style-typeиспользуется для определения стиля маркера элемента списка. Он может иметь одно из следующих значений:

Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

Пример — диск

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

Пример — круг

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

Пример — квадрат

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

Пример - нет

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


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

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

Пример

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

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


Горизонтальный список с помощью 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>для определения неупорядоченного списка
  • Используйте list-style-typeсвойство CSS для определения маркера элемента списка
  • Используйте <li>элемент HTML для определения элемента списка
  • Списки могут быть вложенными
  • Элементы списка могут содержать другие элементы HTML
  • Используйте свойство CSS float:leftдля горизонтального отображения списка

HTML-теги списка

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

Полный список всех доступных HTML-тегов см. в нашем Справочнике по HTML-тегам .