Вложенные списки в HTML позволяют структурировать информацию в более детализированном и иерархическом виде. В этом уроке мы рассмотрим, как создавать вложенные списки, избегать распространенных ошибок и использовать их на практике.
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2
<ul>
<li>Вложенный элемент 1</li>
<li>Вложенный элемент 2</li>
</ul>
</li>
<li>Элемент списка 3</li>
</ul>
<ol>
<li>Первый элемент</li>
<li>Второй элемент
<ol>
<li>Вложенный элемент 1</li>
<li>Вложенный элемент 2</li>
</ol>
</li>
<li>Третий элемент</li>
</ol>
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2
<ol>
<li>Вложенный элемент 1</li>
<li>Вложенный элемент 2</li>
</ol>
</li>
<li>Элемент списка 3</li>
</ul>
Вложенные списки можно стилизовать с помощью CSS, чтобы они выглядели более привлекательно и удобно читались.
<style>
ul, ol {
margin-left: 20px;
}
ul.custom-ul {
list-style-type: square;
}
ol.custom-ol {
list-style-type: upper-alpha;
}
</style>
<ul class="custom-ul">
<li>Элемент списка 1</li>
<li>Элемент списка 2
<ul>
<li>Вложенный элемент 1</li>
<li>Вложенный элемент 2</li>
</ul>
</li>
<li>Элемент списка 3</li>
</ul>
<ol class="custom-ol">
<li>Первый элемент</li>
<li>Второй элемент
<ol>
<li>Вложенный элемент 1</li>
<li>Вложенный элемент 2</li>
</ol>
</li>
<li>Третий элемент</li>
</ol>
Не забывайте правильно закрывать теги иерархии списков.
<!-- Неправильно -->
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2
<ul>
<li>Вложенный элемент 1
<li>Вложенный элемент 2</li>
</ul>
</li>
</ul>
<!-- Правильно -->
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2
<ul>
<li>Вложенный элемент 1</li>
<li>Вложенный элемент 2</li>
</ul>
</li>
</ul>
<li> внутри списковНе используйте другие элементы, такие как <p> или <div>, вместо <li> внутри списков.
<!-- Неправильно -->
<ul>
<p>Элемент списка 1</p>
<p>Элемент списка 2</p>
</ul>
<!-- Правильно -->
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
</ul>
Вложенные списки позволяют создать более сложные иерархии информации на веб-странице. Следуя правилам и избегая распространенных ошибок, вы сможете создавать четко структурированные и легко читаемые списки.
Создайте веб-страницу, которая содержит следующие элементы:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Вложенные списки в HTML</title>
<style>
ul, ol {
margin-left: 20px;
}
ul.custom-ul {
list-style-type: square;
}
ol.custom-ol {
list-style-type: lower-roman;
}
</style>
</head>
<body>
<h1>Вложенные списки в HTML</h1>
<h2>Неупорядоченный список</h2>
<ul class="custom-ul">
<li>Элемент списка 1</li>
<li>Элемент списка 2
<ul>
<li>Вложенный элемент 1</li>
<li>Вложенный элемент 2</li>
</ul>
</li>
<li>Элемент списка 3</li>
</ul>
<h2>Упорядоченный список</h2>
<ol class="custom-ol">
<li>Первый элемент</li>
<li>Второй элемент
<ol>
<li>Вложенный элемент 1</li>
<li>Вложенный элемент 2</li>
</ol>
</li>
<li>Третий элемент</li>
</ol>
</body>
</html>
Проверьте свою работу на наличие ошибок и убедитесь, что страница корректно отображается в браузере.
Наша цель и главная задача сделать качественное образование в вашем браузере
Телефон: +375 33 910-08-92
Email: info@codefor.tech
Адрес: г. Барановичи, ул. Пирогова, д. 7
© 2024-2025 Все права защищены. CodeFor.
