Мастерство в создании HTML-списков описаний

Введение

В HTML существует специальный тег <dl>, который используется для определения списка описаний. Этот тип списка обычно создается для объяснения терминов и их определений или для краткого описания продукта или услуги. В этом практическом занятии вы научитесь использовать тег <dl> для создания собственного списка описаний в HTML.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку "Запустить в браузере" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") subgraph Lab Skills html/basic_elems -.-> lab-70745{{"HTML-список описаний"}} html/head_elems -.-> lab-70745{{"HTML-список описаний"}} html/lists_desc -.-> lab-70745{{"HTML-список описаний"}} html/layout -.-> lab-70745{{"HTML-список описаний"}} html/doc_flow -.-> lab-70745{{"HTML-список описаний"}} end

Настройка HTML-файла

Создайте новый HTML-файл с именем index.html. Включите базовую структуру HTML и заголовок для вашей страницы.

<!doctype html>
<html>
  <head>
    <title>My Description List</title>
  </head>
  <body></body>
</html>

Создание списка описаний с использованием тега `<dl>`

В теле вашего HTML-файла создайте список описаний с использованием тега <dl>. Тег <dl> должен быть связан с тегом <dt>, представляющим термин, который определяется, и тегом <dd>, представляющим определение этого термина.

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

Добавление стиля к списку описаний

Для того, чтобы список описаний выглядел лучше, добавьте к нему некоторый стиль CSS. В этом примере мы удалим отступы и внутренние отступы, установив их равными нулю, а затем добавим некоторый внутренний отступ к тегу <dt>, чтобы он выделялся.

<style>
  dl {
    margin: 0;
    padding: 0;
  }
  dt {
    padding: 10px;
    font-weight: bold;
  }
</style>

Добавление содержимого в список описаний

Теперь, когда вы настроили базовый список описаний, вы можете начать добавлять собственное содержимое. Просто добавьте новые пары <dt> и <dd> в список для каждого термина и определения.

<dl>
  <dt>HTML</dt>
  <dd>
    HyperText Markup Language, стандартный язык разметки, используемый для
    создания веб-страниц
  </dd>
  <dt>CSS</dt>
  <dd>
    Cascading Style Sheets, язык, используемый для описания вида документа,
    написанного на HTML
  </dd>
  <dt>JavaScript</dt>
  <dd>
    Программируемый язык, используемый в основном для разработки веб-приложений
  </dd>
</dl>

Сохраните файл index.html, а затем откройте его в веб-браузере, чтобы просмотреть ваш новый список описаний.

Резюме

В этом практическом занятии вы узнали, как использовать тег <dl> в HTML для создания списка описаний с терминами и определениями. С помощью тегов <dt> и <dd> вы смогли определить термины и дать объяснения для каждого из них. Вы также узнали, как добавить простой стиль CSS к своему списку описаний, чтобы он выглядел лучше на веб-странице.

HTML-список описаний