HTML Списки
Пример списка HTML
Неупорядоченный список:
- Пункт
- Пункт
- Пункт
- Пункт
Упорядоченный список:
- Первый пункт
- Второй пункт
- Третий пункт
- Четвертый пункт
Неупорядоченный список 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> | Описывает термин в списке описания |