✎ Помощь начинающим и профессиональным блоггерам, создание, поддержка сайтов и блогов e-mail siteblogger@inbox.ru icq 353-724-370

Главная ›› Уроки по HTML, HTML5 ›› Списки в HTML — нумерованные и маркированные

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

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

Поделитесь ссылкой! Подпишитесь на обновления, чтобы получать новые публикации!

Оставить комментарий

Siteblogger.ru – проект, охватывающий достаточно широкий круг вопросов: создание сайтов и блогов на WordPress, поисковые системы, поисковая оптимизация и продвижение сайтов, способы заработка в сети, эффективные инструменты работы в Интернете и другое. Кроме того, мы оказываем услуги создания сайтов и блогов на WordPress с последующим их продвижением, а также занимаемся настройкой и ведением контекстной рекламы Яндекс.Директ и Google Adwords. По поводу сотрудничества просьба обращаться через контакты, все заявки и предложения будут обязательно рассмотрены. При использовании материалов данного сайта, пожалуйста, указывайте прямую индексируемую ссылку на Siteblogger.ru.

«Как создать и продвинуть свой сайт»

2011–2016 © Siteblogger.ru
Рейтинг@Mail.ru