Разместить заказ
Вы будете перенаправлены на Автор24

Списки в HTML

8-800-775-03-30 support@author24.ru
Статья предоставлена специалистами сервиса Автор24
Автор24 - это сообщество учителей и преподавателей, к которым можно обратиться за помощью с выполнением учебных работ.
как работает сервис
Списки в HTML

Информация, представленная списками в языке HTML, строится с помощью специального набора тегов. Списки являются одной из самых популярных форм представления данных, как в электронном виде, так и в печатном. Со списками человек встречается практически ежедневно и повсеместно (список покупок в магазине, учащихся в кабинете и т.д.).

В языке HTML используются основные типы списков:

  • маркированный;
  • нумерованный;
  • список определений.

При организации различных списков используют теги: , , , , . Различные типы списков помогают реализовать много разных возможностей.

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

Определение 1

Является одним из основных типов списков, которые реализованны в языке HTML. Другими словами такой список называют ненумерованным или неупорядоченным.

Готовые работы на аналогичную тему

Последнее название используют как формальный перевод названия тега , который и организует списки подобного типа в HTML-документах (UL — Unordered List, неупорядоченный список).

Чтобы выделить в маркированном списке элементы используют специальные символы, которые называются маркерами списка (другое название «буллеты» от английского термина bullet — пуля). Маркеры бывают разного вида, который определяет браузер.

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

Все элементы списка начинаться с тега (LI — List Item, элемент списка). При использовании тега не нужен соответствующий закрывающий тег. Браузер, как правило, отображая документ, начинает все новые элементы списка с новой строки.

На рисунке 1 приведен пример HTML-документа, в котором используется маркированный список, и само отображение списка браузером.

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

Знаки зодиака:

Овен

Телец

Близнецы

Рак

Лев

Дева

Весы

Скорпион

Стрелец

Козерог

Водолей

Рыбы

Программный код и изображение в браузере маркированного списка. Автор24 — интернет-биржа студенческих работ

Рис. 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-документа с нумерованным списком и его отображение в браузере.

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

Наиболее яркие звезды, видимые с Земли:

Сириус

Канопус

Арктур

Альфа Центавра

Вега

Капелла

Ригель

Процион

Ахернар

Бета Центавра

Ветельгейзе

Альдебаран

. . .

Мицар

. . .

Пoляpнaя

Программный код и вид нумерованного списка в браузере. Автор24 — интернет-биржа студенческих работ

Рис. 2. Программный код и вид нумерованного списка в браузере

В теге указываются параметры: COMPACT, TYPE и START.

Использование параметра COMPACT аналогично использованию в маркированных списках. Параметром TYPE задается вид нумерации списка и имеет значения:

  • TYPE = А — маркеры в виде прописных латинских букв;
  • TYPE = а — маркеры в виде строчных латинских букв;
  • TYPE = I — маркеры в виде больших римских цифр;
  • TYPE = i — маркеры в виде строчных римских цифр;
  • TYPE = 1 — маркеры в виде арабских цифр.
Замечание 1

По умолчанию используется TYPE = 1 (нумерация арабскими цифрами), что характерно и для вложенных нумерованных списков. После номеров элементов списка всегда дополнительно выводятся знаки точки. Параметр TYPE с теми же значениями используют для указания вида нумерации отдельных элементов списка. Например: .

С помощью параметра START тега можно нумеровать список не с 1. Значением параметра START всегда является натуральное число, не зависимо от вида нумерации списка. Например: .

Замечание 2

Эта запись говорит о нумерации списка с прописной латинской буквы «E». В других видах нумерации запись START=5 задает нумерацию с числа «5», римской цифры «V» и т. д.

Изменять вид нумерации списка и значений номеров можно для любого элемента списка. Тег для нумерованных списков использует параметры TYPE и VALUE. Параметр TYPE принимает такие же значения, что и тег . Например: .

Параметр VALUE тега изменяет номер элемента списка. При этом изменится нумерация и всех последующих элементов.

Список определений

Списки данного вида называют словарями определений специальных терминов. Каждый элемент такого списка состоит из 2 частей. Первая часть элемента списка содержит определяемый термин, а вторая — значение термина в виде списка.

Для задания списка определений используют тег-контейнер (Definition List). Внутри контейнера тег (Definition Term) отмечает определяемый термин, а тег (Definition Description) — абзац с его определением. Для этих тегов можно не использовать закрывающие теги.

Список определений будет выглядеть так:

Термин

Определение термина

Вложенные списки

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

На рисунке 3 приведен HTML-код документа с вложенными списками и его изображение в браузере. Этот пример показывает, что в элемент маркированного списка можно вложить свой нумерованный список.

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

Спутники некоторых планет

Земпя

Луна

Mapc

Фобос

Деймос

Уран

Ариэль

Умбриэль

Титания

Оберон

Миранда

Нептун

Тритон

Нереида

Программный код и изображения вложенного списка в браузере. Автор24 — интернет-биржа студенческих работ

Рис. 3. Программный код и изображения вложенного списка в браузере