voliuf.narod.ru

5.Списки HTML

HTML поддерживает упорядоченные списки, неупорядоченные списки, и списки определений. Отличаются эти разновидности списков лишь способом оформления. Перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.

Неупорядоченные списки

Неупорядоченный список является списком элементов. Элементы списка маркируются с помощью специальных знаков (обычно небольшой черный круг).

Неупорядоченный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.

<html>
<body>

<h4>Неупорядоченный список:</h4>
<ul>
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
</ul>

</body>
</html>

Внутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.

Упорядоченные списки

Упорядоченный список также является списком элементов. Элементы списка маркируются с помощью чисел или букв.

Упорядоченный список начинается с тега<ol>. Каждый элемент списка начинается с тега <li>. У тега <ol> может быть два атрибута start (определяет первое число, с которого начинается нумерация пунктов) и type (определяет стиль нумерации пунктов). Может иметь значения:

"A" - заглавные буквы A, B, C ...
"a" - строчные буквы a, b, c ...
"I" - большие римские числа I, II, III ...
"i" - маленькие римские числа i, ii, iii ...
"1" - арабские числа 1, 2, 3 ...

<html>
<body>

<h4>Упорядоченный список:</h4>
<ol>
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
</ol>

</body>
</html>

Внутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.

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

Список определений не является списком элементов. Это список терминов и определений терминов.

Список определений начинается с тега <dl>. Каждый термин списка определений начинается с тега <dt>. Каждое определение списка начинается с тега <dd>.

<html>
<body>

<dl>
<dt>элемент 1</dt>
<dd>описание элемента 1</dd>
<dt>элемент 2</dt>
<dd>описание элемента 2</dd>
</dl>

</body>
</html>

Внутри определения списка определений (тег <dd>) можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.

Дополнительные примеры

Различные типы упорядоченных списков

<html>
<body>

<h4>Список проектов с цифрами:</h4>
<ol>
<li>intuit.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ol>

<h4>Список с буквами:</h4>
<ol type="A">
<li>intuit.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ol>

<h4>Список с буквами нижнего регистра:</h4>
<ol type="a">
<li>intuit.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ol>

<h4>Список с римскими цифрами:</h4>
<ol type="I">
<li>intuit.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ol>

<h4>Список с римскими цифрами в нижнем регистре:</h4>
<ol type="i">
<li>intuit.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ol>

</body>
</html>

Различные типы неупорядоченных списков

<html>
<body>

<h4>Список со значком кругом:</h4>
<ul type="disc">
<li>intuit.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ul>

<h4>Список со значком окружностью:</h4>
<ul type="circle">
<li>intuit.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ul>

<h4>Список со значком квадратом:</h4>
<ul type="square">
<li>intuit.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ul>

</body>
</html>

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

<html>
<body>

<h4>Вложенный список:</h4>
<ul>
<li>элемент 1</li>
<li>элемент 2
    <ul>
    <li>элемент 2.1</li>
    <li>элемент 2.2</li>
    </ul>
</li>
<li>элемент 3</li>
</ul>

</body>
</html>

<html>
<body>

<h4>Вложенный список:</h4>
<ul>
<li>элемент 1</li>
<li>элемент 2</li>
    <ul>
    <li>элемент 2.1</li>
    <li> элемент 2.2</li>
      <ul>
      <li>элемент 2.2.1</li>
      <li>элемент 2.2.2</li>
      </ul>
    </li>
    </ul>
</li>
<li>элемент 3</li>
</ul>

</body>
</html>

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

<html>
<body>

<h4>Список определений:</h4>
<dl>
<dt>элемент 1</dt>
<dd>описание элемента 1</dd>
<dt>элемент 2</dt>
<dd>описание элемента 2</dd>
</dl>

</body>
</html>

Теги списков

Тег	Описание
<ol>	Определяет упорядоченный список
<ul>	Определяет неупорядоченный список
<li>	Определяет элемент списка
<dl>	Определяет список определений
<dt>	Определяет термин определения
<dd>	Определяет описание определения
<dir>	Не рекомендуется. Используйте вместо этого <ul>
<menu>	Не рекомендуется. Используйте вместо этого <ul>

источник: http://www.INTUIT.ru