Ученик
Главная » Статьи » Уроки html
HTML - Урок 7. Списки


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

Такой список представляет собой перечень "пронумерованный" каким-либо образом. Это могут быть арабские цифры, цифры римского алфавита или буквы.

Чтобы указать браузеру, что список будет нумерованным, используются теги <ol></ol>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>.

Пример кода для нумерованного списка:
&lt;html&gt; &lt;head&gt; &lt;title&gt;html списки&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ol&gt; &lt;li&gt;кошки&lt;/li&gt; &lt;li&gt;собаки&lt;/li&gt; &lt;li&gt;лошади&lt;/li&gt; &lt;/ol&gt; &lt;/body&gt; &lt;/html&gt;
Результат:
  1. кошки
  2. собаки
  3. лошади
Как видите, по умолчанию нумерация ведется арабскими цифрами. Это можно изменить с помощью параметра type:

- type="A" - нумерация заглавными латинскими буквами (A, B, C).

- type="a" - нумерация прописными латинскими буквами (a, b, c).

- type="I" - нумерация большими римскими цифрами (I, II, III) .

- type="i" - нумерация маленькими римскими цифрами (i, ii, iii).

Пример кода с римскими цифрами:
&lt;html&gt; &lt;head&gt; &lt;title&gt;html списки&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ol type="I"&gt; &lt;li&gt;кошки&lt;/li&gt; &lt;li&gt;собаки&lt;/li&gt; &lt;li&gt;лошади&lt;/li&gt; &lt;/ol&gt; &lt;/body&gt; &lt;/html&gt;
Результат:
  1. кошки
  2. собаки
  3. лошади
Если нам нужно начать нумерацию не с единицы, то следует использовать параметр start, в качестве значения которого указывается число, с которого будет начинаться список (если нумерация задается с помощью букв, то это число будет указывать на позицию в алфавите).

Пример кода:
&lt;html&gt; &lt;head&gt; &lt;title&gt;html списки&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ol type="I" start="3"&gt; &lt;li&gt;кошки&lt;/li&gt; &lt;li&gt;собаки&lt;/li&gt; &lt;li&gt;лошади&lt;/li&gt; &lt;/ol&gt; &lt;/body&gt; &lt;/html&gt;
Результат:
  1. кошки
  2. собаки
  3. лошади
У тега <li> можно задать параметр value, который позволяет изменить номер данного элемента списка. При этом изменяется нумерация и всех последующих элементов.

Пример кода:
&lt;html&gt; &lt;head&gt; &lt;title&gt;html списки&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ol&gt; &lt;li&gt;красный&lt;/li&gt; &lt;li&gt;оранжевый&lt;/li&gt; &lt;li&gt;желтый&lt;/li&gt; &lt;br&gt;............... &lt;li value="7"&gt;фиолетовый&lt;/li&gt; &lt;/ol&gt; &lt;/body&gt; &lt;/html&gt;
Результат:
  1. красный
  2. оранжевый
  3. желтый

    4. ...............
  4. фиолетовый


Маркированные списки

В маркированном списке вместо букв и цифр используются маркеры. Чтобы указать браузеру, что список будет маркированным, используются теги <ul></ul>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>.

Пример кода для маркированного списка:
&lt;html&gt; &lt;head&gt; &lt;title&gt;html маркированные списки&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;li&gt;кошки&lt;/li&gt; &lt;li&gt;собаки&lt;/li&gt; &lt;li&gt;лошади&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt;
Результат:
  • кошки
  • собаки
  • лошади
По умолчанию маркер отображается в виде черного кружочка. Это можно изменить с помощью параметра type:

- type="disc" - закрашенный кружочек.

- type="circle" - пустой кружочек.

- type="square" - закрашенный квадратик.

Пример кода для маркированных списков:
&lt;html&gt; &lt;head&gt; &lt;title&gt;html маркированные списки&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ul type="disc"&gt; &lt;li&gt;кошки&lt;/li&gt; &lt;li&gt;собаки&lt;/li&gt; &lt;li&gt;лошади&lt;/li&gt; &lt;/ul&gt; &lt;ul type="circle"&gt; &lt;li&gt;кошки&lt;/li&gt; &lt;li&gt;собаки&lt;/li&gt; &lt;li&gt;лошади&lt;/li&gt; &lt;/ul&gt; &lt;ul type="square"&gt; &lt;li&gt;кошки&lt;/li&gt; &lt;li&gt;собаки&lt;/li&gt; &lt;li&gt;лошади&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt;
Результат:
  • кошки
  • собаки
  • лошади
  • кошки
  • собаки
  • лошади
  • кошки
  • собаки
  • лошади


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

Таки списки используются в словарях. Каждый пункт состоит из двух частей: термин и его определение. Чтобы указать браузеру, что будет список определений, используются теги <dl></dl>. Каждый термин заключается в теги <dt></dt>, а их определения - в теги <dd></dd>.

Пример кода списка определений:
&lt;html&gt; &lt;head&gt; &lt;title&gt;Списки определений&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;dl&gt; &lt;dt&gt;Термин 1&lt;/dt&gt; &lt;dd&gt;Определение термина 1&lt;/dd&gt; &lt;dt&gt;Термин 2&lt;/dt&gt; &lt;dd&gt;Определение термина 2&lt;/dd&gt; &lt;/dl&gt; &lt;/body&gt; &lt;/html&gt;
Результат:


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

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

Пример кода многоуровневого списка:
&lt;html&gt; &lt;head&gt; &lt;title&gt;Вложенные списки&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;li&gt;Животные &lt;ol&gt; &lt;li&gt;кошки&lt;/li&gt; &lt;li&gt;собаки&lt;/li&gt; &lt;/ol&gt; &lt;/li&gt; &lt;li&gt;Растения &lt;ol&gt; &lt;li&gt;деревья&lt;/li&gt; &lt;li&gt;цветы&lt;/li&gt; &lt;/ol&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt;
Результат:
Уровень вложенности может быть любым, главное не запутайтесь. На этом седьмой урок закончен. В следующем уроке мы рассмотрим работу с изображениями. 
Категория: Уроки html | Добавил: Pikal (21.12.2011)
Просмотров: 486 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]