Списки в HTML

by anastasia ноября 24, 2019 0 комментариев Маркированный список Многоуровневый список. Смешанный список Нумерованный список Список определений

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

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

Маркированный список представляет собой неупорядоченный список.

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

Пример маркированного списка:

<strong>Список продуктов</strong>

<ul>

    <li>яблоки — 8 шт.,</li>

    <li>груши — 5 шт.,</li>

    <li>бананы — 2 ветки,</li>

    <li>апельсины — 4 шт.,</li>

    <li>картофель — 2 кг,</li>

    <li>лук — 6 головок.</li>

</ul>

На экране увидим следующее:

Список продуктов

• яблоки — 8 шт.,
• груши — 5 шт.,
• бананы — 2 ветки,
• апельсины — 4 шт.,
• картофель — 2 кг,
• лук — 6 головок.

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

Нумерованный список представляет собой упорядоченный список. Основное, первостепенное должно располагаться в начале, сверху, а малозначимое, второстепенное — в конце, снизу.

В качестве метки используются цифры, причём строго в порядке их следования, и буквы, причём строго в том порядке, в котором они определены в алфавите. Создаётся список с помощью парного тега <ol>...</ol>, элемент создаётся с помощью <li>...</li>.

Рассмотрим пример:

<strong>Распорядок дня</strong>

<ol>

    <li>07:00 — подъём.</li>

    <li>07:00–07:30 — проветривание комнаты, утренний туалет.</li>

    <li>07:30–04:45 — зарядка.</li>

    <li>07:45–08:15 — завтрак.</li>

    <li>08:30–16:15 — уроки по расписанию.</li>

    <li>16:25–17:10 — факультативные занятия.</li>

    <li>17:40–19:40 — выполнение домашнего задания.</li>

    <li>20:00–20:30 — ужин.</li>

    <li>20:30–21:00 — проветривание комнаты, вечерний туалет.</li>

    <li>21:00 — отход ко сну.</li>

</ol>

На экране мы увидим следующее:

Распорядок дня

1. 07:00 — подъём.
2. 07:00–07:30 — проветривание комнаты, утренний туалет.
3. 07:30–04:45 — зарядка.
4. 07:45–08:15 — завтрак.
5. 08:30–16:15 — уроки по расписанию.
6. 16:25–17:10 — факультативные занятия.
7. 17:40–19:40 — выполнение домашнего задания.
8. 20:00–20:30 — ужин.
9. 20:30–21:00 — проветривание комнаты, вечерний туалет.
10. 21:00 — отход ко сну.

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

Списки определений создаются с помощью тега <dl>...</dl>. Для добавления термина применяется тег <dt>...</dt>, а для вставки определения — тег <dd>...</dd>.

Например:

<dl>

    <dt>HTML</dt>

        <dd>Стандартизированный язык разметки документов во Всемирной паутине.</dd>

    <dt>Язык программирования</dt>

        <dd>Компьютер</dd>

</dl>

На экран выведется:

HTML

        Стандартизированный язык разметки документов во Всемирной паутине.

Язык программирования

        Формальный язык, предназначенный для записи компьютерных программ.

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

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

Посмотрим на пример:

<strong>Оглавление</strong>

<ol>

    <li>Введение</li>

    <li>Основные термины

        <ul>

            <li>HTML</li>

            <li>Язык программирования</li>

        </ul>

    </li>

    <li>Заключение</li>

    <li>Список источников</li>

</ol>

Вот какой список получится в итоге:

Оглавление

1. Введение
2. Основные термины
• HTML
• Язык программирования
3. Заключение
4. Список источников