Такой список представляет собой перечень "пронумерованный" каким-либо образом. Это могут быть арабские цифры, цифры римского
алфавита или буквы.
Чтобы указать браузеру, что список будет нумерованным, используются теги <ol></ol>. Весь список
располагается между этими тегами и каждый его пункт задается тегами <li></li>.
Пример кода для нумерованного списка:
html списки
кошки
собаки
лошади
Результат:
кошки
собаки
лошади
Как видите, по умолчанию нумерация ведется арабскими цифрами. Это можно изменить с помощью параметра type:
- type="I" - нумерация большими римскими цифрами (I, II, III) .
- type="i" - нумерация маленькими римскими цифрами (i, ii, iii).
Пример кода с римскими цифрами:
html списки
кошки
собаки
лошади
Результат:
кошки
собаки
лошади
Если нам нужно начать нумерацию не с единицы, то следует использовать параметр start, в качестве значения
которого указывается число, с которого будет начинаться список (если нумерация задается с помощью букв, то это число будет
указывать на позицию в алфавите).
Пример кода:
html списки
кошки
собаки
лошади
Результат:
кошки
собаки
лошади
У тега <li> можно задать параметр value, который позволяет изменить номер данного
элемента списка. При этом изменяется нумерация и всех последующих элементов.
Пример кода:
html списки
красный
оранжевый
желтый
...............
фиолетовый
Результат:
красный
оранжевый
желтый
...............
фиолетовый
Маркированные списки
В маркированном списке вместо букв и цифр используются маркеры.
Чтобы указать браузеру, что список будет маркированным, используются теги <ul></ul>. Весь список
располагается между этими тегами и каждый его пункт задается тегами <li></li>.
Пример кода для маркированного списка:
html маркированные списки
кошки
собаки
лошади
Результат:
кошки
собаки
лошади
По умолчанию маркер отображается в виде черного кружочка. Это можно изменить с помощью параметра type:
- type="disc" - закрашенный кружочек.
- type="circle" - пустой кружочек.
- type="square" - закрашенный квадратик.
Пример кода для маркированных списков:
html маркированные списки
кошки
собаки
лошади
кошки
собаки
лошади
кошки
собаки
лошади
Результат:
кошки
собаки
лошади
кошки
собаки
лошади
кошки
собаки
лошади
Списки определений
Таки списки используются в словарях. Каждый пункт состоит из двух частей: термин и его определение.
Чтобы указать браузеру, что будет список определений, используются теги <dl></dl>.
Каждый термин заключается в теги <dt></dt>, а их определения - в теги <dd></dd>.
Пример кода списка определений:
Списки определений
Термин 1
Определение термина 1
Термин 2
Определение термина 2
Результат:
Вложенные списки
Бывают ситуации, когда в элемент списка необходимо включить свой список. Такие списки называются многоуровневыми или вложенными.
Для этого используется комбинация уже известных нам тегов списков.
Пример кода многоуровневого списка:
Вложенные списки
Животные
кошки
собаки
Растения
деревья
цветы
Результат:
Уровень вложенности может быть любым, главное не запутайтесь. На этом седьмой урок закончен. В следующем уроке мы
рассмотрим работу с изображениями.