Списки определений и значений
В предыдущей статье мы разобрали основы HTML: Основы HTML, а сегодня я предлагаю рассмотреть такую тему как списки. Списки играют важную роль в организации информации на веб-страницах, позволяя структурировать и представить данные в виде конкретных элементов различного типа. Они помогают упорядочить информацию и сделать её более доступной для читателей.
В HTML существует несколько типов списков:
- Маркированные списки. Набор пунктов, очередность которых не важна.
- Нумерованные списки. Перечень, в котором последовательность элементов имеет значение.
- Списки определений и значений. Состоит из пар “термин/значение”, в том числе терминов и определений.
По умолчанию элементы списков, списки и тексты располагаются в отдельных блоках, начинаются с новой строки и имеют пустое пространство над и под ними. Однако можно изменить их расположение с помощью стилей CSS, чтобы сделать их более компактными и уникальными.
В заданиях ЕНТ часто можно встретить вопросы именно по какому-то из видов списка. Поэтому данную тему необходимо изучить более внимательно.
Списки определений используются для форматирования любых пар формата “имя/значение”, таких, как термины и их значения, вопросы и ответы, прочие виды понятий и связанной с ними информации.
Чтобы создать список определений, необходимо начать с инициализации тега <dl>, который является частью тройки тегов, используемых для этой цели. Тег <dl> содержит пары тегов <dt> и <dd>. То есть:
dl – Definition list, собственно сам список.
dt – Definition term, тег создающий термин.
dd – Definition description, тег задающий определение или комментарий термину.
Все теги являются парными, у них есть как открывающий тег, так и закрывающий. Давайте рассмотрим пример такого списка:
<dl>
<dt>Информатика</dt>
<dd>Информатика — это наука, изучающая способы обработки информации с помощью компьютеров. Она занимается анализом и хранением данных, их структурой, передачей и использованием в различных сферах деятельности.</dd>
</dl>
На примере видно, что сначала мы создаем тег <dl>, а уже внутри по очереди пишем термин между тегами <dt>,</dt> и определение к термину между <dd>,</dd>.
Допустим вы написали список определений, но вам необходимо написать еще несколько терминов и значений. Поэтому вместо создания нового списка можно просто расширить существующий, дополнив его новыми определениями в виде пары <dt> и <dd>. Такой подход может сэкономить время. Например:
<dl>
<dt>Информатика</dt>
<dd>Информатика — это наука, изучающая способы обработки информации с помощью компьютеров. Она занимается анализом и хранением данных, их структурой, передачей и использованием в различных сферах деятельности.</dd>
<dt>Тег</dt>
<dd>Тег — это ключевой элемент языка разметки, HTML.</dd>
</dl>
И результат такого будет выглядеть вот так:
Этот формат списков похож на маркированные и нумерованные списки, но имеет некоторые отличия.
Во-первых, для создания маркированного списка, также известного как неупорядоченный, используют теги <ul> и <li>. Практически любой список примеров, имен, мыслей квалифицируются как неупорядоченный список. По умолчанию такие списки отображаются с пометкой в виде точки перед каждым элементом, делая их более наглядными и упорядоченными. Пример как создается маркированный список:
<ul>
<li>Маршрутизатор</li>
<li>Коммутатор</li>
<li>Концентратор</li>
</ul>
А выглядеть он будет следующим образом:
- Маршрутизатор
- Коммутатор
- Концентратор
Обратите внимание, что исходный код не содержит маркеров списка, поскольку они добавляются автоматически браузером.
Нумерованные или упорядоченные списки действуют так же, как и маркированные, за исключением того, что они используют тег <ol>. Данные списки часто используются для записи, например, пошаговых инструкций. Вместо маркеров браузер автоматически добавляет номера перед элементами списка, поэтому вам не нужно проставлять их в исходном документе. Это делает создание списков более удобным и эффективным. Давайте рассмотрим пример нумерованного списка:
<ol>
<li>Открыть интересующую вас статью</li>
<li>Прочитать ее полностью</li>
<li>Ответить на вопросы в разделе «Проверь себя»</li>
</ol>
В браузере отображается следующим образом:
- Открыть интересующую вас статью
- Прочитать ее полностью
- Ответить на вопросы в разделе «Проверь себя»
По умолчанию браузер начинает нумерацию с цифры 1. Если вы хотите, чтобы список начинался не с номера 1, а с какого нибудь другого, следует указать это при помощи атрибута start. Давайте рассмотрим таблицу где все наглядно показано.
| Код HTML | Виды списков | Пример отображения |
| <ol type = “A”><li>…</li></ol> | Заглавные буквы латинского алфавита | МаршрутизаторКоммутаторКонцентратор |
| <ol type = “i”><li>…</li></ol> | Римские цифры нижнего регистра | i. Маршрутизатор ii. Коммутатор iii. Концентратор |
| <ol type = “I”><li>…</li></ol> | Римские цифры верхнего регистра | МаршрутизаторКоммутаторКонцентратор |
| <ol type = “11”><li>…</li></ol> | Арабские цифры | 11. Маршрутизатор12. Коммутатор13. Концентратор |
Здесь можно увидеть одно отличие списка определений от нумерованного и маркированного. Заключается оно в том, что никакой из тегов в списке определений и значений не имеет атрибутов.
Все три типа списков обладают общим свойством — возможность создания вложенных списков любого уровня сложности. Уникальность заключается в том, что вложенные списки могут быть составлены как из элементов одного типа, так и из элементов разных типов, что позволяет создавать более гибкие и разнообразные структуры данных. Например, следующий пример демонстрирует структуру маркированного списка, вложенного в список определений.
<ul>
<li>
Сетевые устройства
<dl>
<dt>Маршрутизатор</dt>
<dd>способен анализировать структуру сети и находить оптимальный путь для передачи данных.</dd>
<dt>Коммутатор</dt>
<dd>служит точкой подключения для устройств через порты, что позволяет создать сеть.</dd>
</dl>
</li>
<li>Мультимедийные устройства</li>
</ul>
В браузере отображается это так:
Вывод
В данной статье были рассмотрены основные принципы использования списков определений и значений в HTML. Этот вид списков предоставляет удобный способ организации информации, связанной с определениями и терминами. Мы выяснили, что списки определений состоят из пар термин-значение и помогают структурировать контент страницы. Благодаря использованию списков определений и значений можно быстро и легко усвоить представленную информацию, что делает ее более понятной и доступной.
Фактчек
- Списки определений и значений используются для форматирования любого типа пар формата “имя/значение”.
- Все списки по умолчанию представляются в блочном формате, то есть они занимают всю доступную горизонтальную ширину и начинаются с новой строки.
- Тройка тегов <dl>, <dt>, <dd>, предназначенные для создания списка определений.
Задания для самопроверки:
Задание 1
Выбери с помощью какого тега можно создать список определений.
- <ul>
- <dd>
- <ol>
- <dl>
Задание 2
В чем отличие списка определений от двух других типов?
- Теги с списке определений не имеют атрибутов.
- Список определений не может содержать вложенные списки.
- В списке определений все теги одиночные.
- Список определений не может быть вложенным в другие списки.
Задание 3
Для чего используют списки определений и значений?
- Для описания многоуровневых иерархий в веб-документах.
- Для записи пошаговых инструкций.
- Для записи списка продуктов, мыслей, имен.
- Для записи и форматирования терминов и из значений.
Ответы: 1 – 4; 2 – 1; 3 – 4.
Загрузка...