Содержание страницы:
Нумерованный список HTML. Списки часто используются на веб-страницах, поэтому данный вопрос весьма актуален. В HTML предусмотрено два типа списков: нумерованный и ненумерованный (маркированный). Для построения списков используются специальные теги. С основными тегами мы познакомимся в данном уроке.
Давайте рассмотрим типы списков в HTML по порядку и на реальных примерах разберемся чем они отличаются, и как выводятся. Читайте еще: Как написать научную статью.
Нумерованные списки в HTML
Нумерованные списки в HTML — упорядоченная последовательность элементов. В нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Нумерованный список имеет следующий вид:
<ol> <li>Первый элемент списка</li> <li>Второй элемент списка</li> <li>Третий элемент списка</li> <li>Четвертый элемент списка</li> <li>Пятый элемент списка</li> </ol>
В данном примере список будет выводиться арабскими цифрами. У нумерованных списков существуют атрибуты, с помощью которых можно задать формат отображения нумерации списка:
- Атрибуты «I» или «i» — список нумеруется римскими буквами (заглавными или прописными);
- Атрибуты «A» или «a» — нумерация латинскими буквами (заглавными или прописными);
- Атрибут «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>
В данном случае список будет формироваться из маркеров в виде жирной точки. Атрибутами ненумерованного списка являются:
- «disc» — маркеры в виде закрашенного кружка
- «circle» — маркеры в виде пустого кружка
- «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. Списки очень часто встречаются на веб-страницах. Для их формирования нужно знать определенные правила вывода.
Что такое списки в HTML, какие они бывают
Список (HTML) — текстовое перечисление однородных членов предложения, оформленное в виде списка.
Какие бывают списки?
- Нумерованный список;
- Маркированный список (не нумерованный);
- Многоуровневый список;
- Список определений;
- Выпадающий список.
Нумерация помогает в тех случаях, когда нужно расположить однородные элементы списка в определенном порядке или упростить работу, добавив возможность дать ссылку на определенный пункт списка.
Обратите внимание, список это не несогласованный набор словосочетаний-огрызков, отвечающих на разные вопросы обобщающего текста (которого как раз и нет в данном случае).
Как сделать упорядоченный нумерованный список
Нумерованные списки создаются при помощи тегов <ol></ol> и <li></li>, причем последний является тегом для перечисления однородных членов и помещается внутри тега <ol></ol> (ol — ordered list).
Соответственно, <li></li> — начало и конец элемента списка, а <ol></ol> — начало и конец самого нумерованного списка.
TYPE может принимать значения:
- «A» — для нумерации A, B..
- «a» — для нумерации a, b..
- «I» — для нумерации I, II..
- «i» — для нумерации i, ii..
- «1» — для нумерации 1. 2. и далее по порядку.
Есть дополнительные атрибуты «start» и «value». Start — для задания номера первого элемента списка (все последующие считаются относительно него), value — для присвоение определенного номера любому из элементов списка.
Внимание! Использование атрибута value сбивает нумерацию и, если нужно, его приходится использовать дважды.
Маркированный список
Маркированные списки создаются при помощи тегов <ul></ul> и <li></li>, последний как вы знаете является тегом для перечисления однородных членов и помещается внутри тега <ul></ul> (ul — unordered list).
Соответственно, <li></li> — начало и конец каждого из элементов списка, а <ul></ul> — начало и конец самого маркированного списка.
По умолчанию маркированные элементы списка отображаются в виде черных кружочков.
Как сделать неупорядоченный ненумерованный список без маркеров
Это очень просто. Неупорядоченные списки также создаются при помощи тегов <ul></ul> и <li></li>, — как вы уже знаете в этом случае нумерации не будет. Но будут маркеры, то есть список будет маркированным. Но и маркеры несложно убрать, это делается при помощи стиля в CSS: «list-style-type: none;».
Вложенный многоуровневый древовидный список
Особенность создания многоуровнего списка с вложенными списками заключается не только в его древовидности, но и в том, что ваш список может быть комплексным. То есть сочетать в себе, как маркированные, так и нумерованные элементы вместе. Древовидные вложенные списки часто можно встретить на Википедии, в разделе где показывается содержание страницы
Многоуровневый список получается в результате того, что мы как бы вкладываем один список в тело другого. Далее я покажу вам как это делается на примере готового HTML кода.
Проблема только одна — не запутаться в коде. Решается она либо внимательностью, либо созданием отступов для себя: чтобы в HTML было твердо и четко все разложено по полочкам — где что находится.
Как сделать список определений
Списки определений создаются при помощи тегов <dl></dl>, <dt></dt> и <dd></dd>.
- <dl></dl> (dl — description list) — обозначает начало и конец списка определений;
- <dt></dt> (dl — description term) — обозначает начало и конец одного термина;
- <dd></dd> (dd — definition description) — обозначает начало и конец одного определения/пояснения для одного термина.
Такой список по умолчанию получается многоуровневым и древовидным.
Заключение
Итак, в данной статье вы узнали, что списком можно назвать взаимосвязанные однородные контейнеры (состоящие из предложений или отдельных фраз), располагающиеся друг за другом и начинающиеся с цифр, маркеров или не имеющие обозначений.
Также вы узнали, что есть список определений, для представления в удобном виде пар типа «термин-определение» или «термин-перевод».
В этой статье я привел достаточное количество примеров кода, а также скриншотов, чтобы вы доскональном могли ориентироваться в теме создания различных списков: нумерованных и ненумерованных, упорядоченных и неупорядоченных, маркированных и немаркированных (без маркеров), одно- и многоуровневых (вложенных и древовидных), а также списков определений. Читайте еще: Что такое контент на Теле2.
Такие списки, при правильном их использовании, позволят систематизировать и разместить информацию на странице удобным для пользователя образом. В конце концов, списки появились еще тогда, когда интернета в помине не было.
Поэтому не пренебрегайте HTML-списками, учитесь их использовать правильно и умело размещайте на страницах ваших сайтов.