Глава 1.4. Списки

1.4.1. Общее описание

HTML поддерживает три способа хранения и отображения списков. Любой список состоит из одного или нескольких элементов списков. Списки подразделяются на:

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

Только что приведенный список является маркированным и выглядит на языке HTML так:

<UL>
  <LI>маркированные (неупорядоченные) списки;</LI>
  <LI>нумерованные (упорядоченные) списки;</LI>
  <LI>списки определений.</LI>
</UL>

Нумерованный список выглядит аналогично, но его элементы нумеруются:

  1. первый элемент списка;
  2. второй элемент списка;
  3. третий элемент списка.

На языке 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. Ветчину нарезать мелкими кубиками и обжарить с маслом.
  2. Разбить на обжаренную ветчину яйца.
  3. Посолить и жарить на слабом огне.
  4. Перед подачей посыпать зеленью.

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

1.4.2. Маркированные списки: элемент UL

Синтаксис: <UL>…</UL> (блочный элемент)
Атрибуты:  id, class, style, title, lang, dir, события
Поддержка: Internet Explorer Полное соответствие стандарту (5.0+)
           Netscape Navigator Атрибут dir игнорируется (4.0+)

Элемент UL (unordered list) определяет маркированный список. Его содержимым должны быть один или несколько элементов LI. Обозреватели обычно отображают элементы маркированного списка с отступом вправо и с маркером перед началом элемента (см. примеры, приведенные выше). Свойство стилей list-style позволяет авторам изменять вид маркеров, запрещать их вывод и т. п.

1.4.3. Нумерованные списки: элемент OL

Синтаксис: <OL>…</OL> (блочный элемент)
Атрибуты:  id, class, style, title, lang, dir, события
Поддержка: Internet Explorer Полное соответствие стандарту (5.0+)
           Netscape Navigator Атрибут dir игнорируется (4.0+)

Элемент OL (ordered list) определяет нумерованный список. Его содержимым должны быть один или несколько элементов LI. Обозреватели обычно отображают элементы нумерованного списка с отступом вправо и с номером перед началом элемента (см. примеры, приведенные выше). Свойство стилей list-style позволяет авторам изменять способ нумерации элементов списка.

1.4.4. Элементы списков: элемент LI

Синтаксис: <LI>…</LI> (блочный элемент, конечный тег необязателен)
Атрибуты:  id, class, style, title, lang, dir, события
Поддержка: Internet Explorer Полное соответствие стандарту (5.0+)
           Netscape Navigator Атрибут dir игнорируется (4.0+)

Элемент 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, события
Поддержка: Internet Explorer Полное соответствие стандарту (5.0+)
           Netscape Navigator Атрибут dir игнорируется (4.0+)

Элемент 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>

Этот диалог будет отображаться так:

Фирс
Перед несчастьем тоже было: и сова кричала, и самовар гудел бесперечь.
Гаев
Перед каким несчастьем?
Фирс
Перед волей.
HIVE: All information for read only. Please respect copyright!
Advertising:
Hosted by hive
йца: йХЕБЯЙЮЪ ЦНПНДЯЙЮЪ АХАКХНРЕЙЮ