Списки часто используются на веб-страницах, поэтому данный вопрос весьма актуален. В HTML предусмотрено два типа списков: нумерованный и ненумерованный (маркированный). Для построения списков используются специальные теги. С основными тегами мы познакомимся в данном уроке. Давайте рассмотрим типы списков в HTML по порядку и на реальных примерах разберемся чем они отличаются, и как выводятся.
Нумерованные списки в HTML
Нумерованные списки в HTML — упорядоченная последовательность элементов. В нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Нумерованный список имеет следующий вид:
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Четвертый элемент списка
- Пятый элемент списка
В данном примере список будет выводиться арабскими цифрами. У нумерованных списков существуют атрибуты, с помощью которых можно задать формат отображения нумерации списка:
1. Атрибуты «I» или «i» — список нумеруется римскими буквами (заглавными или прописными);
2. Атрибуты «A» или «a» — нумерация латинскими буквами (заглавными или прописными);
3. Атрибут «start» — используется для того, чтобы нумерация начиналась не с первого пункта, в качестве параметра указывается порядковый номер, с которого требуется формировать список.
Пример. Нумерованный список, который формируется из римских букв и начинается со второго элемента:
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Четвертый элемент списка
- Пятый элемент списка
Маркированные списки в HTML
Ненумерованные списки также называют неупорядоченными или маркированными. Для выделения элементов такого списка используются специальные символы (маркеры). Вид маркеров списка задается в HTML коде с помощью специальных атрибутов. Пример маркированного списка в HTML:
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Четвертый элемент списка
- Пятый элемент списка
В данном случае список будет формироваться из маркеров в виде жирной точки. Атрибутами ненумерованного списка являются:
1. «disc» — маркеры в виде закрашенного кружка
2. «circle» — маркеры в виде пустого кружка
3. «square» — маркеры в виде закрашенного квадрата
Пример задания определенного маркера в списке:
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Четвертый элемент списка
- Пятый элемент списка
В качестве маркеров списка можно использовать также графические изображения, что позволяет красиво оформить HTML-документ. На практике это очень часто применяется. Для реализации этой задачи необходимо в коде прописать путь до картинки, которая будет служить маркером:
Первый элемент списка
Второй элемент списка
Третий элемент списка
Четвертый элемент списка
Пятый элемент списка
Также списки бывают вложенными, они состоят из нескольких списков:
- Первый элемент списка
- Второй элемент списка
- Первый подпункт списка
- Второй подпункт списка
- Третий элемент списка
- Четвертый элемент списка
- Пятый элемент списка
Вот, пожалуй и все, что хотелось рассказать о списках в HTML. Списки очень часто встречаются на веб-страницах. Для их формирования нужно знать определенные правила вывода.
Списки - важная составляющая контента, так как они помогают упорядочить информацию. Текст в списках лучше воспринимается и проще запоминается.
Самый простой - перед каждым его элементом стоит маркер - кружок, квадрат или окружность. Последовательность элементов в маркированном списке не важна.
Чтобы его создать, нужно использовать всего два тега:
и
- это контейнер, содержащий список, элементы которого задаются тегом
- Камень
- Ножницы
- Бумага
По умолчанию в качестве маркера списка используется чёрный кружок (disk
). Добавив в тег
атрибут type
и присвоив ему соответствующее значение, маркер можно сменить на окружность (circle
) или чёрный квадрат (square
).
От маркированного отличается тем, что порядок элементов в нём важен, а потому вместо маркера здесь используются последовательно идущие цифры или буквы. О порядке в списке заботиться не нужно: эту задачу берёт на себя браузер. Если изменить список (удалить или добавить элемент, нарушив порядок), обозреватель пересчитает его и отобразит правильно.
Для создания нумерованных списков используются теги
и
определяет начало и конец списка, тег
заменено на
.
- Камень
- Ножницы
- Бумага
Так как с нумерованными списками не всегда всё так просто, для тега
создали следующие атрибуты (обратите внимание: ниже как раз приведён нумерованный список):
1. type . Этот атрибут позволяет нумеровать список не только арабскими, но также римскими цифрами или латинскими буквами разного регистра. type поддерживает значения 1 (по умолчанию), a, A, i, I (попробуйте поэкспериментировать с ними самостоятельно).
2. start . Не всегда нумерация должна начинаться с единицы. Этот атрибут позволяет задать начальное значение - номер первого элемента списка. В нём можно указать, чтобы отчёт начинался, например, с числа 100 или буквы K.
3. reversed . Если список должен идти не с 1 до 10, а с 10 до 1, то необходимо использовать этот атрибут. Если он задан, нумерация будет вестись в обратном порядке.
Для того, чтобы задать произвольный номер элементу в середине списка, нужно использовать в теге
Изменив номер одного элемента в середине списка, вы измените и нумерацию всех следующих за ним элементов - отчёт начнётся со значения в атрибуте value. Например, если элементу 18 вы присвоили номер 35, то следующие за ним элементы будут иметь номера не 19, 20, 21, а 36, 37, 38.
Список определений
Не такой известный тип списка, как рассмотренные выше. Состоит из терминов и их определений. Создаётся с помощью тегов:
- контейнер, содержащий список.
Область применения списков определений - глоссарии, справочники, тесты, словари и другие ёмкие перечисления вида «Термин - объяснение».
Вот пример списка определений:
- Дескриптор
- Основная единица языка разметки, известная всем как "Тег".
- Атрибут
- Свойство тега, дающее ему дополнительные возможности оформления текста.
- Метка
- Одиночный тег, который не нужно закрывать.
Список, состоящий из списков, вложенных друг в друга. Может включать в себя списки разных типов. Сложность создания заключается в соблюдении правильной вложенности тегов, так как в многоуровневой структуре легко запутаться.
Вот пример многоуровневого списка:
- Структурные
- Pascal
- Oberon
- Limbo
- Объектно-ориентированные
- Java
- Функциональные
- Lisp
- Python
HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи:
Нумерованные списки
В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны.
Нумерованные списки создаются с помощью блочного элемента
(от англ. Ordered List – нумерованный список). Далее в контейнер
для каждого пункта списка помещается элемент
Тег
имеет следующий синтаксис:
- элемент 1
- элемент 2
- элемент 3
Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере:
Пример: Нумерованный список
- Попробуй сам »
Пошаговая инструкция
- Достать ключ
- Вставить ключ в замок
- Повернуть ключ на два оборота
- Достать ключ из замка
- Открыть дверь
Пошаговая инструкция
- Достать ключ
- Вставить ключ в замок
- Повернуть ключ на два оборота
- Достать ключ из замка
- Открыть дверь
Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type
в элементе
, который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис:
- A - прописные латинские буквы (A, B, C . . .);
- a - строчные латинские буквы (a, b, c . . .);
- I - большие римские цифры (I, II, III . . .);
- i - маленькие римские цифры (i, ii, iii . . .);
- 1 - арабские цифры (1, 2, 3 . . .) (применяется по умолчанию).
- следующим образом:
-
В этом случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с семи.
Пример использования атрибута value тега
В этом примере "Первый пункт списка" будет иметь номер 1, "Второй пункт списка" – номер 7, а "Третий пункт списка" – номер 8.
Форматирование нумерованных списков с помощью CSS
Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS:
- . Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры.
- Первый пункт
- Второй пункт
- Третий пункт
- не обязательно размещать только текст, допустимо поместить любой элемент потокового контента (ссылки, абзацы, изображения и др.)
- допустимо создание вложенного списка, или списка второго уровня. Для вложения списка опишите новый список внутри элемента
- уже имеющегося списка. При вложении одного маркированного списка в другой браузер автоматически меняет стиль маркера для списка второго уровня. Любой список может быть вложен в другой. Следующий пример демонстрирует структуру маркированного списка, вложенного во второй пункт нумерованного.
- Попробуй сам »
- Понедельник
- Отправить почту
- Визит к редактору
- Выбор темы
- Дкаративное оформление
- Заключительный отчет
- Вечерний просмотр сообщений
- Вторник
- Пересмотреть график
- Отправить изображения
- Среда...
- Понедельник
- Отправить почту
- Визит к редактору
- Выбор темы
- Дкаративное оформление
- Заключительный отчет
- Вечерний просмотр сообщений
- Вторник
- Пересмотреть график
- Отправить изображения
- Среда...
- Попробуй сам »
- Coffee
- Coffee
- Coffee
- Coffee
- Coffee
- Milk
- Coffee
- Milk
- Coffee
- Milk
- Coffee
- Milk
- Попробуй сам »
- Телец
- Близнeцы
- Овен
- Телец
- Близнeцы
- (от англ. Definition Term – определяемое слово, термин) и
- (от англ. Definition Description – описание определяемого термина).
- Первый термин
- Описание первого термина
- Второй термин
- Описание второго термина
- Попробуй сам »
- Всемирная паутина
- — от англ. World Wide Web (WWW) — распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету.
- Интернет
- — совокупность сетей, применяющих единый протокол обмена для передачи информации.
- Сайт
- — набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.
- отмечается маркером,
нумерованный список —- — каждый элемент списка
- отмечается цифрой,
список определений — — состоит из пар термин- —
- определение.
Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение. Элементы списка ведут себя как блочные элементы, располагаясь друг под другом и занимая всю ширину блока-контейнера. Каждый элемент списка имеет дополнительный блок, расположенный сбоку, который не участвует в компоновке.
Создание HTML-списков
1. Маркированный список
Маркированный список представляет собой неупорядоченный список (от англ. Unordered List) . Создаётся с помощью парного тега
. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.Браузеры по умолчанию добавляют следующее форматирование блоку списка:
Каждый элемент списка создаётся с помощью парного тега
- (от англ. List Item) .
- доступны .
- Microsoft
- Apple
2. Нумерованный список
Нумерованный список создаётся с помощью парного тега . Каждый пункт списка также создаётся с помощью элемента
- отмечается цифрой,
- . Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.
Блок списка также имеет стили браузера по умолчанию:
- доступен атрибут value , который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать
- , то остальная нумерация будет пересчитана относительно нового значения.
Для тега
- доступны следующие атрибуты:
- Microsoft
- Apple
- и
- доступны .
- Режиссер:
- Петр Точилин
- В ролях:
- Андрей Гайдулян
- Алексей Гаврилов
- Виталий Гогунский
- Мария Кожевникова
4. Вложенный список
Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов . Разметка для вложенного списка будет следующей:
- Пункт 1.
- Пункт 2.
- Подпункт 2.1.
- Подпункт 2.2.
- Подпункт 2.2.1.
- Подпункт 2.2.2.
- Подпункт 2.3.
- Пункт 3.
Рис. 4. Вложенный список5. Многоуровневый нумерованный список
Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.Ol { /* убираем стандартную нумерацию */ list-style: none; /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ counter-reset: li; } li:before { /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ counter-increment: li; /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ content: counters(li,".") ". "; }
Рис. 5. Многоуровневый нумерованный список
Таблица 1. Атрибуты тега
Атрибут Описание, принимаемое значение reversed Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…). start Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция - первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например,
- .
type Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:
1 — значение по умолчанию, десятичная нумерация.
A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv).3. Список определений
Списки определений создаются с помощью тега
Блок списка определений имеет следующие стили браузера по умолчанию:
Для тегов
- ,
- .
Приведем пример HTML-документа, использующего нумерованный список, отображение которого браузером показано на рис. 2.3.
Пример нумерованного списка Наиболее яркие звезды, видимые с Земли:
- Сириус
- К анопус
- Арктур
- Альфа Центавра
- Вега
- К апелла
- Ригель
- Процион
- Ахернар
- Бета Центавра
- Ветельгейзе
- Альдебаран
- Мицар
- Пoляpнaя
Рис. 2.З. Нумерованный список
В теге
- могут быть указаны следующие параметры: COMPACT, TYPE и START.
- .
Пример записи:
- .
Параметр START тега
- позволяет начать нумерацию списка не с единицы. В качестве значения параметра START всегда должно указываться натуральное число,
вне зависимости от вида нумерации списка. Приведем пример:
- для нумерованных списков разрешает использовать параметры TYPE и VALUE. Параметр TYPE
может прини
мать такие же значения, как и для тега
- .
- .
Примечание
Браузеры по-разному интерпретируют указание вида нумерации для отдельного элемента списка. Браузер Netscape изменяет вид нумерации для данного элемента и всех последующих, пока не встретится очередное переопределение. Браузер Internet Explorer изменяет вид номера только для данного элемента.
З начение параметра VALUE тега
- - позволяет изменить номер данного элем
ента списка. При этом изменяется нумерация и всех последующих элементов. Типичным применением являются списки с пропуском некоторых
эл
ементов. Пример такого списка был приведен выше
(рис. 2.3). В нем дается уп
орядоченный список наиболее ярких звезд, в котором на 58 и 75 местах
р
асположены звезды, хорошо видимые в наших широтах (Мицар - наиболее
яркая звезда созвездия Большая Медведица, а Полярная звезда - Малой
Медведицы).
Приведем еще один оригинальный пример использования нумерации различных видов. В приводимом ниже HTML-коде заданы три списка с различной нумерацией. Для удобства просмотра каждый из списков помещен в отдельную ячейку таблицы. Все три списка идентичны и различаются только видом нумерации: в первом столбце таблицы - арабские цифры, во втором - римские, а в третьем нумерация ведется латинскими буквами. Обратим внимание, что элементы списка пусты, т. е. после любого тега
- нет никаких данных. Пример такого рода можно использовать в качестве таблицы соответствия между записью чисел арабскими и римскими цифрами. Оказывается, что любой браузер, поддерживающий списки, можно использовать в качестве генератора такой таблицы (рис. 2.4), стоит лишь набрать приводимый HTML-код. Нумерация римскими цифрами правильно работает вплоть до значения 3999. Изучая правый столбец, можно понять, как выполняется нумерация латинскими буквами. По исчерпании однобуквенной нумерации (от А до Z) в качестве следующего номера берется первый двухбуквенный номер - АА и т. д.
Использование различного типа нумерации в списках
. . .Рис. 2.4. Различные типы нумерации HTML-списков
Еще по теме статьи:
П ример записи:
- .
- .
Такая запись определяет нумерацию списка с прописной латинской буквы "E". Для других видов нумерации запись START=5 задаст нумерацию, соответственно, с числа "5", римской цифры "V" и т. д.
Изменение вида нумерации списка и значений номеров допустимо производи ть и для любого элемента списка. Тег
- для нумерованных списков разрешает использовать параметры TYPE и VALUE. Параметр TYPE
может прини
мать такие же значения, как и для тега
Параметр COMPACT имеет тот же смысл, что и у маркированных списков. Параметр TYPE используется для задания вида нумерации списка. Может принимать следующие значения:
TYPE = А - задает маркеры в виде прописных латинских букв;
TYPE = а - задает маркеры в виде строчных латинских букв;
TYPE = I - задает маркеры в виде больших римских цифр;
TYPE = i - задает маркеры в виде маленьких римских цифр;
TYPE = 1 - задает маркеры в виде арабских цифр.
По умолчанию всегда используется значение TYPE = 1, т. е. нумерация при помощи арабских цифр. Это касается и вложенных нумерованных списков. Здесь, в отличие от маркированных списков, браузеры по умолчанию не делают различной нумерацию на различных уровнях вложенности списков. Заметим, что после номера элемента списка всегда дополнительно выводится знак "точка".
Параметр TYPE с теми же значениями может употребляться для указания вила нумерации отдельных элементов списка. Для этого параметр TYPE с соответствующим значением разрешено указывать в теге элемента списка
Стили оформления нумерованных списков
Пример Значение Описание а, Ь, с lower-alpha Строчные буквы А, В, С upper-alpha Прописные буквы i, ii, iii lower-roman Римские цифры, набранные строчными буквами I, II, III upper-roman Римские цифры, набранные прописными буквами Пример: Применение свойства CSS list-style-type
Маркированные списки
Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов. Маркированные списки создаются с помощью блочного элемента
ТегВ следующем примере видно, что, по умолчанию, перед каждым элементом списка добавляется небольшой маркер в виде закрашенного кружка:
Внутри тега
Вложенные списки
Любой список может быть вложен в другой. Внутри элементаПример: Вложенные списки
Форматирование маркированных списков
Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS:
В следующем примере рассмотрены различные стили оформления маркированных списков:
Пример: Стили оформления маркированных списков
Disc:
Circle:
Square:
None:
Графические маркеры.
В HTML есть возможность создать список с графическими маркерами. Одно дело, когда маркерами списка являются стандартные кружочки или квадратики, и совсем другое – когда разработчик сам подбирает маркер в соответствии с дизайном страницы. Для того, чтобы сделать элементы списка красивыми, часто используют маленькие картинки.
Чтобы заменить обычный маркер на графический, заменим свойство list-style-type на свойство list-style-image и укажем URL–адрес картинки:Пример: Графические маркеры
Знаки зодиака
Знаки зодиака
Списки определений (описаний)
Списки определений очень удобны для создания, например, вашего личного словаря терминов. У каждого пункта списка определений есть две части: термин и его определение.
Вы помещаете весь список в элемент
Списки определений часто используют в научно-технических и учебных изданиях, оформляя с их помощью глоссарии, словари, справочники и т.д.Общая структура списка описаний имеет следующий вид:
В следующем примере показано одно из возможных использований списка определений:
Пример: Список определений
Всемирная паутина — от англ. World Wide Web (WWW) — распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету. Интернет — совокупность сетей, применяющих единый протокол обмена для передачи информации. Сайт — набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.
По-умолчанию, текст термина прижимается к левому краю окна браузера, а описание термина располагается ниже и сдвигается вправо.
HTML-списки используются для группировки связанных между собой фрагментов информации. Существует три вида списков:
маркированный список —
- — каждый элемент списка
Другим типом списков, реализованных в языке HTML, является нумерованный список. Иначе HTML списки такого типа называют упорядоченными. Последнее название часто используется как формальный перевод названия соответствующего тега
- , с помощью которого и организуются списки такого типа в HTML-документах (OL - Ordered List, упорядоченный список).
Списки данного типа обычно представляют собой упорядоченную последовательность отдельных элементов. Отличием от маркированных списков является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Вид нумерации зависит от браузера и может задаваться параметрами тегов списка. В остальном реализация нумерованных списков во многом похожа на реализацию маркированных списков.
Теги
- и
Для создания нумерованного списка следует использовать тег-контейнер , внутри которого располагаются все элементы списка. Открывающий и закрывающий теги списка обеспечивают перевод строки до и после списка, отделяя таким образом список от основного содержимого документа.
Как и для маркированного списка, каждый элемент нумерованного списка должен начинаться тегом
Здесь: type – символы списка:
Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start
тега
.
В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX:
Нумерацию можно начинать и с помощью атрибута value
, который добавляется к элементу