Содержание:

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

В HTML различают:

  • неупорядоченные списки (произвольное перечисление);
  • упорядоченные списки (пошаговое описание, в котором каждый шаг пронумерован);
  • список определений (толковый словарь).

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

4.1. Неупорядоченные и упорядоченные списки и их элементы

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

4.2. Неупорядоченные списки. Элемент <ul>

Задание начального и конечного тегов элемента <ul> является обязательным.

Атрибуты (все необязательные):

  • type — задает информацию о виде используемых маркеров. Может принимать следующие значения:
    • circle — маркеры отображаются в виде незакрашенных кружков;
    • disc — маркеры отображаются в виде закрашенных кружков;
    • square — маркеры отображаются в виде закрашенных квадратов.

    Примечание
    Если не задать значение атрибуту type, браузер будет использовать маркеры по своему усмотрению (обычно закрашенные кружки).

  • compact — присутствие этого атрибута указывает браузеру на то, что данный список он должен отображать более компактно (например, уменьшив межстроковый интервал).
  • id, class — идентификаторы в пределах документа;
  • lang, dir — информация о языке и направленности текста;
  • title — заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое элемента);
  • style — встроенная информация о стиле;
  • onclick, ondblclick, onmousedown, omnouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup — внутренние события.

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

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

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Пример задания неупорядоченного списка
</title>
</head>

<body>
<p>
Перед поездкой на озеро не плохо составить список всего,
что нужно взять с собой, чтобы ничего не забыть.
</p>

<h3>Еда</h3>
<ul>
  <li>Мясо</li>
  <li>Кетчуп</li>
  <li>Огурцы</li>
  <li>Яблоки</li>
  <li>Сок</li>
</ul>

<h3>Все остальное</h3>
<ul>
  <li>Купальники</li>
  <li>Лежак</li>
  <li>Одеяло</li>
  <li>Навигатор</li>
</ul>

</body>
</html>

 

Неупорядоченный список

Рис. 4.2. Пример задания неупорядоченного списка.

Для элемента <li> определены такие же стандартные атрибуты, что и для элемента <ul>, и еще два необязательных атрибута value и type. Эти атрибуты используются при работе с упорядоченными списками и будут рассмотрены позже. Визуально функции элемента <li> сводятся к отображению маркера в неупорядоченных списках или нумерации в упорядоченных списках.

Допускается использование вложенных неупорядоченных списков (рис. 4.3). При отображении вложенных неупорядоченных списков браузеры по умолчанию используют различную маркировку списков разного уровня.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Пример использования вложенных списков
</title>

<style>
.city { color: darkred }
.club { color: darkgreen }
.player {color: darkblue }
</style>
</head>
<body>
<h3 align="center">
Российские футбольные клубы и их лучшие игроки
</h2>
<ul class="city">
<li>

САНКТ-ПЕТЕРБУРГ

<ul class="club">
<li>
"Зенит"

<ul class="player">
<li>А. Панов</li>

<li>А. Куртиян</li>
<li>Р. Березовский</li>
<li>С. Оганисян</li>
</ul>

</li>
</ul>

</li>
<li>
МОСКВА

<ul class="club">
<li>

"Спартак"

<ul class="player">
<li>Е. Титов</li>
<li>В. Ананко</li>
<li>Робсон</li>

<li>А. Тихонов</li>
</ul>
</li>
<li>
"Локомотив"


<ul class="player">
<li>А. Чугайнов</li>
<li>З. Джанашия</li>
<li>А. Булыкин</li>

<li>Е. Харлачев</li>
</ul>
</li>
<li>
"ЦСКА"


<ul class="player">
<li>B.Кулик</li>
<li>В.Хомуха</li>
<li>С.Семак</li>

<li>E.Варламов</li>
</ul>
</li>
</ul>

</li>
</ul>


</body>
</html>

 

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

Рис. 4.3.  Пример использования вложенных списков.

С помощью атрибута type элемента <ul> можно непосредственно указывать вид маркера. Например (рис. 4.4):

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>
Пример использования атрибута type
</title>
</head>
<body>
<ul type="circle">
  <li>Mapкep — незакрашенный кружок</li>
  <li>Маркер — незакрашенный кружок</li>
  <li>Маркер — незакрашенный кружок</li>
</ul>
<ul>
  <li>Маркер — закрашенный кружок</li>
  <li>Маркер — закрашенный кружок</li>
  <li>Маркер — закрашенный кружок</li>
</ul>
<ul type="square">
  <li>Маркер — закрашенный квадратик</li>
  <li>Маркер — закрашенный квадратик</li>
  <li>Маркер — закрашенный квадратик</li>
</ul>
</body>
</html>

 

Использование атрибута type

Рис. 4.4. Пример использования атрибута type для задания внешнего вида
маркеров неупорядоченного списка.

