Подготовительный курс HTML и CSS: Списки

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

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

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

Молоко

Хлеб

Вода

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

<ul> или <ol> для определения типа списка
<li> для создания пункта списка

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

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

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

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

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

<ul>
  <li>Молоко</li>
  <li>Хлеб</li>
  <li>Вода</li>
</ul>

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

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

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

Такие списки удобны, если обозначается последовательность действий, которые нужно совершить. Нумерованный список создаётся с помощью тега <ol>, внутри которого также лежат элементы в тегах <li>.

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

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

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

<ol>
  <li>Купить корм</li>
  <li>Сходить к Алексею</li>
  <li>Приготовить ужин</li>
</ol>

Задание

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

Как с вами связаться? 🙃

Команда проекта находится в телеграм-сообществе по ссылке https://ttttt.me/HexletLearningBot. Там можно задать любой вопрос и повлиять на проект

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

Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "ИИ-помощник". Как правильно задать вопрос:

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

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

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

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

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

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

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются

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

Привет! Я Тота и моя задача помочь в обучении. Чтобы активировать меня, нужно зарегистрироваться или залогиниться, если у вас уже есть аккаунт

Ваше упражнение проверяется по этим тестам

1const { test } = require('tests');
2
3test(({ query, querySelectorAll, expect }) => {
4  query(document, 'ol', HTMLOListElement);
5  const elements = querySelectorAll(document, 'ol > li', HTMLLIElement);
6  expect(elements).to.have.length(5);
7});
8

Решение учителя откроется через:

20:00

← ПредыдущийСледующий →