HTML тег <ul> определяет неупорядоченный (маркированный) список.
Неупорядоченный список
Неупорядоченный список начинается с тега <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>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
Попробуйте сами »
Пример - Circle
<ul style="list-style-type:circle;">
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
Попробуйте сами »
Пример - Square
<ul style="list-style-type:square;">
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
Попробуйте сами »
Пример - None
<ul style="list-style-type:none;">
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
Попробуйте сами »
HTML Вложенные списки
Списки могут быть вложенными (список внутри списка):
<ul>
<li>Кофе</li>
<li>Чай
<ul>
<li>Черный чай</li>
<li>Зеленый чай</li>
</ul>
</li>
<li>Молоко</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">Главная</a></li>
<li><a href="#news">Новости</a></li>
<li><a href="#contact">Контакты</a></li>
<li><a href="#about">О Нас</a></li>
</ul>
</body>
</html>
Попробуйте сами »
Совет: Вы можете узнать гораздо больше о CSS в разделе CSS Учебник.
Краткое содержание главы
- Используйте HTML элемент
<ul>для определения неупорядоченного списка - Используйте CSS свойство
list-style-typeдля определения маркера элемента списка - Используйте HTML элемент
<li>для определения элемента списка - Списки могут быть вложенными
- Элементы списка могут содержать другие элементы HTML
- Используйте свойство CSS
float:leftдля отображение списка по горизонтали
HTML Теги списка
| Теги | Описание |
|---|---|
| <ul> | Определяет неупорядоченный список |
| <ol> | Определяет упорядоченный список |
| <li> | Определяет элемент списка |
| <dl> | Определяет описание списка |
| <dt> | Определяет термин в описание списка |
| <dd> | Описывает термин в описание списка |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.