Списки HTML

Списки HTML

Списки HTML — это набор взаимосвязанных элементов, которые начинаются с маркера. В этой статье я расскажу о HTML-списках. Статья рассчитана на новичков (школьников и студентов) но может быть полезна всем кто изучает HTML.

Виды HTML-списков

Списки бывают следующих видов:

Так же в этом материале я расскажу, как сделать выпадающий список.

Рассмотрим каждый вид подробнее.

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

Маркированный список создается с помощью тега <ul> — unordered list (неупорядоченный список). Стандартный маркер — точка.

Стиль по умолчанию:

display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

Элемент любого списка создает тег <li> — list item (элемент списка).

Пример.

<ul>
    <li> Лев </li>
    <li> Тигр </li>
    <li> Леопард </li>
    <li> Снежный барс </li>
</ul>

Результат.

  • Лев
  • Тигр
  • Леопард
  • Снежный барс

Маркер задается с помощью свойства list-style-type, для маркированного списка это свойство может иметь следующие значения:

  • Disc — точка.
  • Crcle — круг.
  • Square — квадрат.
  • None — убирает маркер.

В статье основы HTML я рассказывал о теге <style>. Давайте с его помощью изменим маркер в примере на квадрат.

<style>
ul {list-style-type: square;}
</style>
<ul>
    <li> Лев </li>
    <li> Тигр </li>
    <li> Леопард </li>
    <li> Снежный барс </li>
</ul>

Получим следующий результат:

Маркер списка - квадрат

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

Нумерованный список создается при помощи тега <ol> — order list (упорядоченный список). Стандартно список нумеруется арабскими (традиционными) числами.

Стиль по умолчанию:

display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

Пример.

<ol>
    <li> Лев </li>
    <li> Тигр </li>
    <li> Леопард </li>
    <li> Снежный барс </li>
</ol>

Результат.

  1. Лев
  2. Тигр
  3. Леопард
  4. Снежный барс

Тип номера так же, как и в маркированном списке, задается с помощью свойства list-style-type. Возможные значения:

  • Armenian — армянская нумерация.
  • Decimal — арабская нумерация.
  • Decimal-leading-zero — арабская нумерация с нулем впереди чисел меньше десяти, то есть 01, 02, 03 и так далее.
  • Georgian — грузинская нумерация.
  • Lower-alpha (lower-latin) — строчные латинские буквы.
  • Lower-greek — строчные греческие буквы.
  • Lower-roman — римские числа в нижнем регистре, например i, ii.
  • Upper-alpha (upper-latin) — заглавные латинские буквы.
  • Upper-roman — римские числа в верхнем регистре, например I, II.
  • None — без нумерации.

Тег <ol> в отличии элемента <ul> имеет атрибуты.

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

Атрибут Описание Возможные значения
reversed Указывает, что элементы списка расположены в обратном порядке. Нет.
start Задает первый порядковый номер списка. Число.
type Задает тип номера для использования в списке. 1: Десятичный: 1, 2, 3 и так далее. (По умолчанию)
a: строчные буквы латинского алфавита: a, b, c и так далее.
A: прописные буквы латинского алфавита: A, B, C и так далее.
i: римские цифры в нижнем регистре: i, ii, iii и так далее.
I: римские цифры в верхнем регистре: I, II, III и так далее.

Примеры.

<p>Пример 1</p>
<ol>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ol>
<p>Пример 2</p>
<ol reversed>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ol>
<p>Пример 3</p>
<ol start="2">
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ol>
<p>Пример 4</p>
<ol type="a">
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ol>

Результаты.

Пример 1

  1. Первый элемент
  2. Второй элемент
  3. Третий элемент

Пример 2

  1. Первый элемент
  2. Второй элемент
  3. Третий элемент

Пример 3

  1. Первый элемент
  2. Второй элемент
  3. Третий элемент

Пример 4

  1. Первый элемент
  2. Второй элемент
  3. Третий элемент

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

Список определений создается с помощью тега <dl> — description list (список определений). Список определений состоит из пары термин — определение. Термин создается с помощью тега <dt>, а описание с помощью тега <dd>.

Стиль по умолчанию (тега <dl>):

display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;

Пример.

<dl>
    <dt>Собака</dt>
    <dd>Домашнее животное, одно из наиболее популярных (наряду с кошкой) животных-компаньонов.</dd>

    <dt>HTML</dt>
    <dd>Язык гипертекстовой разметки.</dd>
    <dd>Язык, используемый для форматирования веб-документов.</dd>
</dl>

Результат.

Собака
Домашнее животное, одно из наиболее популярных (наряду с кошкой) животных-компаньонов.
HTML
Язык гипертекстовой разметки.
Язык, используемый для форматирования веб-документов.

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

Чтобы создать вложенный список в HTML нужно использовать все те же элементы. Суть проста, в элемент <li> ... </li> вкладывается новый маркированный или нумерованный список, начиная с элемента <ul> или <ol>.

Пример.

<ol>
    <li>Языки веб-программирования
    <ul>
    <li>HTML</li>
    <li>PHP</li>
    <li>JavaScript</li>
    </ul>
    </li>
    <li>Языки программирования .NET
    <ul>
    <li>С++</li>
    <li>С#</li>
    </ul>
    </li>
    <li>Остальные языки программирования</li>
</ol>

Результат.

  1. Языки веб-программирования
    • HTML
    • PHP
    • JavaScript
  2. Языки программирования .NET
    • С++
    • С#
  3. Остальные языки программирования

Аналогично можно вкладывать списки уже во вложенные элементы.

Многоуровневый список

Многоуровневым считают нумерованный список. Его отличие от вложенного списка в том, что бы нумерация шла по порядку.

Для этого придется использовать элемент <style>.

Пример.

<style>
ol {counter-reset: li; list-style: none;}
li::before { counter-increment:li; content: counters(li,".") " ";}

</style>
<ol>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка
    <ol>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
    </ol>
  </li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
</ol>

Результат.
Многоуровневый список HTML

Выпадающий список

Как сделать выпадающий список в HTML? Довольно просто, с помощью тега <select>, который позволяет оформить элементы в виде выпадающего списка. Элементы выпадающего списка берутся в тег <option>.

Пример.

<select>
<option selected>Выбрать породу</option>
<option>Лабрадор-ретривер</option>
<option>Золотистый ретривер</option>
<option>Померанский шпиц</option>
<option>Бигль</option>
<option>Боксер</option>
</select>

Результат.

Элемент с атрибутом selected будет выбранным, то есть стоять в начале выпадающего списка. Его можно оставить пустым.

Расшифровка и перевод используемых тегов

Перевод и расшифровку большей части элементов я уже приводил, собираю все в одну таблицу и добавлю недостающее элементы.

Тег Значение Перевод
<ul> Unordered list Неупорядоченный список
<li> List item Элемент списка
<ol> Order list Упорядоченный список
<dl> Description list Список описаний (определений)
<dt> Description list term Термин (списка описаний)
<dd> Description list description Описание термина (списка описаний)
<select> Select Выбор
<option> Option Вариант.

На этом изучение списков HTML заканчивается.


Анатолий Бузов
Анатолий Бузов / об авторе

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.


Добавить комментарий

Ваш адрес email не будет опубликован.