Глава 1.4. Списки
1.4.1. Общее описание
HTML поддерживает три способа хранения и отображения списков. Любой список состоит из одного или нескольких элементов списков. Списки подразделяются на:
- маркированные (неупорядоченные) списки;
- нумерованные (упорядоченные) списки;
- списки определений.
Только что приведенный список является маркированным и выглядит на языке HTML так:
<UL> <LI>маркированные (неупорядоченные) списки;</LI> <LI>нумерованные (упорядоченные) списки;</LI> <LI>списки определений.</LI> </UL>
Нумерованный список выглядит аналогично, но его элементы нумеруются:
- первый элемент списка;
- второй элемент списка;
- третий элемент списка.
На языке HTML это записывается так:
<OL> <LI>первый элемент списка;</LI> <LI>второй элемент списка;</LI> <LI>третий элемент списка.</LI> </OL>
Наконец, списки определений состоят из пар термин/определение, хотя их применение гораздо шире. Пример использования списка определений для составления театрального репертуара:
- 1 июля
- А. К. Толстой. Царь Федор Иоаннович
- 4 июля
- У. Теккерей. Ярмарка тщеславия
- 9 июля
- А. Островский. Волки и овцы
На языке HTML это записывается так:
<DL> <DT><STRONG>1 июля</STRONG></DT> <DD>А. К. Толстой. <EM>Царь Федор Иоаннович</EM></DD> <DT><STRONG>4 июля</STRONG></DT> <DD>У. Теккерей. <EM>Ярмарка тщеславия</EM></DD> <DT><STRONG>9 июля</STRONG></DT> <DD>А. Островский. <EM>Волки и овцы</EM></DD> </DL>
Списки могут вкладываться друг в друга, причем допускается вложение списков одного типа в списки другого типа. Следующий рецепт приготовления яичницы с ветчиной демонстрирует список определений, в который вложены маркированный список (ингредиенты) и нумерованный список (способ приготовления):
- Ингредиенты:
-
- яйцо 6 шт.
- ветчина 200 г
- масло сливочное 2 ст. ложки
- соль по вкусу
- зелень
- Способ приготовления:
-
- Ветчину нарезать мелкими кубиками и обжарить с маслом.
- Разбить на обжаренную ветчину яйца.
- Посолить и жарить на слабом огне.
- Перед подачей посыпать зеленью.
Способ отображения списков зависит от обозревателя и может быть уточнен с помощью задания стиля списка.
1.4.2. Маркированные списки: элемент UL
Синтаксис: <UL>…</UL> (блочный элемент) Атрибуты: id, class, style, title, lang, dir, события
Поддержка:Полное соответствие стандарту (5.0+)
Атрибут dir игнорируется (4.0+)
Элемент UL (unordered list) определяет маркированный список. Его содержимым должны быть один или несколько элементов LI. Обозреватели обычно отображают элементы маркированного списка с отступом вправо и с маркером перед началом элемента (см. примеры, приведенные выше). Свойство стилей list-style позволяет авторам изменять вид маркеров, запрещать их вывод и т. п.
1.4.3. Нумерованные списки: элемент OL
Синтаксис: <OL>…</OL> (блочный элемент) Атрибуты: id, class, style, title, lang, dir, события
Поддержка:
Элемент OL (ordered list) определяет нумерованный список. Его содержимым должны быть один или несколько элементов LI. Обозреватели обычно отображают элементы нумерованного списка с отступом вправо и с номером перед началом элемента (см. примеры, приведенные выше). Свойство стилей list-style позволяет авторам изменять способ нумерации элементов списка.
1.4.4. Элементы списков: элемент LI
Синтаксис: <LI>…</LI> (блочный элемент, конечный тег необязателен) Атрибуты: id, class, style, title, lang, dir, события
Поддержка:
Элемент LI (list item) определяет элемент маркированного или нумерованного списка. Он может включать в себя другие блочные элементы, в т. ч. и элементы OL и UL, позволяя тем самым создавать многоуровневые вложенные списки. Способ его отображения зависит от типа списка и может быть изменен свойством стилей list-style.
1.4.5. Списки определений: элементы DL, DT и DD
Синтаксис: <DL>…</DL> (блочный элемент) Атрибуты: id, class, style, title, lang, dir, события
Синтаксис: <DT>…</DT> (блочный элемент, конечный тег необязателен) Атрибуты: id, class, style, title, lang, dir, события
Синтаксис: <DD>…</DD> (блочный элемент, конечный тег необязателен) Атрибуты: id, class, style, title, lang, dir, события
Поддержка:
Элемент DL (definition list) определяет список определений. Он отличается от остальных типов списков тем, что каждый элемент этого списка представляется двумя элементами HTML: элементом DT (definition term), содержащим имя определяемого термина, и элементом DD (definition description), содержащим определение этого термина (см. примеры, приведенные выше). Элемент DT может содержать любые текстовые (но не блочные) элементы. Элемент DD может содержать как текстовые, так и блочные элементы, позволяя тем самым создавать многоуровневые вложенные списки.
Стандарт не исключает возможности давать несколько определений одного термина или одно определение нескольким терминам, как показано в следующем примере:
<DL>
<DT>Uniform Resource Identifier</DT>
<DT>Унифицированный идентификатор ресурса</DT>
<DD>Стандартизованная строка, указывающая на ресурс Интернета,
такой как HTML-документ или дисковый файл.</DD>
</DL>
Этот пример будет отображаться так:
- Uniform Resource Identifier
- Унифицированный идентификатор ресурса
- Стандартизованная строка, указывающая на ресурс Интернета, такой как HTML-документ или дисковый файл.
Как отмечалось выше, списки определений имеют довольно широкий круг применений. Одним из них является представление диалогов, в которых элемент DT содержит имя говорящего, а DD - его или ее слова. Пример такого диалога из "Вишневого сада" А. П. Чехова:
<DL> <DT>Фирс</DT> <DD>Перед несчастьем тоже было: и сова кричала, и самовар гудел бесперечь.</DD> <DT>Гаев</DT> <DD>Перед каким несчастьем?</DD> <DT>Фирс</DT> <DD>Перед волей.</DD> </DL>
Этот диалог будет отображаться так:
- Фирс
- Перед несчастьем тоже было: и сова кричала, и самовар гудел бесперечь.
- Гаев
- Перед каким несчастьем?
- Фирс
- Перед волей.