Для придания документу оригинальности можно использовать в списках нестандартные маркерамы, например: звездочки, шарики и т.п. Для этого вместо элемента <li> у каждого элемента списка используются элемент img — вставки изображения маркера и элемент br — перехода на новую строку (рис. 4.5).

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Пример списка с нестандартными маркерами
</title>
</head>
<body>
<h2 align="center">Солнечная система</h2>

<strong>Солнечная система</strong> состоит из центрального светила —
Солнца и девяти планет, обращающихся вокруг него, их спутников,
множества малых планет, комет и межпланетной пыли.
<ul>
<h3>Список планет Солнечной системы</h3>
<img src="square.gif">Меркурий<br>

<img src="square.gif">Beнepa<br>
<img src="square.gif">Земля<br>
<img src="square.gif">Марс<br>
<img src="square.gif">Юпитер<br>

<img src="square.gif">Сатурн<br>
<img src="square.gif">Уран<br>
<img src="square.gif">Нептун<br>
<img src="square.gif">Плутон<br>

</ul>
</body>
</html>

 

Использование авторских маркеров

Рис. 4.5. Пример списка с авторскими маркерами в виде изображений.

4.3. Упорядоченные списки. Элемент <ol>

С помощью элемента <ol> в HTML-документах задаются упорядоченные (нумерованные) списки. Так же, как и в случае неупорядоченных списков, элементом упорядоченного списка является элемент <li> со своим содержимым.

Указание начального и конечного тегов элементов <ol> является обязательным.

Атрибуты (все необязательные):

  • tуре — указывает способ нумерации элементов упорядоченого списка.
  • Может принимать следующие значения:
    • tуре = 1 — задает нумерацию арабскими цифрами (используется браузерами по умолчанию);
    • tуре = A — задает нумерацию прописными латинскими буквами;
    • tуре = a — задает нумерацию строчными латинскими буквами;
    • tуре = I — задает нумерацию большими римскими цифрами;
    • tуре = i — задает нумерацию маленькими римскими цифрами.

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

  • start — задает начальный номер первого элемента в упорядоченном списке. В качестве значения может принимать только натуральное число, независимо от вида нумерации, т.к. задает начальный номер, а не начальное значение в нумерации. Например, номер значения "C" в нумерации прописными латинскими буквами равен 3. По умолчанию значение атрибута start равно 1.
  • id, class — идентификаторы в пределах документа.
  • lang, dir — информация о языке и направленности текста.
  • title — заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое элемента).
  • style — встроенная информация о стиле.
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup — внутренние события.

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

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Пример задания упорядоченного списка
</title>
</head>
<body>

<h2 align="center">Лауреаты Нобелевской премии по физике</h2>
<ol>
<li>БАРДИН (Bardeen), Джон</li>
<li>БАРКЛА (Barkla), Чарлз Главер</li>
<li>БЕККЕРЕЛЬ (Becquerel), Анри</li>
<li>БОР (Bohr), Нильс</li>
<li>Б0РН (Born), Макс<br>
..........</li>
<li value=50>ШТАРК (Stark), Йоханнес</li>
<li>ЭЙНШТЕЙН (Einstein), Альберт</li>
</ol>
</body>
</html>

 

Упорядоченный список

Рис. 4.6. Упорядоченный список

Аналогично неупорядоченным спискам для вложенных упорядоченных списков автоматически происходит смена вида нумерации (рис. 4.7). Но здесь есть небольшой нюанс. Обратите внимание на строку <ol type=I>. Если мы зададим тип нумерации по умолчанию (<ol>), то внешний и вложенные списки будут пронумерованы арабскими цифрами — как уже говорилось ранее, при использовании вложенных упорядоченных списков браузеры по умолчанию не делают разной нумерации списков различного уровня.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Пример вложенных упорядоченных списков
</title>
</head>

<body>
<h2 align="center">Hoбeлeвcкиe лауреаты</h2>
<ol type=I>

<li>
<strong>Премия по химии</strong>
<ol>
<li>АРРЕНИУС (Arrhenius), Сванте</li>
<li>ACTOH (Aston), Фрэнсис Уильям<br>
..........</li>
<li value=31>ЭЙЛЕР-ХЕЛЬПИН (Euler-Chelpin), Ханс фон</li>
<li>ЮРИ (Urey), Гарольд К.</li>
</ol>

</li>
<li>
<strong>Премия по литературе</strong>
<ol>
<li>БЕНАВЕНТЕ-И-МАРТИНЕС (Benavente у Martinez), Хасинто</li>
<li>BEPГCOH (Bergson), Анри<br>
..........</li>
<li value=31>ЭЙKEH (Eucken), Рудольф</li>
<li>ЭЧЕГАРАЙ (Echegaray), Xoce</li>
</ol>
</li>
<li>

