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

Списки в HTML позволяют упорядочивать и перечислять информацию, так же используются для создания меню и разделения текста.

В HTML есть два вида списков:

Нумерованный.
Маркированный.
Список определений.

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

Создается с помощью тега <OL></OL>. Каждый элемент списка создается с помощью тега <LI></LI>. Браузер начинает нумерацию в списке по порядку автоматически и если удалить один или несколько элементов из списка, то нумерация будет автоматически обновлена. Для тега <LI> существует атрибут VALUE, который позволяет задать номер для первого элемента, например если задать атрибуту значение равное 10, то нумерация списка продолжится относительно первого элемента.

Атрибуты тега <OL></OL>

REVERSED — Позволяет задать отображение списка в обратном порядке (по убыванию значений)

START — Позволяет задать начальное значение, от которого пойдет отсчет нумерации.

TYPE — Позволяет задать тип маркера (номера) элементов. Может принимать значения: «1» — значения по умолчанию (десятичная нумерация); «А» — нумерация списка в алфавитном порядке заглавными буквами английского алфавита; «а» — нумерация списка в алфавитном порядке строчными буквами английского алфавита; «I» — нумерация римскими заглавными цифрами ; «i» — нумерация римскими строчными цифрами.

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Мой список</title>
  </head>
  <body>
Список литературы
   <OL>
     <li>Andy, Harris HTML, XHTML and CSS All–In–One For Dummies® / Andy Harris. - Москва: Наука, 2014. - 173 c.</li>
     <li>Ben, Henick HTML & CSS – The Good Parts / Ben Henick. - Москва: СИНТЕГ, 2013. - 350 c.</li>
     <li>Гаевский, А.Ю. 100% самоучитель. Создание Web-страниц и Web-сайтов. HTML и JavaScript / А.Ю. Гаевский, В.А. Романовский. - М.: Триумф, 2014. - 464 c.</li>
   </OL>
  </body>
</html>

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

Данный вид списка представляет собой неупорядоченный список, создается с помощью тега <UL></UL>. В качестве маркера элемента выступает метка (тире, закрашенный кружок и тп.). Каждый элемент списка создается с помощью тега <LI></LI>.

Маркеры данного списка могут принимать один из трех видов, задается маркер с помощью атрибута TYPE:

type= «disc» — список с маркером в виде круга (закрашенный круг);
type= «circle» — список с маркером в виде окружности (пустой круг);
type= «square» — список с маркером в виде квадрата.

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Мой список</title>
  </head>
  <body>
Глобальные атрибуты тегов
   <ul>
     <li>Class</li>
     <li>Id</li>
     <li>Style</li>
   </ul>
  </body>
</html>

Список определений в html

Данный тип списка состоит из двух элементов: термина и его определения. Список задается с помощью тега <DL></DL., термин задается с помощью тега <DT></DT>, а его определение с помощью тега <DD></DD>.

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Мой список</title>
  </head>
  <body>
   <dl>
     <dt>ТЕГ</dt>
     <dd> Это специальный символ разметки в языке HTML.</dd>
     <dt>Сайт</dt>
     <dd>Это набор отдельный веб страниц, связанные между собой общей тематикой, темой и гиперссылками</dd>
   </dl>
  </body>
</html>

Списки в HTML

Лабораторная работа 7. Списки в HTML (pdf)