Типы нумерации (decimal, alpha, roman) [Модуль 5: Списки]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

В этом модуле мы углубимся в работу с нумерованными списками в HTML. По умолчанию такие списки используют арабские цифры (1, 2, 3...), но HTML предоставляет мощные инструменты для изменения этого поведения. Вы узнаете, как с помощью атрибута `type` настраивать нумерацию, используя латинские буквы (a, b, c...) или римские цифры (i, ii, iii...). Эти задания помогут вам на практике освоить различные типы маркеров, научиться начинать список с произвольного номера и даже создавать списки с обратным отсчетом. Тренировка этих навыков позволит вам создавать более структурированные и семантически правильные документы, что является важной частью веб-разработки.

Список тем

Создание простого нумерованного списка

id: 37825_list-type-basic-ol

Для начала создайте базовый нумерованный список. У вас есть три элемента списка, которые нужно обернуть в правильный тег, чтобы они отображались как упорядоченный список с цифрами.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 1rem;
}
ol {
  background-color: #f0f8ff;
  padding: 20px 20px 20px 40px;
  border-radius: 8px;
  border-left: 4px solid #4a90e2;
}

                     <input1>
  <li>Первый шаг</li>
  <li>Второй шаг</li>
  <li>Третий шаг</li>
</input1>

HTML

<input1>
  <li>Первый шаг</li>
  <li>Второй шаг</li>
  <li>Третий шаг</li>
</input1>

Чтобы создать нумерованный (упорядоченный) список, используйте парный тег `<ol>` (Ordered List). Все элементы списка `<li>` должны находиться внутри него.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Нумерация строчными буквами

id: 37825_list-type-lower-alpha

Теперь измените стандартный тип нумерации с цифр на строчные латинские буквы (a, b, c...). Для этого нужно добавить к тегу списка специальный атрибут.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 1rem;
}
ol {
  background-color: #f0f8ff;
  padding: 20px 20px 20px 40px;
  border-radius: 8px;
  border-left: 4px solid #4a90e2;
}

                     <ol type="input1">
  <li>Пункт 'a'</li>
  <li>Пункт 'b'</li>
  <li>Пункт 'c'</li>
</ol>

HTML

<ol type="input1">
  <li>Пункт 'a'</li>
  <li>Пункт 'b'</li>
  <li>Пункт 'c'</li>
</ol>

Используйте атрибут `type` для тега `<ol>`. Чтобы установить нумерацию строчными буквами, присвойте этому атрибуту значение `a`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Нумерация заглавными буквами

id: 37825_list-type-upper-alpha

По аналогии с предыдущим заданием, установите нумерацию списка заглавными латинскими буквами (A, B, C...).

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 1rem;
}
ol {
  background-color: #f0f8ff;
  padding: 20px 20px 20px 40px;
  border-radius: 8px;
  border-left: 4px solid #4a90e2;
}

                     <ol input1="A">
  <li>Раздел A</li>
  <li>Раздел B</li>
  <li>Раздел C</li>
</ol>

HTML

<ol input1="A">
  <li>Раздел A</li>
  <li>Раздел B</li>
  <li>Раздел C</li>
</ol>

Используйте атрибут `type` для тега `<ol>` со значением `A`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Нумерация строчными римскими цифрами

id: 37825_list-type-lower-roman

Измените тип нумерации на строчные римские цифры (i, ii, iii...). Это часто используется для обозначения подпунктов в документах.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 1rem;
}
ol {
  background-color: #fff8e1;
  padding: 20px 20px 20px 40px;
  border-radius: 8px;
  border-left: 4px solid #ffc107;
}

                     <ol type="input1">
  <li>Первый том (i)</li>
  <li>Второй том (ii)</li>
  <li>Третий том (iii)</li>
</ol>

HTML

<ol type="input1">
  <li>Первый том (i)</li>
  <li>Второй том (ii)</li>
  <li>Третий том (iii)</li>
</ol>

Чтобы задать нумерацию строчными римскими цифрами, используйте атрибут `type` со значением `i`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Нумерация заглавными римскими цифрами

id: 37825_list-type-upper-roman

Ваша задача — составить список, который нумеруется заглавными римскими цифрами (I, II, III...).

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 1rem;
}
ol {
  background-color: #fff8e1;
  padding: 20px 20px 20px 40px;
  border-radius: 8px;
  border-left: 4px solid #ffc107;
}

                     <ol type="input1">
  <li>Акт I</li>
  <li>Акт II</li>
  <li>Акт III</li>
</ol>

HTML

<ol type="input1">
  <li>Акт I</li>
  <li>Акт II</li>
  <li>Акт III</li>
</ol>

Для нумерации заглавными римскими цифрами присвойте атрибуту `type` значение `I`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Начало списка с определенного номера

id: 37825_list-type-start-attribute

Иногда нужно, чтобы нумерация списка начиналась не с 1, а с другого числа. Сделайте так, чтобы этот список начинался с цифры 5.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 1rem;
}
ol {
  background-color: #e8f5e9;
  padding: 20px 20px 20px 40px;
  border-radius: 8px;
  border-left: 4px solid #4caf50;
}

                     <ol input1="5">
  <li>Пятый пункт</li>
  <li>Шестой пункт</li>
  <li>Седьмой пункт</li>
</ol>

HTML

<ol input1="5">
  <li>Пятый пункт</li>
  <li>Шестой пункт</li>
  <li>Седьмой пункт</li>
</ol>

Используйте атрибут `start`. Например, `start="5"` заставит список начаться с 5-го элемента.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Комбинация type и start

id: 37825_list-type-type-and-start

Теперь усложним задачу. Создайте список, который нумеруется заглавными латинскими буквами и начинается с третьей буквы, то есть с 'C'.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 1rem;
}
ol {
  background-color: #e8f5e9;
  padding: 20px 20px 20px 40px;
  border-radius: 8px;
  border-left: 4px solid #4caf50;
}

                     <ol type="input1" start="input2">
  <li>План 'C'</li>
  <li>План 'D'</li>
  <li>План 'E'</li>
</ol>

HTML

<ol type="input1" start="input2">
  <li>План 'C'</li>
  <li>План 'D'</li>
  <li>План 'E'</li>
</ol>

Вам нужно использовать два атрибута одновременно: `type` со значением `A` и `start` со значением `3`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

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

id: 37825_list-type-nested

Создайте структуру, где основной список нумеруется цифрами, а один из его пунктов содержит вложенный список с нумерацией строчными буквами.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 1rem;
}
ol {
  background-color: #f3e5f5;
  padding: 15px 15px 15px 40px;
  border-left: 4px solid #9c27b0;
  border-radius: 8px;
}
ol ol {
  background-color: #fff;
  margin-top: 10px;
}

                     <ol>
  <li>Главный пункт 1</li>
  <li>
    Главный пункт 2
    <input1 type="input2">
      <li>Подпункт a</li>
      <li>Подпункт b</li>
    </input1>
  </li>
  <li>Главный пункт 3</li>
</ol>

HTML

<ol>
  <li>Главный пункт 1</li>
  <li>
    Главный пункт 2
    <input1 type="input2">
      <li>Подпункт a</li>
      <li>Подпункт b</li>
    </input1>
  </li>
  <li>Главный пункт 3</li>
</ol>

Чтобы создать вложенный список, поместите новый тег `<ol>` внутрь тега `<li>` основного списка. Не забудьте указать `type="a"` для вложенного списка.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку