Мастерство в HTML Списках Определений

Введение

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

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 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(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) 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/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70740{{"HTML Определение Термина"}} html/head_elems -.-> lab-70740{{"HTML Определение Термина"}} html/lists_desc -.-> lab-70740{{"HTML Определение Термина"}} html/doc_flow -.-> lab-70740{{"HTML Определение Термина"}} html/inter_elems -.-> lab-70740{{"HTML Определение Термина"}} html/custom_attr -.-> lab-70740{{"HTML Определение Термина"}} end

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

Создайте новый файл с именем index.html и откройте его в предпочитаемом редакторе кода.
Добавьте в файл базовую структуру HTML.

<!doctype html>
<html>
  <head>
    <title>HTML Definition List</title>
  </head>
  <body></body>
</html>

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

Внутри элемента <body> создайте элемент <dl>, чтобы содержать список определений.
Внутри элемента <dl> создайте набор пар термина и определения, используя элементы <dt> и <dd> соответственно.

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

В этом примере мы используем тег <dfn> для выделения терминов и их выделения.

Добавление подсказки

Чтобы добавить подсказку к каждому термину, включите атрибут title внутри элементов <dfn>.

<dt><dfn title="HyperText Markup Language">HTML</dfn></dt>
<dd>
  HyperText Markup Language - это стандартный язык для создания веб-страниц.
</dd>

Атрибут title создаст подсказку, которая отображает полный термин, когда пользователь наведет на него мышкой.

Настройка стиля CSS

По умолчанию тег <dfn> имеет курсивный стиль шрифта. Однако вы можете настроить стили, используя CSS.
Добавьте следующие стили CSS в свой файл.

<style>
  dfn {
    font-style: italic;
    color: blue;
  }
  dt {
    font-weight: bold;
  }
</style>

Вышеперечисленные стили установят стиль шрифта для <dfn> в курсив и цвет шрифта в синий. Толщина шрифта для <dt> также изменится на полужирный.

Резюме

В этом практическом занятии вы узнали, как использовать тег HTML <dfn> для создания списка определений с выделенными терминами и подсказками. Используя тег <dfn>, вы можете сделать свое образовательное содержание более интерактивным и привлекательным для пользователя с визуальной точки зрения.