Статья связана с репозиторием на GitHub.
Списки в HTML - отдельная история, заслуживающая внимания.
На самом деле они используются достаточно часто: как для вывода в текстах каких-либо пунктов, так и для создания (с использованием JavaScript) "деревьев": многоуровневых списков, части которых могут сворачиваться/разворачиваться. Пример использования такого "дерева" - меню сайта.
Основной тэг создания списка - <ul> или <ol>. Структура содержимого очень напоминает <select>, который рассматривался ранее. Внутри тэга перечисляются элементы списка, заключенные в тэг <li>:
При этом, существует стилизация значков списка, путём указания типа в <ul> или <ol>:
- <ul type="..."> - type может принимать одно из трех значений: disc, circle или square. По умолчанию будет disc.
- <ol type="..."> - type может принимать одно из трех значений: A, a, I, i, 1. По умолчанию будет 1.
Это то, что говорится в документации. На самом деле их несколько больше, в чём можно убедиться в консоли.
Как это выглядит, сейчас продемонстрирую:
Списки имеют любопытную возможность - создание неограниченной вложенности. При этом, тип вложенного списка может быть любым: внутри нумерованного может помещен буквенный, внутри которого с точками, и внутри - опять нумерованный. Например:
Для любого списка (или любого тэга li), можно отменить отображение нумерации через CSS (либо сменить значок нумерации):
list-style-type: none;
Впоследствии, при рассмотрении JavaScript, я покажу как можно делать раскрывающиеся списки на примере последнего примера.
Все статьи попадают в "Оглавление канала". Не пропускаем новости!