<strong>Премия мира</strong>
<ol>
<li>ACCEP (Asser), Тобиас</li>
<li>APHOЛЬДCOH (Arnoldson), Клас<br>
..........</li>
<li value=25>САХАРОВ, Андрей</li>
<li>ФPИД (Fried), Альфред</li>
</ol>
</li>
</ol>
</body>
</html>

 

Вложенные упорядоченные списки

Рис. 4.7. Вложенные упорядоченные списки

В этом примере также проиллюстрировано использование атрибута value элемента <li>. С ним связана маленькая тонкость: если используется нумерация не арабскими цифрами, а, например, прописными латинскими буквами, то в качестве значения атрибута value по-прежнему указывается арабское число, соответствующее порядковому номеру буквы в алфавите.

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

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

  • определяемого термина, задаваемого с помощью элемента <dt> (Definition Term);
  • текста с его определением, задаваемого с помощью элемента <dd> (Definition Description).

Сам список определений заключается в содержимом элемента-контейнера <dl> (Definition List).

Атрибуты:

  • id, class — идентификаторы в пределах документа;
  • lang, dir — информация о языке и направленности текста;
  • title — заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое элемента);
  • style — встроенная информация о стиле;
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydovm, onkeyup — внутренние события.

Для элемента <dl> допустимо задание атрибута compact, дающего указание браузеру отображать список более компактно.

Задание начального и конечного тега для элемента <dl> является обязательным. Для элементов <dt> и <dd> начальный тег обязателен, а конечный тег можно опускать.

Недопустимо использование элементов уровня блока (например, элементы заголовков h1...h6 или элемент абзаца <p>) в содержимом элемента <dt>. В содержимом элемента <dd> их использование разрешается. Это, кроме всего прочего, говорит о возможности создания вложенных списков определений.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Пример списка определений
</title>
</head>
<body>
<h2 align="center">Математический справочник</h2>

<dl>
<dt><strong>Делитель нуля</strong></dt>
<dd>
Это ненулевой элемент кольца или подгруппы с нулем, произведение
которого на некоторый ненулевой элемент равно нулю. В некоммутативном
случае различают левые и правые делители нуля.
</dd>

<dt><strong>Делийская задача</strong></dt>
<dd>
Задача об удвоении куба. Заключается в построении циркулем и линейкой
стророны куба, объем которого вдвое больше объема данного куба.
Название "Делийская задача" связано с преданием, по которому жители
острова Делос, чтобы избежать чумы, должны были исполнить повеление
дельфийского оракула удвоить объем жертвенника, не изменяя при этом
его кубической формы.
</dd>

<dt><strong>Дискретная математика</strong></dt>
<dd>
Область математики, занимающаяся изучением свойств дискретных
структур, которые возникают как внутри математики, так и в ее
приложениях. К числу таких структур могут быть отнесены, например,
конечные группы, конечные графы, а также некоторые математические
модели преобразователей информации, конечные автоматы, машины
Тьюринга и т.п.
</dd>
</dl>
</body>
</html>

 

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

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

4.5. Комбинирование различных списков

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

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Пример вложения друг в друга списков различного типа
</title>

<style type="text/css">
body { font-weight: bold }
.chapter { color: darkred }
.paragraph { color: darkgreen }
dt { color: darkblue }
dd { font-style: italic; color: darkblue }
</style>
</head>
<body>
<h2 align="center">
Содержание учебника по истории раннего средневековья
</h2>
<ul>
<li class="chapter">

Глава 1. Западная и центральная Европа в VI-XI веках

<ol>
<li class="paragraph">
Древние Германцы и Римская империя.
</li>
<li class="paragraph">
Франкское королевство.


<dl>
<dt>Франкское королевство</dt>
<dd>
Oно возникло в конце V века на части территории бывшей Римской
империи при завоевании франками во главе с Хлодвигом Галлии.
</dd>
</dl>

..........
</li>
<li value=7 class="paragraph">
Культура Западной и Центральной Европы.
</li>
<li class="paragraph">
Образование славянских государств.
</li>

</ol>

</li>
<li class="chapter">
Глава 2. Византийская империя в VI-XI веках

<ol>
<li class="paragraph">
Византия при Юстиниане.


<dl>
<dt>Юстиниан I</dt>
<dd>
3авоевал Северную Африку, Сицилию, Италию, часть Испании. Провел
кодификацию римского права, стимулировал большое строительство.
</dd>
</dl>

</li>
<li class="paragraph">
Культура Византии.
</li>
</ol>

</li>
<li class="chapter">

Приложения

<ol type=A>
<li class="paragraph">
Краткая биография Карла Великого.
</li>
<li class="paragraph">
Карта Франкского королевства в X веке.
<br>..........
</li>

<li value=5 class="paragraph">
Хронология развития Византийского государства
</li>
</ol>

</li>
</ul>

</body>
</html>

 

Комбинирование списков различного типа с вложением

Рис. 4.9. Комбинирование списков различного типа с вложением