ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

HTML5 Tutorial

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Blocks HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Entities HTML Symbols HTML Charset HTML URL Encode HTML XHTML

HTML Forms

HTML Forms HTML Form Elements HTML Input Types HTML Input Attributes

HTML5

HTML5 Intro HTML5 Support HTML5 New Elements HTML5 Semantics HTML5 Migration HTML5 Style Guide

HTML Graphics

HTML Canvas HTML SVG HTML Google Maps

HTML Media

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples

HTML Examples HTML Accessibility

HTML References

HTML Tag List HTML Attributes HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts

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 Элементы списка не будут помечены

Пример - 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>

Note: List items can contain new list, and other HTML elements, like images and links, etc.


Подсчет списка элементов управления

По умолчанию упорядоченный список начнет отсчет с 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

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