16.07.2026

25

Как сделать список в html

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

Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальный тренажёр.

Создать многоуровневый список достаточно просто.

Пример правильного кода:
Пример кода с ошибкой:

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

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

В этом задании мы потренируемся работать с многоуровневыми списками.

Перейти к заданию

  • index.html Сплит-режим

HTML: Списки

Списки — один из способов представления контента на странице. С их помощью легко группировать небольшие связанные фрагменты, например список покупок:

— Молоко — Хлеб — Вода

Можно сделать такой список с помощью трёх параграфов, но тогда, с первого взгляда, будет казаться, что это три разные фразы не объединённые общим смыслом.

Чтобы правильно связать эту информацию используются списки. Для их создания в HTML используется несколько тегов, вложенных друг в друга:

    • или
      для определения типа списка
    • для создания пункта списка

    Общая схема разметки выглядит следующим образом:

     <тип_списка><пункт_списка>Текст

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

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

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

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

      , внутри которого также лежат элементы в тегах
      .

    Список дел на день

    1. Купить корм
    2. Сходить к Алексею
    3. Приготовить ужин

    в разметке HTML выглядит следующим образом:

    Задание

    Создайте нумерованный список из 5 элементов

    Упражнение не проходит проверку — что делать? ��

    Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

    В моей среде код работает, а здесь нет ��

    Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

    Мой код отличается от решения учителя ��

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

    В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

    Прочитал урок — ничего не понятно ��

    Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

    Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

    Списки в HTML. Все о HTML списках

    В HTML для создания списков используются теги группы lists. К ним относятся:

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

    Далее будет показана практика создания HTML списков с примером исходного кода и описанием на русском языке.

    В HTML есть три типа списков: маркированный, нумерованный и список определений (терминов).

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

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

    • Яблоки
    • Абрикосы
    • Бананы
    • Сливы
    Исходный код простого маркированного списка:

    Типы маркеров

    Для маркированного списка доступны 3 типа маркеров по умолчанию: disc, square и circle. Задать тип маркера можно при помощи CSS свойства list-style-type . Тип маркера может быть задан, как для списка в целом (свойство применяется к ), так и для конкретного элемента (свойство применяется к ).

    Список с разными типами маркеров:

    • Disc — закрашенный круг, точка.
    • Circle — окружность, пустая внутри.
    • Square — квадрат.

    Исходный код списка с разными типами маркеров:

    Положение маркера в списке

    HTML поддерживает 2 типа положений маркеров списка: внутри или снаружи. Положение маркера регулируется CSS свойством list-style-position . Положение может быть задано, как для списка в целом, так и для отдельного элемента.

    Пример списка с разным положением маркеров:

    • Маркер внутри (inside)
    • Маркер снаружи (outside)

    Исходный код списка с разным положением маркеров:

    Свой маркер в HTML списке

    Использовать в качестве маркера HTML списка можно и свою картинку. Для этого используйте CSS свойство list-style-image .

    Пример списка со своей картинкой в роли маркера:

    1. Дизайн
    2. Верстка
    3. Интеграция

    Исходный код списка со своим маркером — картинкой:

    1.8. HTML-списки

    HTML-списки используются для группировки связанных между собой фрагментов информации. Существует три вида списков:

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

      Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение.

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

      Создание HTML-списков

      • Содержание:
      • 1. Маркированный список
      • 2. Нумерованный список
      • 3. Список определений
      • 4. Вложенный список
      • 5. Многоуровневый нумерованный список

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

        . В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

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

      • Microsoft
      • Google
      • Apple
      • IBM

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

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

      Блок списка также имеет стили браузера по умолчанию:

        доступны следующие атрибуты:

      1. Microsoft
      2. Google
      3. Apple
      4. IBM

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

      Списки определений создаются с помощью элемента . Для добавления термина применяется элемент , а для вставки определения — элемент .

      Блок списка определений имеет следующие стили браузера по умолчанию:

       
      Режиссер:
       
      Петр Точилин
       
      В ролях:
       
      Андрей Гайдулян
       
      Алексей Гаврилов
       
      Виталий Гогунский
       
      Мария Кожевникова

      Режиссер: Петр Точилин В ролях: Андрей Гайдулян Алексей Гаврилов Виталий Гогунский Мария Кожевникова Фигура. 3. Список определений

      4. Как создать вложенный список

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

Похожие записи

Как включить моноблок benq

admin

Как выключить фоновые звуки на айфоне

admin

Как найти письмо по теме

admin