Разработка веб-приложений: учебное пособие

2. Язык гипертекстовой разметки

2.6. Списки

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

Объединение фрагментов информации в единую структуру для придания удобочитаемого вида.
Описание сложных пошаговых процессов.
Расположение информации в стиле оглавления, пункты которого указывают на соответствующие разделы документа.

В HTML предусмотрены элементы для разметки трех типов списков:

маркированный – набор пунктов, очередность которых неважна;
нумерованный – перечень, в котором последовательность элементов имеет значение;
определений – состоит из пар "имя / значение".

Все элементы списков, собственно списки и тексты пунктов являются блочными по умолчанию, поэтому они начинаются с новой строки, а над элементом и под ним остается пустое пространство, но это можно изменить с помощью CSS.

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

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

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

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

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

Кроме элементов списка, отмечаемых тегом <li>, могут присутствовать и другие HTML-элементы.

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

disc – маркеры отображаются закрашенными кружками (значением по умолчанию);
circle – маркеры отображаются не закрашенными кружками;
square – маркеры отображаются закрашенными квадратиками.

Для вложенных маркированных списков на первом уровне по умолчанию используется значение disc, на втором – circle, на третьем и далее – square.

Атрибут type с теми же значениями может употребляться для указания вида маркеров отдельных элементов списка. Для этого атрибута type с соответствующим значением разрешено указывать в теге элемента списка <li>.

Нумерованный список.

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

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

Тег <ol> имеет атрибуты type и start. Атрибут type используется для задания вида нумерации списка. Он может принимать следующие значения:

А – задает маркеры в виде прописных латинских букв;
а – задает маркеры в виде строчных латинских букв;
I – задает маркеры в виде больших римских цифр;
i – задает маркеры в виде маленьких римских цифр;
1 – задает маркеры в виде арабских цифр (значение по умолчанию).

В отличие от маркированных списков, браузеры для вложенных нумерованных списков по умолчанию не делают различной нумерацию на различных уровнях вложенности списков.

Атрибут start тега <ol> позволяет начать нумерацию списка не с первого значения. В качестве значения атрибута start всегда должно указываться натуральное число, вне зависимости от вида нумерации списка.

Изменение вида нумерации списка и значений номеров допустимо производить и для любого элемента списка. Тег <li> для нумерованных списков разрешает использовать атрибуты type и value. Атрибут type может принимать такие же значения, как и для тега <ol>.

Значение атрибута value тега <li> позволяет изменить номер данного элемента списка. При этом изменяется нумерация и всех последующих элементов. Типичным применением являются списки с пропуском некоторых элементов.

Листинг 4. Пример использования маркированных и нумерованных списков.


<!DOCTYPE html>

<html>

<head>

<title>Пример списков</title>

</head>

<body>

<h1>Маркированный список</h1>

<ul type="square">


<li>Процессоры</li>

<li>Мониторы</li>

<li>Принтеры</li>

<li>Сканеры</li>

</ul>

<h1>Нумерованный список</h1>

<ol type="1">


<li>Процессоры</li>

<ol type="a">


<li>Pentium</li>

<li>Celeron</li>

<li>Athlon</li>

</ol>

<li>Мониторы</li>

<ol type="I">


<li>Жидкокристаллические</li>

<ol type="i">


<li>Acer</li>

<li>LG</li>

…

<li value="7">Samsung</li>

<li>Viewsonic</li>


</ol>

<li>ЭЛТ</li>

<ol type="i">


<li>BenQ</li>

<li>LG</li>

…

<li value="5">Samsung</li>

<li>Sony</li>

</ol>

</ol>

<li>Принтеры</li>

<li>Сканеры</li>

</ol>

</body>

</html>

Показать результат листинга 4

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

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

Списки определений задаются с помощью тега-контейнера <dl>. Внутри контейнера тегом <dt> помещается определяемый термин, а тегом <dd> – его определение. Для тегов <dt> и <dd> можно не записывать соответствующие закрывающие теги.

В общем, список определений записывается следующим образом:


<dl>

<dt>Термин</dt>

<dd>Определение термина</dd>

</dl>

В тексте после тега <dt> не могут использоваться элементы уровня блока, такие как, например, теги абзаца <p> или заголовков <h1>…<h6>. Как правило, текст определяемого термина должен располагаться в одной строке. Текст, содержащий определение термина, выводится, начиная со следующей строки (или через строку для некоторых браузеров) после определения термина с отступом вправо. После тега <dd> могут располагаться элементы уровня блока. Отсюда следует, что списки определений могут быть вложенными.

Листинг 5. Пример списков определений.


<!DOCTYPE html>

<html>

<head>

<title>Список определений</title>

</head>

<body>

<dl> 

<dt>HTML</dt>

<dd>HyperText Markup Language – языкгипертекстовойразметки</dd>

<dt>Гипертекст (hypertext)</dt>

<dd>особый текст, в котором есть ссылки на другие документы</dd>

</dl>

</body>

</html>

Показать результат листинга 5

С помощью таблицей стилей можно изменить внешний вид списков.