HTML - Маркированные списки

Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в чудесный мир HTML маркированных списков. Как ваш доброжелательный сосед-учитель информатики, я рад помочь вам в этом путешествии. Поверьте мне, к концу этого учебника вы будете создавать списки как профессионал!

HTML - Unordered Lists

Что такое маркированный список?

Прежде чем мы перейдем к коду, давайте поймем, что такое маркированный список. В HTML, маркированный список - это коллекция связанных элементов, которые не имеют определенного порядка. Представьте себе список покупок - вам не обязателено нужно купить хлеб перед молоком или яблоки перед бананами. Порядок не имеет значения, но они все являются частью одного списка.

В HTML мы создаем маркированные списки с помощью тега <ul>, а каждый элемент списка оборачивается в теги <li>. Давайте посмотрим на простой пример:

<ul>
<li>Яблоки</li>
<li>Бананы</li>
<li>Апельсины</li>
</ul>

Этот код будет отрендерен как:

Яблоки
Бананы
Апельсины

Видите, как это просто? Браузер автоматически добавляет маркеры к каждому элементу. Но что, если вы хотите изменить эти маркеры? Вот где наш следующий раздел comes in handy!

Маркированный список HTML - Выбор маркера элемента списка

Теперь давайте немного оживим вещи. HTML позволяет нам изменять стиль наших маркеров, или, как мы их называем в бизнесе, "маркеры элементов списка". У нас есть три основные опции:

disc (по умолчанию)
circle
square

Чтобы изменить маркер, мы используем атрибут type в теге <ul>. Давайте посмотрим, как это работает:

<ul type="disc">
<li>Этот список использует маркер по умолчанию disc</li>
</ul>

<ul type="circle">
<li>Этот список использует маркер в виде круга</li>
</ul>

<ul type="square">
<li>Этот список использует маркер в виде квадрата</li>
</ul>

Этот код будет отрендерен как:

• Этот список использует маркер по умолчанию disc

○ Этот список использует маркер в виде круга

■ Этот список использует маркер в виде квадрата

Круто, правда? Это как дать вашему списку迷你-макияж!

Примеры маркированного списка

Теперь, когда мы освоили основы, давайте посмотрим на более сложные примеры. Помните, практика делает perfect, так что не стесняйтесь копировать эти примеры и tries их сами!

Вложенные маркированные списки

Иногда вам может понадобиться создать список внутри списка. Мы называем это вложенным списком. Вот как это можно сделать:

<ul>
<li>Кофе</li>
<li>Чай
<ul>
<li>Черный чай</li>
<li>Зеленый чай</li>
<li>Травяной чай</li>
</ul>
</li>
<li>Молоко</li>
</ul>

Это будет отрендерено как:

Кофе
Чай
Черный чай
Зеленый чай
Травяной чай
Молоко

Обратите внимание, как вложенный список отступает? Это способ HTML показать, что эти элементы являются подкатегориями "Чая".

Маркированный список с ссылками

Списки не только для простого текста. Вы можете включать другие HTML элементы внутрь ваших элементов списка. Например, давайте создадим список любимых сайтов:

<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.wikipedia.org">Wikipedia</a></li>
<li><a href="https://www.github.com">GitHub</a></li>
</ul>

Это создаст кликабельный список сайтов:

Маркированный список с изображениями

Давайте добавим немного больше изящества и добавим изображения в наш список:

<ul>
<li><img src="apple.jpg" alt="Яблоко"> Яблоко</li>
<li><img src="banana.jpg" alt="Банан"> Банан</li>
<li><img src="orange.jpg" alt="Апельсин"> Апельсин</li>
</ul>

Этот код отобразит список с маленькими изображениями рядом с названием каждого фрукта. Это отличной способ сделать ваши списки более визуально привлекательными!

Обзор методов маркированного списка

Вот удобная таблица, резюмирующая методы, которые мы узнали для создания и customization маркированных списков:

Метод	Синтаксис	Описание
Основной маркированный список	`<ul><li>Элемент</li></ul>`	Создает основной маркированный список
Изменение маркера	`<ul type="circle">`	Изменяет стиль маркера элемента списка
Вложенный список	`<ul><li><ul><li>Вложенный элемент</li></ul></li></ul>`	Создает список внутри списка
Список со ссылками	`<ul><li><a href="url">Ссылка</a></li></ul>`	Создает список кликабельных ссылок
Список с изображениями	`<ul><li><img src="image.jpg"> Элемент</li></ul>`	Добавляет изображения к элементам списка

И вот оно, друзья! Вы теперь equiped для создания и customization маркированных списков в HTML. Помните, ключ к овладению этими навыками - практика. Так что вперед, экспериментируйте с этими примерами, и не бойтесь быть creatives!

Пока мы подытоживаем, я вспомнил一个小ой кодинг-анекдот: Почему разработчик уволился с работы? Потому что у него не было массивов! ? Не волнуйтесь, мы доберемся до массивов в другой раз. А пока, продолжайте списки и продолжайте кодить!

Credits: Image by storyset