HTML - Ordered Lists: A Beginner's Guide

Здравствуйте, будущие веб-разработчики! Сегодня мы окунёмся в захватывающий мирordered списков HTML. Не волнуйтесь, если вы ещё ни разу не писали строчку кода — я буду вашим доброжелательным проводником в этом путешествии. К концу этого учебника вы будете создаватьordered списки как профессионал!

HTML - Ordered Lists

Что такое Ordered Lists?

Before мы перейдём к коду, давайте поймём, что такоеordered списки. Представьте, что вы записываете шаги для приготовления сэндвича. Вы не хотите перепутать порядок, правда? Вот гдеordered списки могут помочь. Они идеально подходят для любого контента, который требует определённого порядка.

Синтаксис: Основы Ordered Lists

Теперь давайте脏 руки с кодом. Вот базовый синтаксис для созданияordered списка в HTML:

<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>

Давайте разберём это:

<ol> означает "ordered list". Это как контейнер для всех ваших элементов списка.
<li> означает "list item". Каждый тег <li> представляет один элемент вашего списка.

Когда вы запустите этот код, он будет выглядеть что-то вроде этого:

Первый элемент
Второй элемент
Третий элемент

Круто, правда? Браузер автоматически пронумерует ваши элементы за вас!

Определение Ordered Lists: Творчество

Теперь, когда у нас есть базовые знания, давайте добавим немного перца. HTML предлагает некоторые полезные атрибуты для настройки вашихordered списков.

Атрибут 'start'

Что, если вы хотите, чтобы ваш список начинался с числа, отличного от 1? Вот где comes в handy атрибут 'start':

<ol start="5">
<li>Этот будет номер 5</li>
<li>Этот будет номер 6</li>
<li>Этот будет номер 7</li>
</ol>

Это будет отображаться как:

Этот будет номер 5
Этот будет номер 6
Этот будет номер 7

Атрибут 'reversed'

Хотите считать наоборот? Попробуйте атрибут 'reversed':

<ol start="5" reversed>
<li>Этот будет номер 5</li>
<li>Этот будет номер 4</li>
<li>Этот будет номер 3</li>
</ol>

Это будет отображаться как:

Этот будет номер 5
Этот будет номер 4
Этот будет номер 3

Примеры HTML Ordered List: Всё вместе

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

<h2>Как сделать сэндвич PB&J</h2>
<ol>
<li>Соберите свои ингредиенты:
<ul>
<li>2 ломтика хлеба</li>
<li>П Peanut butter</li>
<li>Джем</li>
</ul>
</li>
<li>Равномерно нанесите Peanut butter на один ломтик хлеба</li>
<li>Равномерно нанесите джем на другой ломтик хлеба</li>
<li>Сложите два ломтика вместе</li>
<li>Наслаждайтесь своим сэндвичем!</li>
</ol>

Это будет отрендерено как:

Как сделать сэндвич PB&J

Соберите свои ингредиенты:

2 ломтика хлеба
Peanut butter
Джем

Равномерно нанесите Peanut butter на один ломтик хлеба
Равномерно нанесите джем на другой ломтик хлеба
Сложите два ломтика вместе
Наслаждайтесь своим сэндвичем!

Обратите внимание, как мы вложили unordered список (<ul>) в нашordered список? Вот красота HTML — вы можете комбинировать и создавать сложные структуры!

Атрибут 'type' Ordered List: Изменение стиля нумерации

Теперь давайте поговорим о атрибуте 'type'. Эта маленькая珍珠 позволяет вам изменить стиль нумерации вашего списка. Вот варианты:

Значение Type	Описание
1	По умолчанию. Десятичные числа (1, 2, 3, 4)
A	Заглавные буквы (A, B, C, D)
a	Маленькие буквы (a, b, c, d)
I	Заглавные римские цифры (I, II, III, IV)
i	Маленькие римские цифры (i, ii, iii, iv)

Давайте посмотрим, как они работают:

<ol type="A">
<li>Этот будет A</li>
<li>Этот будет B</li>
<li>Этот будет C</li>
</ol>

<ol type="i">
<li>Этот будет i</li>
<li>Этот будет ii</li>
<li>Этот будет iii</li>
</ol>

Это будет отображаться как:

A. Этот будет A B. Этот будет B C. Этот будет C

i. Этот будет i ii. Этот будет ii iii. Этот будет iii

Не правда ли, здорово? Вы можете использовать эти разные стили, чтобы соответствовать тону и цели вашего контента.

Заключение

И вот вы это сделали, ребята! Вы только что сделали свои первые шаги в мирordered списков HTML. Помните, ключ к maîtriser это (или любую концепцию кодирования) — это практика. Попробуйте создать разные типы списков, вложите их друг в друга, поиграйте с атрибутами. Чем больше вы экспериментируете, тем комфортнее вы будете себя чувствовать.

За годы преподавания я обнаружил, что студенты, которые подходят к кодированию с любопытством и готовностью ошибаться, учатся быстрее всего. Так что не бойтесь ломать вещи — это часто то, как мы учимся больше всего!

Продолжайте кодировать, продолжайте учиться, и вы не заметите, как начнёте создавать красивые, хорошо структурированные веб-страницы. До下一次 встречи,快乐列表!

Credits: Image by storyset

Предыдущий учебник:

HTML - Неупорядоченные списки

Следующий учебник:

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