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

ГЛАВА 2. СПИСКИ

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

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

Наиболее простым в представлении является маркированный список, задаваемый тегом-контейнером <ul>. С его помощью формируются списки, у которых в качестве маркеров используются «отвлеченные» обозначения в виде квадратов, кружков, треугольников и др.

Для создания элементов списка используется тег <li>, записанный внутри тегов <ul> … </ul>. Тег <li> не требует закрывающего тега </li>, но его использование не возбраняется спецификацией языка HTML. Обычно браузер сам определяет где заканчивается один тег <li> и начинается другой. Кроме того, при определении элементов списка нет необходимости выполнять принудительный перенос строк с помощью тега или тега , эту задачу выполняет тег <li>, который четко структурирует элементы, образуя из них вид списка в окне браузера. Ниже представлен пример HTML-документа, использующий маркированный список для представления знаков зодиаков.

<!—пример маркированного списка знаков зодиаков --> <html> <head> <title>Пример маркированного списка знаков зодиаков</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> Знаки зодиаков: <ul> <li>Овен <li>Телец <li>Близнецы <li>Рак </ul> </body> </html>

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

Как видно из рис. 2.1. тег <ul> осуществляет отступ сверху и снизу, а также слева от края документа, выделяя таким образом список в тексте документа. Тег <li> в свою очередь обеспечивает вывод каждого элемента с новой строки, образуя список.

Тег <ul> имеет необязательный параметр type, позволяющий задавать тип маркеров перед элементами списка. По умолчанию, в качестве маркеров используются закрашенные кружки (некоторые браузеры используют другие маркеры по умолчанию). Для изменения маркера по умолчанию, необходимо задать параметр type одним из следующих значений:

disk – закрашенные кружки;
circle – незакрашенные кружки;
square – закрашенные квадратики.

Например, если в записанном выше примере переписать тег <ul> в виде

<ul type=square>

то получим следующий вид списка (рис. 2.2):

Рис. 2.2. Маркированный список с параметром type=square

Следует отметить, что внутри тега <ul> могут находиться любые другие теги языка HTML, в том числе и вложенные теги <ul>, образуя таким образом более сложный вид списков. Например, можно создать список сотрудников, с вложенным списком возраста, места работы, образования:

<html> <head> <title>Пример вложенных списков</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <ul> Список сотрудников <li>Иванов Иван Иванович <ul> <li>Возраст: 22 <li>Место работы: УлГТУ <li>Образование: высшее </ul> <li>Петров Петр Петрович <ul> <li>Возраст: 27 <li>Место работы: УлГУ <li>Образование: высшее </ul> </ul> </body> </html>

Рис. 2.3. Пример вложенных списков

Обратите внимание, что при отображении вложенных списков браузер автоматически меняет тип маркера и делает необходимые отступы для удобного визуального восприятия таких списков.