Войти
s-lub » Учебники » HTML » Создание списков в HTML

Создание списков в HTML

Создание списков в HTML

В этой статье мы рассмотрим, как правильно создавать упорядоченные и неупорядоченные списки с помощью HTML и как с ними работать.

Элементы списков:
- UL – неупорядоченный список.
- OL – упорядоченный список
- LI – создаёт пункты внутри внутри вышеупомянутых элементов OL и UL.

UL

UL (Unsorted List) – образует неупорядоченный список, обязательно должен идти закрывающий тег. Внутри должен содержать пункты списка выделенные элементом LI.

Пример:

<ul>
<li> Первый пункт </li>
<li> Второй пункт </li>
<li> Третий пункт </li>
</ul>

OL

OL (Ordered List) – создаёт упорядоченный или пронумерованный список. Так же должен закрываться и иметь внтри пункты LI. Может иметь атрибуты:

START – обозначает с какого значения нужно начинать отсчёт пунктов (можно использовать только целые числа), если не применять, то отсчёт начнётся сначала.

TYPE – определяет стиль нумерации пунктов списка.

Возможные значения:
"A" – заглавные буквы A, B, C ...
"a" – строчные буквы a, b, c ...
"I" – большие римские числа I, II, III ...
"i" – маленькие римские числа i, ii, iii ...
"1" – арабские числа 1, 2, 3 ...
Значение по умолчанию <OL TYPE="1">.

Пример:

Использование арабских чисел:
<ol type="1" >
<li> Начало </li>
<li> Середина </li>
<li> Заключение </li>
</ol>
Использование римских чисел:
<ol type="I" >
<li> Начало </li>
<li> Середина </li>
<li> Заключение </li>
</ol>
Использование букв:
<ol type="a" >
<li> Начало </li>
<li> Середина </li>
<li> Заключение </li>
</ol>
Пример списка начинающего не сначала:
<ol type ="1" start="2" >
<li> Начало </li>
<li> Середина </li>
<li> Заключение </li>
</ol>

LI

LI (List Item) - Создает пункт в списке. Располагается внутри элементов OL или UL. Закрывающий тег необязателен, но желателен, лично я всегда использую. Можно использовать с атрибутом:

VALUE – изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.

Пример:

На этом примере простой упорядоченный список, в котором мы пропустим третий пункт:

<ol >
<li> Первый пункт </li>
<li> Второй пункт </li>
<li value="4"> Должен быть третий, но в помощью атрибута мы его сделали четвёртым </li>
<li> Следующий пункт </li>
</ol>

Вроде всё что касается списков мы рассказали и нам остаётся совсем не много что бы закончить теории HTML.


Все статьи по теме HTML:

- Введение и основы HTML
- Структура WEB документа
- Синтаксис в HTML
- Пробуем создать первую страничку
- Оформление текста в HTML (часть 1)
- Оформление текста в HTML (часть 2)
- Создание списков в HTML
- Ссылки в HTML
- Вставляем изображения в HTML документ
- Цвет теста и фона в HTML
- Создаём таблицы в HTML
- Что и для чего прописывать в HEAD
- Заключение и подведение итогов по всем пройденным элементам и атрибутам