Списки — Основы верстки контента
Списки являются одной из основных форм представления контента на странице. Они позволяют группировать связанные между собой фрагменты, объединяя их по смыслу. В HTML представлены три вида списков:
- Маркированные;
- Нумерованные;
- Списки определений.
В предложении выше виды списков были сгруппированы с помощью маркированного списка. Он имеет небольшой отступ слева и обозначается маркером у каждого отдельного пункта. Каждый вид списка имеет такие черты, что позволяет быстро определить их на странице.
Помимо этого все списки имеют контейнеры — теги, внутри которых располагается информация. Эти контейнеры помогают странице определить, в каком месте начинается список и где он заканчивается.
В своем представлении каждый элемент списка является блочным элементом. Это означает, что он будет занимать всю доступную ему ширину и каждый новый элемент будет начинаться с новой строки.
Маркированные списки
Маркированный список — популярный инструмент для группировки фрагментов. Его преимущество состоит в отсутствии порядка, в котором размещаются элементы. Таким образом не вводится шкала «важнее — неважно» или «шаг 1 — шаг 2». Вы просто перечисляете контент, который пользователь должен увидеть.
Как и другие списки, создание маркированного списка начинается с указания контейнера. В роли контейнера выступает тег <ul></ul> — сокращение от Unordered List. Каждый элемент вкладывается внутрь этого контейнера и вкладывается в тег <li></li> — сокращение от List Item. Так браузер отделяет списки друг от друга.
Представим список из начала урока в виде HTML разметки. Для этого указывается контейнер и три тега <li></li> . Внутри каждого из этих тегов помещается один пункт списка.
Списки в HTML возможно вкладывать друг в друга. Это позволяет глубже структурировать информацию. Для создания вложенного списка новый контейнер вкладывается внутрь тега <li></li> . Как вы увидите, списки можно комбинировать. Маркированные вкладывать внутрь нумерованных. Нумерованные внутрь маркированных. В общем виде вложенность может быть описана так:
У вложенного списка изменился маркер. Это позволяет даже при отсутствии отступов отделить вложенные списки от основного уровня. CSS позволяет управлять маркерами и настраивать их внешний вид. В конце урока будет изучено свойство, которое позволяет стилизовать маркеры и даже использовать свои изображения для этого.
Нумерованные списки
Структура нумерованных списков повторяет маркированные списки. Семантическое отличие нумерованных списков заключается в последовательности. Такие списки идут строго по порядку и обозначают последовательность какой-либо информации.
Нумерованный список использует контейнер <ol></ol> , в качестве пунктов списков используется тег <li></li> . Тег <ol> — сокращение от Ordered List. Примером такого списка может служить список дел на день.
Нумерованные списки возможно вкладывать друг в друга. Внутри нумерованных списков могут лежать маркированные.
Списки определений
С точки зрения HTML списки определений являются самыми сложными для верстки. Они включают в себя больше тегов для разметки и позволяют создавать семантическую структуру вида «термин — определение». Такие списки удобны при составлении словарей или глоссариев.
В качестве контейнера для списков определений используется тег <dl></dl> от английского Definition List, внутри которого не привычная схема <li></li> , а система из двух тегов:
- <dt></dt> — термин. От английского Definition Term;
- <dd></dd> — определение От английского Definition Description.
Каждая новая пара повторяет схему из двух тегов. Список из нескольких терминов размечается следующим образом:
Стилизация списков
Основным способом стилизации списков является изменение маркера, который появляется в левой части пункта списка. В маркированных и нумерованных списках его можно изменить с помощью свойства list-style-type . Оно принимает множество различных значений. Все их вы можете увидеть с помощью веб-инспекторов. Для создания маркера в виде квадрата используется значение square .
Свойство list-style-type позволяет скрыть маркер списка. Это частая практика при создании меню через списки, где нет необходимости в выделении пунктов маркерами. Для скрытия маркера используется значение none .
Изменять маркер можно одним из двух способов:
- Установка свойства на контейнер. В этом случае все элементы списка получат тот маркер, который был указан в свойстве.
- Установка свойства на элемент списка. Маркер изменится только у одного пункта списка, другие получат маркер по умолчанию.
В качестве примера установим квадратный маркер для маркированного списка, а у второго элемента удалим маркер.
Картинка в качестве маркера списка
Помимо встроенных в браузер значений маркеров списка, CSS дает возможность устанавливать пользовательские маркеры в виде картинок. Это позволяет сделать уникальную стилизацию списков для проекта, как для всего, так и для отдельных списков.
Чтобы установить маркер в виде своего изображения, используется свойство list-style-image , значением которого является ссылка на изображение. Оно указывается внутри url() , например:
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Списки в HTML
Информация, представленная списками в языке HTML, строится с помощью специального набора тегов. Списки являются одной из самых популярных форм представления данных, как в электронном виде, так и в печатном. Со списками человек встречается практически ежедневно и повсеместно (список покупок в магазине, учащихся в кабинете и т.д.).
В языке HTML используются основные типы списков:
- маркированный;
- нумерованный;
- список определений.
При организации различных списков используют теги: , , , , . Различные типы списков помогают реализовать много разных возможностей.
Маркированный список
Является одним из основных типов списков, которые реализованны в языке HTML. Другими словами такой список называют ненумерованным или неупорядоченным.
Последнее название используют как формальный перевод названия тега , который и организует списки подобного типа в HTML-документах (UL — Unordered List, неупорядоченный список).
Чтобы выделить в маркированном списке элементы используют специальные символы, которые называются маркерами списка (другое название «буллеты» от английского термина bullet — пуля). Маркеры бывают разного вида, который определяет браузер.
При создания маркированных списков используется тег-контейнер , в котором располагают все элементы списка. Открывающий список тег, как и закрывающий, обеспечивает переводы строк до и после списка, т.е. отделяет список от основного содержимого документа, в этом случае не используются теги, обозначающие абзац или принудительный перевод строки .
Все элементы списка начинаться с тега (LI — List Item, элемент списка). При использовании тега не нужен соответствующий закрывающий тег. Браузер, как правило, отображая документ, начинает все новые элементы списка с новой строки.
На рисунке 1 приведен пример HTML-документа, в котором используется маркированный список, и само отображение списка браузером.
Пример маркированного списка
Рис. 1. Программный код и изображение в браузере маркированного списка
Тег может содержать 2 параметра: COMPACT и TYPE.
Параметр COMPACT используется без значения и указывает браузеру на необходимость вывода списка в компактном виде (уменьшение шрифта или расстояния между точек и т.д.).
Параметр TYPE принимает значения: disc, circle и square. Его применяют при принудительном задании вида маркеров списка. Конкретный вид маркера зависит от используемого браузера. Типичные варианты отображения:
- TYPE = disc — маркеры в виде закрашенных кружков;
- TYPE = circle — маркеры в виде не закрашенных кружков;
- TYPE = square — маркеры в виде закрашенных квадратиков.
Пример записи: . По умолчанию используется TYPE = disc. Для вложенных маркированных списков на 1 уровне по умолчанию используется значение disc, на 2 — circle, на 3 и далее — square. Те же значения параметра TYPE употребляются для определения вида маркеров отдельных элементов списка. Например: .
Нумерованный список
Представляет другой тип списков языка HTML. Другими словами его называют упорядоченным. Последнее название представляет собой формальный перевод названия тега (OL — Ordered List, упорядоченный список).
Список этого типа, как правило, представляется упорядоченной последовательностью отдельных элементов. Отличие от маркированного списка заключается в автоматическом проставлении порядкового номера перед каждым его элементом. Вид нумерации зависит от используемого браузера и задается одним из параметров тега.
При создании нумерованного списка используют тег-контейнер , который содержит все элементы списка. От основного содержимого документа список отделяется открывающим и закрывающим тегами, осуществляющими перевод строки до и после списка. Все элементы нумерованного списка начинаются с тега .
На рисунке 2 приведен пример HTML-документа с нумерованным списком и его отображение в браузере.
Древовидные списки разных вариаций
Древовидный вид HTML списков является лучшим вариантом визуального обзора и изучения их иерархической структуры. Рассмотрим несколько преобразований обычного HTML списка в более наглядное древовидное состояние при помощи магии CSS стилей.
1. Пример обычного HTML списка
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
HTML разметка списка
2. Пример HTML списка с соединительными линиями
Присвоим тегу <ul> класс treeline для создания соединительных линий каждого раздела списка.
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
HTML разметка списка с соединительными линиями
CSS стили списка с соединительными линиями
3. Пример раскрывающегося HTML списка
-
Главное меню
- Компоненты
- Плагины
- Модули
HTML разметка раскрывающегося списка
К предыдущей разметке добавляем <div >+</div> для реализации функции раскрытия элементов древовидного списка.
CSS стили раскрывающегося списка
К CSS из предыдущего примера необходимо дописать следующие стили:
Скрипт, реализующий функцию раскрывающегося списка
Помимо HTML и CSS, данный способ оформления древовидных списков требует использование JS:
Данный JS код можно вставить в конец материала, пройдя в режим просмотра исходного кода. Учтите, что код скрипта может обрезаться редактором и, соответственно, не работать. В этом случае пройдите в настройки редактора и разрешите использование тега <script> .
- База знаний
- База знаний