Найти в Дзене
Дзен.Framework

2.2.9 Списки в HTML

Изображение из открытых источников
Изображение из открытых источников

Статья связана с репозиторием на GitHub.

Списки в HTML - отдельная история, заслуживающая внимания.

На самом деле они используются достаточно часто: как для вывода в текстах каких-либо пунктов, так и для создания (с использованием JavaScript) "деревьев": многоуровневых списков, части которых могут сворачиваться/разворачиваться. Пример использования такого "дерева" - меню сайта.

Основной тэг создания списка - <ul> или <ol>. Структура содержимого очень напоминает <select>, который рассматривался ранее. Внутри тэга перечисляются элементы списка, заключенные в тэг <li>:

-2

При этом, существует стилизация значков списка, путём указания типа в <ul> или <ol>:

  1. <ul type="..."> - type может принимать одно из трех значений: disc, circle или square. По умолчанию будет disc.
  2. <ol type="..."> - type может принимать одно из трех значений: A, a, I, i, 1. По умолчанию будет 1.

Это то, что говорится в документации. На самом деле их несколько больше, в чём можно убедиться в консоли.

Как это выглядит, сейчас продемонстрирую:

-3

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

-4

Для любого списка (или любого тэга li), можно отменить отображение нумерации через CSS (либо сменить значок нумерации):

list-style-type: none;

Впоследствии, при рассмотрении JavaScript, я покажу как можно делать раскрывающиеся списки на примере последнего примера.

Все статьи попадают в "Оглавление канала". Не пропускаем новости!

-5