Списки
Для начала необходимо ознакомится с общей структурой создания списка.
Содержание
Неупорядоченные списки
Для начала необходимо ознакомится с общей структурой создания списка. Первым идёт открывающий тег списка <ul>, который указывает, на то, что именно с этого места начинается список. Естественно, что этот тег является парным, и по окончанию списка его необходимо закрыть. Внутри этого контейнера располагаются элементы списка, которые обозначаются тегом <li>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul> <!-- Начало списка --> <li> Январь </li> <li> Февраль </li> <li> Март </li> <li> Апрель </li> <li> Май </li> <li> Июнь </li> <li> Июль </li> <li> Август </li> <li> Сентябрь </li> <li> Октябрь </li> <li> Ноябрь </li> <li> Декабрь </li> </ul> <!-- Окончание списка --> |
Атрибут type тега <ul>
Тип списка можно задать при помощи атрибута type, тега <ul>, значения которого могут быть равны следующему:
disk— отображение маркеров в виде окрашенных кружков;circle— отображение маркеров в виде неокрашенных кружков;square— отображение маркеров в виде окрашенных квадратиков.
Кроме всего прочего, для каждого элемента списка <li> можно задать свой тип маркера.
Упорядоченные списки
Технология создания нумерованных (упорядоченных) списков незначительно отличается от технологии создания маркированных (неупорядоченных) списков. Если вы хотите создать нумерованный список, вместо тега <ul> применяется тег-контейнер <ol>. Воспользуемся предыдущим примером для иллюстрации нумерованного списка, только в данном случае пронумеруем месяцы по порядку:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ol> <!-- Начало нумерованного списка --> <li> Январь </li> <li> Февраль </li> <li> Март </li> <li> Апрель </li> <li> Май </li> <li> Июнь </li> <li> Июль </li> <li> Август </li> <li> Сентябрь </li> <li> Октябрь </li> <li> Ноябрь </li> <li> Декабрь </li> </ol> <!-- Окончание списка --> |
Атрибуты start и value тега <ol>
Это, что касается прерывание списка, и продолжения с его с любого номера, то для этого существует специальный атрибут тега <li> который звучит как value. Возможности атрибута start тега <ol> позволяют начать нумерацию списка с определённого вами значения (значение атрибута start), т.е. с любой цифры. Например:
|
1 2 3 4 5 6 7 |
<ol start='5'> <!--Начало нумерованного списка с цифры 5--> <li> Январь </li> <li> Февраль </li> <br/>.............. <!--Разрыв списка, вставка многоточия--> <li value='37'> Ноябрь </li><!--Продолжение списка с номера 37--> <li> Декабрь </li> </ol> <!--Окончание списка--> |
В рассмотренном выше примере мы задали нумерацию с номера 5, указав для тега <ol> значение атрибута start равным 5. Затем мы разорвали список тегом <br /> вставили многоточие,символизирующее прерывание списка. Затем, элемент <li>, идущий за тегом <br />, снабжается атрибутом value, равным 37, что позволяет продолжить с этого момента нумерацию списка (т.е. далее пойдёт нумерация уже от номера 37)
Атрибут type тегов <ol> и <li>
Атрибут type в нумерованных списках задаёт вид нумерации для списка. Нумерация может вестись арабскими цифрами (по умолчанию type='1'), римскими большими цифрами (type='I'), римскими малыми цифрами (type='i'), прописными латинскими буквами (type='A'), строчными латинскими буквами (type='a').
Вложенные списки
Для придания детальной структуризации спискам предусмотрена возможность включения одного списка в внутрь другого. В данном случае каждый элемент списка <li> может являться контейнером для нового (вложенного)списка.
Список определений
Списки определений, также называемые словарями определений специальных терминов, являются особенным видом списка. В отличии от других типов списков, каждый элемент списка определений всегда состоит из двух частей. В первой части элемента списка записывается термин, который вы хотите растолковать, а в второй части — текст в форме словарной статьи, растолковывающий термин.
Списки определений задаются с помощью тега-контейнера <dl> (Definition List). Внутри контейнера при помощи тега <dt> (Definition Term) помечается определяемый термин, а при помощи тега <dd> (Definition Description) абзац с его определением. В общем синтаксис списка определений выглядит следующим образом:
|
1 2 3 4 5 6 |
<dl> <dt> Термин</dt> <dd> Толкование термина </dd> </dl> |