Рейтинг@Mail.ru

Списки в мире Web

Создание списков вручную - довольно утомительное занятие, особенно если в качестве маркера вы выбрали какой-нибудь символ или картинку. XHTML предоставляет нам автоматизированные способы создания списков, достаточно только вставить нужные теги на сайт.

В Web есть 3 вида списков: нумерованные, ненумерованные и списки определений.

Обычные списки

Вначале о том, как создаются все списки в XHTML.

  1. Для создания списка нужен открывающий и закрывающий тег списка.
  2. Для каждого элемента списка нужен открывающий и закрывающий тег элемента списка.

Упорядоченные списки создаются тегом <ol>.

Неупорядоченные списки создаются тегом <ul>.

Элементы списка создаются тегом <li>.

Пример:

<ol>
<li>Это 1 элемент упорядоченного списка</li>
<li>Это 2 элемент</li>
<li>Это 3 элемент</li>
</ol>

Вот что мы получим в браузере

  1. Это 1 элемент упорядоченного списка
  2. Это 2 элемент
  3. Это 3 элемент

Аналогично с ненумерованными списками

<ul>
<li>Это 1 элемент неупорядоченного списка</li>
<li>Это 57 элемент</li>
<li>Это 25 элемент :-)</li>
</ul>

Теги <ol> и <ul> поддерживают атрибут type, указывающий на способ отображения маркера. Для тега <ol> он может принимать такие значения:

Тип Схема нумерации Пример
1 Обычные числа 1,2,3..8,9...
a Строчные буквы(EN) a, b, c...
A Заглавные буквы(EN) A, B, C...
i Малые римские цифры i,ii,iii,iv...
I Большие римские цифры I,II,III...

Атрибут type тега <ul> может принимать значения: disk(стандартный черный круг), circle(Белый круг с черной границей) и square(черный квадрат).

Тег <ol> также поддерживает атрибут start, который говорит браузеру, с какого номера начинать отсчет. Например:

<ol start="15">
<li>Это 15 элемент упорядоченного списка</li>
<li>Это 16 элемент</li>
<li>Это 17 элемент</li>
</ol>

  1. Это 15 элемент упорядоченного списка
  2. Это 16 элемент
  3. Это 17 элемент

Список определений

Список определений - неупорядоченный список, где элемент состоит из двух частей - термина и его определения. Браузер отображает список определений так, что термин пишется слева на верхней строке, а его определение - справа на нижних строках. Пример можно посмотреть на странице Словарь.

Тег списка определений - <dl>. В него может вставляться неограниченное количество терминов-определений.

Пара термин-определение вставляется 4 тегами: термин заключен в теги <dt> и </dt>, а сразу после них идет определение термина в тегах <dd> и </dd>.

Пример:

<dl>
<dt>Термин</dt><dd>Определение</dd>
<dt>Другой термин</dt><dd>Определение другого термина</dd>
<dt>Etc.</dt><dd>Латинская фраза, означающая "и так далее"</dd>
</dl>

Термин
Определение
Другой термин
Определение другого термина
Etc.
Латинская фраза, означающая "и так далее"

Вложенные списки

Вы легко можете создавать вложенные списки. Для этого всего лишь нужно поместить один список как элемент другого списка.

Есть еще хороший способ
Размечать наши страницы:
Сможем мы легко и просто
Добавлять на них таблицы!

 

 

uroki.webservis.ru        Рейтинг@Mail.ru