Списки
Для начала необходимо ознакомится с общей структурой создания списка.
Содержание
Неупорядоченные списки
Для начала необходимо ознакомится с общей структурой создания списка. Первым идёт открывающий тег списка <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> |