Вложенные списки
Часть раздела Fundamentals путешествия по HTML на Coddy — урок 14 из 60.
Вы можете поместить один список внутрь другого — это называется вложенный список. Это полезно для создания иерархических структур, таких как схемы или многоуровневые меню.
Чтобы создать вложенный список, вы просто помещаете элемент <ul> или <ol> внутри элемента <i><li></i> другого списка.
Вот пример вложенного маркированного списка:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>Второй элемент содержит вложенный список с двумя подпунктами. В браузере это будет выглядеть так:
- Элемент 1
- Элемент 2
- Подпункт 2.1
- Подпункт 2.2
- Элемент 3
Вы также можете вкладывать упорядоченные списки или смешивать оба типа.
Задание
ЛегкоСоздайте HTML-документ с вложенным списком. Список должен выглядеть следующим образом:
- Fruits
- Apple
- Banana
- Orange
- Vegetables
- Carrot
- Broccoli
- Spinach
- Grains
Шпаргалка
Вложенный список создается путем размещения элемента <ul> или <ol> внутри элемента <li> другого списка:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>Вы можете вкладывать упорядоченные списки или смешивать упорядоченные и неупорядоченные списки друг в друга.
Попробуйте сами
<!DOCTYPE html>
<html>
<body>
<!-- Напишите код здесь -->
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Fundamentals
1Основы HTML
Что такое HTML?Базовая структура HTMLТеги и элементыВложенность и закрывающие тегиКомментарии в HTML7Страница личного профиля
Обзор проектаСекция Header
Фото профиляСекция «Обо мне»Ссылки на социальные сети2Текст и форматирование
ЗаголовкиАбзацыПереносы строкЖирный и курсивный текстСнова жирный и курсивныйПовторение — форматирование8Формы и поля ввода, часть 1
Основы формТекстовые поля вводаАтрибуты полей вводаПоле для пароляМетки для полей вводаПовторение — основы форм11Страница регистрации на мероприятие
Обзор проектаСекция HeaderСекция деталей мероприятияФорма регистрацииСекция Footer9Формы и элементы ввода. Часть 2
РадиокнопкиЧекбоксыВыпадающие спискиКнопкиКнопки в формахПовторение — Формы №1Повторение — Формы №2