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

Влад Мержевич

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега <ol>, который и применяется для создания списка. Каждый пункт нумерованного списка обозначается тегом <li>, как показано ниже.

<ol>
 <li>Первый пункт</li>
 <li>Второй пункт</li>
 <li>Третий пункт</li>
</ol>

Если не указывать никаких дополнительных атрибутов и просто написать тег <ol>, то по умолчанию применяется список с арабскими числами (1, 2, 3,...), как показано в примере 11.3.

Пример 11.3. Создание нумерованного списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Нумерованный список</title>
 </head>
 <body>
  <p><strong>Работа со временем</strong></p>
  <ol>
    <li>создание пунктуальности (никогда не будете никуда опаздывать);</li>
    <li>излечение от пунктуальности (никогда никуда не будете торопиться);</li>
    <li>изменение восприятия времени и часов.</li>
  </ol>
 </body>
</html>

Результат данного примера показан на рис. 11.3.

Рис. 11.3

Рис. 11.3. Вид нумерованного списка

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

В качестве нумерующих элементов могут выступать следующие значения:

  • арабские числа (1, 2, 3, ...);
  • прописные латинские буквы (A, B, C, ...);
  • строчные латинские буквы (a, b, c, ...);
  • прописные римские числа (I, II, III, ...);
  • строчные римские числа (i, ii, iii, ...).

Для указания типа нумерованного списка применяется атрибут type тега <ol>. Его возможные значения приведены в табл. 11.2.

Табл. 11.2. Типы нумерованного списка
Тип списка Код HTML Пример
Арабские числа <ol type="1">
<li>...</li>
</ol>
1. Чебурашка
2. Крокодил Гена
3. Шапокляк
Прописные буквы латинского алфавита <ol type="A">
<li>...</li>
</ol>
A. Чебурашка
B. Крокодил Гена
C. Шапокляк
Строчные буквы латинского алфавита <ol type="a">
<li>...</li>
</ol>
a. Чебурашка
b. Крокодил Гена
c. Шапокляк
Римские числа в верхнем регистре <ol type="I">
<li>...</li>
</ol>
I. Чебурашка
II. Крокодил Гена
III. Шапокляк
Римские числа в нижнем регистре <ol type="i">
<li>...</li>
</ol>
i. Чебурашка
ii. Крокодил Гена
iii. Шапокляк

Чтобы начать список с определенного значения, используется атрибут start тега <ol>. При этом не имеет значения, какой тип списка установлен с помощью type, атрибут start одинаково работает и с римскими и с арабскими числами. В примере 11.4 показано создание списка с использованием римских цифр в верхнем регистре, начинающихся с восьми.

Пример 11.4. Нумерация списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Римские числа</title>
 </head>
 <body>
  <ol type="I" start="8">
   <li>Король Магнум XLIV</li>
   <li>Король Зигфрид XVI</li>
   <li>Король Сигизмунд XXI</li>
   <li>Король Хусбрандт I</li>
  </ol>
 </body>
</html>

Результат данного примера показан на рис. 11.4.

Рис. 11.4

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

HTML по теме

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.