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> | Описывает термин в списке описания |