Ненумерованные списки HTML
Тег HTML <ul>
определяет неупорядоченный (маркированный) список.
Неупорядоченный список HTML
Ненумерованный список начинается с <ul>
тега. Каждый элемент списка начинается с
<li>
тега.
Элементы списка будут отмечены маркерами (маленькими черными кружками) по умолчанию:
Пример
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Неупорядоченный список HTML — выберите маркер элемента списка
Свойство CSS list-style-type
используется для определения стиля маркера элемента списка. Он может иметь одно из следующих значений:
Value | Description |
---|---|
disc | Sets the list item marker to a bullet (default) |
circle | Sets the list item marker to a circle |
square | Sets the list item marker to a square |
none | The list items will not be marked |
Пример — диск
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Пример — круг
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Пример — квадрат
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Пример - нет
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Вложенные списки HTML
Списки могут быть вложенными (список внутри списка):
Пример
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</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">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>
для определения неупорядоченного списка - Используйте
list-style-type
свойство CSS для определения маркера элемента списка - Используйте
<li>
элемент HTML для определения элемента списка - Списки могут быть вложенными
- Элементы списка могут содержать другие элементы HTML
- Используйте свойство CSS
float:left
для горизонтального отображения списка
HTML-теги списка
Tag | Description |
---|---|
<ul> | Defines an unordered list |
<ol> | Defines an ordered list |
<li> | Defines a list item |
<dl> | Defines a description list |
<dt> | Defines a term in a description list |
<dd> | Describes the term in a description list |
Полный список всех доступных HTML-тегов см. в нашем Справочнике по HTML-тегам .