HTML Списки
HTML Списки позволяют веб-разработчикам группировать набор связанных элементов в списках.
HTML Пример списка
Неупорядоченный список:
- Пункт
- Пункт
- Пункт
- Пункт
Упорядоченный список:
- Первый пункт
- Второй пункт
- Третий пункт
- Четвёртый пункт
Неупорядоченный HTML Список
Неупорядоченный (ненумерованный) список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.
Элементы списка будут помечены маркерами (маленькие чёрные круги) по умолчанию:
Неупорядоченный 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>.
Элементы списка будут помечены номерами по умолчанию:
Упорядоченный HTML Список - Атрибут Type
Атрибут type тега <ol> определяет тип маркера элемента списка:
| Тип | Описание |
|---|---|
| type="1" | Элементы списка будут пронумерованы цифрами (по умолчанию) |
| type="A" | Элементы списка будут пронумерованы заглавными буквами |
| type="a" | Элементы списка будут пронумерованы строчными буквами |
| type="I" | Элементы списка будут пронумерованы большими римскими цифрами |
| type="i" | Элементы списка будут пронумерованы маленькими римскими цифрами |
Заглавные (Титульные) буквы:
<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>Кава</dt>
<dd>- чорний гарячий напій</dd>
<dt>Молоко</dt>
<dd>- білий холодний напій</dd>
</dl>
Попробуйте сами »
Вложенные HTML-списки
Список может быть вложенным (списки внутри списков):
Пример
<ul>
<li>Кава</li>
<li>Чай
<ul>
<li>Чорний чай</li>
<li>Зелений чай</li>
</ul>
</li>
<li>Молоко</li>
</ul>
Попробуйте сами »
Примечание: Элементы списка могут содержать новый список и другие элементы HTML, такие, как изображения, ссылки и т.д.
Подсчет контрольного списка
По умолчанию упорядоченный список начинает отсчет с 1. Если вы хотите начать отсчет из указанного числа, вы можете использовать атрибут start:
Горизонтальный список с помощью 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 Учебнике на нашем сайте W3Schools на русском.
Резюме раздела
- Используйте 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 Упражнения
HTML Теги списка
| Тег | Описание |
|---|---|
| <ul> | Определяет неупорядоченный (ненумерованный) список |
| <ol> | Определяет упорядоченный (нумерованный) список |
| <li> | Определяет пункты списка |
| <dl> | Определяет список описания |
| <dt> | Определяет термин в списке описания |
| <dd> | Описывает термин в списке описания |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.
HTML - Списки - Видеоурок W3Schools
В этом видео объясняются списки в HTML.
Часть серии видеоуроков для изучения HTML для начинающих!
Вопросы для самоконтроля
- Для чего нужны HTML-списки?
- Какие HTML-списки бывают?
- Каким тегом определяется неупорядоченный HTML-список?
- Каким тегом определяется упорядоченный HTML-список?
- Каким тегом определяется каждый элемент в HTML-списке?
- Как по умолчанию маркируются элементы неупорядоченного списка HTML?
- Как по умолчанию маркируются элементы упорядоченного списка HTML?
- Что такое список описаний?
- Какой тег определяет список описаний?
- Какой тег определяет термин (имя) в списке описания?
- Какой тег определяет описание каждого термина в списке описания?
