HTML Списки

HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи:

  • <ol> – нумерованный (с помощью цифр или букв) список, каждый элемент которого имеет порядковый номер (букву);
  • <ul> – маркированный (не нумерованный) список, рядом с каждым элементом которого помещается маркер (а не цифровые или буквенные символы, обозначающие порядковый номер);
  • <dl> – список определений состоит из пар «имя/значение», в том числе терминов и определений.

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

В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны.
Нумерованные списки создаются с помощью блочного элемента <ol> (от англ. Ordered List – нумерованный список). Далее в контейнер <ol> для каждого пункта списка помещается элемент <li> (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами.
Тег <ol> имеет следующий синтаксис:

<ol>
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
</ol>

Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере:

Пример: Нумерованный список

Пошаговая инструкция

  1. Достать ключ
  2. Вставить ключ в замок
  3. Повернуть ключ на два оборота
  4. Достать ключ из замка
  5. Открыть дверь

Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type в элементе <ol>, который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис:

<ol type="A|a|I|i|1">

Здесь: type – символы списка:

  • A — прописные латинские буквы (A, B, C . . .);
  • a — строчные латинские буквы (a, b, c . . .);
  • I — большие римские цифры (I, II, III . . .);
  • i — маленькие римские цифры (i, ii, iii . . .);
  • 1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию).

Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега <ol>.
В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX:

Пример: Применение атрибутов type и start.

Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу <li> следующим образом:

<li value="7">

В этом случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с семи.

Пример использования атрибута value тега <li>, который позволяет изменить номер данного элемента списка:

Пример: Применение атрибута value

  1. Первый пункт списка
  2. Второй пункт списка
  3. Третий пункт списка

В этом примере "Первый пункт списка" будет иметь номер 1, "Второй пункт списка" – номер 7, а "Третий пункт списка" – номер 8.

Форматирование нумерованных списков с помощью CSS

Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS:

<ol style="list-style-type:lower-roman">
Стили оформления нумерованных списков
ПримерЗначениеОписание
а, Ь, сlower-alphaСтрочные буквы
А, В, Сupper-alphaПрописные буквы
i, ii, iiilower-romanРимские цифры, набранные строчными буквами
I, II, IIIupper-romanРимские цифры, набранные прописными буквами

На примере представленном далее НТМL-кода показано, как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами, набранными буквами нижнеrо реrистра:

Пример: Применение свойства CSS list-style-type

  1. первый пункт списка
  2. второй пункт списка
  3. третий пункт списка

