Книга: HTML, XHTML и CSS на 100%

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

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

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

Нумерованные списки применяются, когда порядок следования пунктов списка имеет большое значение, например при описании алгоритмов или других пошаговых действий. Особенностью списков этого типа является то, что все их элементы упорядочены.

Для создания упорядоченных списков применяется элемент OL, которому требуется наличие закрывающего тега, а все пункты списка находятся внутри этого элемента.

У элемента OL есть атрибут type, который задает формат символов, используемых для нумерации.

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

• A – заглавных букв латинского алфавита;

• a – строчных букв латинского алфавита;

• I – заглавных римских цифр;

• i – строчных римских цифр;

• 1 – арабских цифр.

Вторым атрибутом элемента OL является атрибут start, указывающий, с какого числа начинать нумерацию всего списка.

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

Листинг 2.8. Упорядоченные списки

<html>

<head>

<title>Списки</title>

<body>

<ol type="1" start="6">

<li>Достать ключ</li>

<li>Вставить ключ в замочную скважину</li>

<li>Повернуть ключ по часовой стрелке на два оборота</li>

<li>Достать ключ из замка</li>

<li>Открыть дверь</li>

</ol>

<ol type="A">

<li>Достать ключ</li>

<li>Вставить ключ в замочную скважину</li>

<li>Повернуть ключ по часовой стрелке на два оборота</li>

<li>Достать ключ из замка</li>

<li>Открыть дверь</li>

</ol>

<ol type="a">

<li>Достать ключ</li>

<li>Вставить ключ в замочную скважину</li>

<li>Повернуть ключ по часовой стрелке на два оборота</li>

<li>Достать ключ из замка</li>

<li>Открыть дверь</li>

</ol>

<ol type="I">

<li>Достать ключ</li>

<li>Вставить ключ в замочную скважину</li>

<li>Повернуть ключ по часовой стрелке на два оборота</li>

<li>Достать ключ из замка</li>

<li>Открыть дверь</li>

</ol>

<ol type="i">

<li>Достать ключ</li>

<li>Вставить ключ в замочную скважину</li>

<li>Повернуть ключ по часовой стрелке на два оборота</li>

<li>Достать ключ из замка</li>

<li>Открыть дверь</li>

</ol>

</body>

</html>

Фрагмент отображения в браузере кода из листинга 2.8 показан на рис. 2.8.


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

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

При создании упорядоченных списков на элемент LI можно возложить дополнительные функции. Как и в примере с маркированными списками, в элементе LI можно задать вид нумерации конкретного пункта с помощью атрибута type. Помимо этого, с помощью атрибута value можно задать номер, с которого будет продолжена нумерация списка.

В примере из листинга 2.9 представлен код для создания списка с разными типами нумерации и различным порядком следования элементов.

Листинг 2.9. Список с разными типами нумерации

<html>

<head>

<title>Списки</title>

<body>

<ol type="1" >

<li type="1" value="10">Закрой дверь</li>

<li>Сходи в магазин</li>

<li value="1">Открой дверь</li>

<li>Возьми деньги</li>

<li type="I">Иди налево</li>

<li type="I">Потом поверни направо</li>

<li>Увидишь магазин</li>

</ol>

</body>

</html>

Результат обработки листинга 2.9 представлен на рис. 2.9.


Рис. 2.9. Упорядоченный список с разной нумерацией

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

Оглавление книги

Оглавление статьи/книги
Похожие страницы

Генерация: 1.388. Запросов К БД/Cache: 3 / 0
поделиться
Вверх Вниз