Списки часто используются на веб-страницах, поэтому данный вопрос весьма актуален. В 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. Списки очень часто встречаются на веб-страницах. Для их формирования нужно знать определенные правила вывода.