Маркированные списки

Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов. Маркированные списки создаются с помощью блочного элемента <ul> (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега <li>. Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры.
Тег <ul> имеет следующий синтаксис:

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

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

Пример: Маркированный список

Внутри тега <li> не обязательно размещать только текст, допустимо поместить любой элемент потокового контента (ссылки, абзацы, изображения и др.)

Вложенные списки

Любой список может быть вложен в другой. Внутри элемента <li> допустимо создание вложенного списка, или списка второго уровня. Для вложения списка опишите новый список внутри элемента <li> уже имеющегося списка. При вложении одного маркированного списка в другой браузер автоматически меняет стиль маркера для списка второго уровня. Любой список может быть вложен в другой. Следующий пример демонстрирует структуру маркированного списка, вложенного во второй пункт нумерованного.

Пример: Вложенные списки

  • Понедельник
    1. Отправить почту
    2. Визит к редактору
      • Выбор темы
      • Дкаративное оформление
      • Заключительный отчет
    3. Вечерний просмотр сообщений
  • Вторник
    1. Пересмотреть график
    2. Отправить изображения
  • Среда ...
При вложении одного маркированного списка в другой браузер автоматически меняет стиль маркера для списка второго уровня. При этом, при вложении нумерованных списков стиль нумерации не меняется по умолчанию.

Форматирование маркированных списков

Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS:

<ul style="list-style-type:square">
Стили оформления маркированного списка
ЗначениеОписание
discмаркер в форме кружков с заливкой
circleмаркер в форме кружков без заливки
squareмаркер в форме квадрата с заливкой
noneпункты списка без маркера

В следующем примере рассмотрены различные стили оформления маркированных списков:

Пример: Стили оформления маркированных списков

Disc:

  • Coffee
  • Tea
  • Milk

Circle:

  • Coffee
  • Tea
  • Milk

Square:

  • Coffee
  • Tea
  • Milk

None:

  • Coffee
  • Tea
  • Milk

Графические маркеры.

В HTML есть возможность создать список с графическими маркерами. Одно дело, когда маркерами списка являются стандартные кружочки или квадратики, и совсем другое – когда разработчик сам подбирает маркер в соответствии с дизайном страницы. Для того, чтобы сделать элементы списка красивыми, часто используют маленькие картинки.
Чтобы заменить обычный маркер на графический, заменим свойство list-style-type на свойство list-style-image и укажем URL–адрес картинки:

<ul style="list-style-image: url(images/Star.png);">

Пример: Графические маркеры

Знаки зодиака

  • Овен
  • Телец
  • Близнeцы
Обратите внимание на размер картинки — он не должен быть слишком большим, обычно 10-25 пикселей.

Списки определений (описаний)

Списки определений очень удобны для создания, например, вашего личного словаря терминов. У каждого пункта списка определений есть две части: термин и его определение.
Вы помещаете весь список в элемент <dl> (от англ. Definition List – список определений). Он включает в себя теги <dt> (от англ. Definition Term – определяемое слово, термин) и <dd> (от англ. Definition Description – описание определяемого термина).
Списки определений часто используют в научно-технических и учебных изданиях, оформляя с их помощью глоссарии, словари, справочники и т.д.

Общая структура списка описаний имеет следующий вид:

<dl>
  <dt>Первый термин</dt>
  <dd>Описание первого термина</dd>
  <dt>Второй термин</dt>
  <dd>Описание второго термина</dd>
</dl>

В следующем примере показано одно из возможных использований списка определений:

Пример: Список определений

Всемирная паутина
— от англ. World Wide Web (WWW) — распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету.
Интернет
— совокупность сетей, применяющих единый протокол обмена для передачи информации.
Сайт
— набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.

По-умолчанию, текст термина прижимается к левому краю окна браузера, а описание термина располагается ниже и сдвигается вправо.

Элемент <dl> содержит только элементы <dt> и <dd>. Вы не мо жете поместить блочные элементы (например, абзацы) внутрь термина <dt>, но определения <dd> могут содержать любой элемент потокового контента.

Задачи


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

    Добавьте произвольные определения (описания) терминов в приведенном списке определений.

    Задача HTML:

    Реши сам »
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Список определений</title> </head>
      <body>   <dl>   <dt>HTML (HyperText Markup Language)</dt>   <dt>CSS (Cascading Style Sheets)</dt>   <dt>JavaScript</dt>   </dl>   </body>
    </html>
  • Стили маркированного списка

    Используйте свойство CSS, чтобы изменить маркеры в виде закрашенного круга на маркеры в виде квадрата.

    Задача HTML:

    Реши сам »

    • • Венера
    • • Земля
    • • Юпитер
    • • Марс
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Стили маркированного списка</title> </head>
      <body>   <ul>   <li>Венера</li>   <li>Земля</li>   <li>Юпитер</li>   <li>Марс</li>   </ul>   </body>
    </html>
  • Стили нумерованных списков

    Используйте стили CSS для получения списка, пункты которого пронумерованы прописными буквами вместо арабских цифр, установленных по умолчанию.

    Задача HTML:

    Реши сам »

    1. 1.Венера
    2. 2.Земля
    3. 3.Юпитер
    4. 4.Марс
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Стили нумерованных списков</title> </head>
      <body>   <ol>   <li>Венера</li>   <li>Земля</li>   <li>Юпитер</li>   <li>Марс</li>   </ol>   </body>
    </html>
  • Выбор начальноrо значения списка

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

    Задача HTML:

    Реши сам »

    1. 1.Первый
    2. 2.Второй
    3. 7.Седьмой
    4. 8.Восьмой

    Рис.1

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Выбор начальноrо значения</title> </head>
      <body>   <ol>   <li>Первый</li>   <li>Второй</li>   <li>Седьмой</li>   <li>Восьмой</li>   </ol>   </body>
    </html>
  • Графические маркеры

    Замените обычный маркер на графический, используя следующий URL–адрес картинки-маркера: "url(../images/Star.png)".

    Задача HTML:

    Реши сам »

    • • Венера
    • • Земля
    • • Юпитер
    • • Марс
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Стили маркированного списка</title> </head>
      <body>   <ul>   <li>Венера</li>   <li>Земля</li>   <li>Юпитер</li>   <li>Марс</li>   </ul>   </body>
    </html>





Профессия‌ ‌веб-разработчик‌
Веб-разработчик с нуля‌
Старт в программировании‌
Курс HTML/CSS‌
Школа фриланса
Курс Верстальщик 2020 - HTML 5, CSS‌
Профессия‌ тестировщик‌