Списки в HTML

Списки часто используются на веб-страницах, поэтому данный вопрос весьма актуален. В HTML предусмотрено два типа списков: нумерованный и ненумерованный (маркированный). Для построения списков используются специальные теги. С основными тегами мы познакомимся в данном уроке. Давайте рассмотрим типы списков в HTML по порядку и на реальных примерах разберемся чем они отличаются, и как выводятся.

Списки в HTML - нумерованные и маркированные

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

Нумерованные списки в HTML — упорядоченная последовательность элементов. В нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Нумерованный список имеет следующий вид:

<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
<li>Четвертый элемент списка</li>
<li>Пятый элемент списка</li>
</ol>

В данном примере список будет выводиться арабскими цифрами. У нумерованных списков существуют атрибуты, с помощью которых можно задать формат отображения нумерации списка:

1. Атрибуты «I» или «i» — список нумеруется римскими буквами (заглавными или прописными);
2. Атрибуты «A» или «a» — нумерация латинскими буквами (заглавными или прописными);
3. Атрибут «start» — используется для того, чтобы нумерация начиналась не с первого пункта, в качестве параметра указывается порядковый номер, с которого требуется формировать список.

Пример. Нумерованный список, который формируется из римских букв и начинается со второго элемента:

<ol type="I" start="2">
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
<li>Четвертый элемент списка</li>
<li>Пятый элемент списка</li>
</ol>

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

Ненумерованные списки также называют неупорядоченными или маркированными. Для выделения элементов такого списка используются специальные символы (маркеры). Вид маркеров списка задается в HTML коде с помощью специальных атрибутов. Пример маркированного списка в HTML:

<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
<li>Четвертый элемент списка</li>
<li>Пятый элемент списка</li>
</ul>

В данном случае список будет формироваться из маркеров в виде жирной точки. Атрибутами ненумерованного списка являются:

1. «disc» — маркеры в виде закрашенного кружка
2. «circle» — маркеры в виде пустого кружка
3. «square» — маркеры в виде закрашенного квадрата

Пример задания определенного маркера в списке:

<ul type="square">
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
<li>Четвертый элемент списка</li>
<li>Пятый элемент списка</li>
</ul>

В качестве маркеров списка можно использовать также графические изображения, что позволяет красиво оформить HTML-документ. На практике это очень часто применяется. Для реализации этой задачи необходимо в коде прописать путь до картинки, которая будет служить маркером:

<ul>
<img srs="картинка.jpg">Первый элемент списка<br>
<img srs="картинка.jpg">Второй элемент списка<br>
<img srs="картинка.jpg">Третий элемент списка<br>
<img srs="картинка.jpg">Четвертый элемент списка<br>
<img srs="картинка.jpg">Пятый элемент списка
</ul>

Также списки бывают вложенными, они состоят из нескольких списков:

<ol type="I" start="1">
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<ul type="square">
<li>Первый подпункт списка</li>
<li>Второй подпункт списка</li>
</ul>
<li>Третий элемент списка</li>
<li>Четвертый элемент списка</li>
<li>Пятый элемент списка</li>
</ol>

Вот, пожалуй и все, что хотелось рассказать о списках в HTML. Списки очень часто встречаются на веб-страницах. Для их формирования нужно знать определенные правила вывода.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *