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

Нумерованный список часто называется упорядоченным (Ordered List) и представляет собой определенную последовательность элементов. Для создания нумерованного списка используется тег-контейнер <OL>, внутри которого располагаются пункты перечня информационных данных, за указание которых отвечает специальный тег <LI> (List Item — пункт списка или элемент списка)

 

 


Как видно из примера, после каждого пункта списка осуществляется перенос строки, причем без указания каких-либо структурных тегов. Также следует заметить, что закрывающий тег </li> отсутствует, хотя и существует в спецификации HTML. Закрывать этот тег не обязательно.

Если заголовок списка «Нужно купить в магазине:» размещается между тегом <ol> и первым пунктом списка <li>, то заголовок разместится с отступом от левого края документа (как и все пункты списка) и на расстоянии в одну строку от предыдущего текста.

При указании заголовка перед тегом <ol> браузер, интерпретируя HTML-код, создаст двойной перенос и разместит текст заголовка левее пунктов списка.

Иногда может возникнуть ситуация, когда список содержит определенный разрыв в последовательности представления пунктов (например, после пункта 3 должен идти пункт 5). Для этой цели используется специальный параметр тега <li> - VALUE

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

Тип списка Код 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. Информатика

 

Создадим дополнительный файл Список.html и создадим в нем список фамилий группы:

 

Запустим на выполнение файл Index.html: