HTML 定义术语

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在本实验中,你将学习如何使用 HTML <dfn> 标签创建一个突出显示被定义术语的定义列表。<dfn> 标签通常用于教程和教育网站,以提供互动且信息丰富的用户体验。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 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> 标签来突出显示术语并使它们更加醒目。

添加工具提示

  • 要为每个术语添加工具提示,请在 <dfn> 元素中包含一个 title 属性。
<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> 标签,你可以让你的教育内容更具互动性,并为用户提供更具视觉吸引力的体验。

您可能感兴趣的其他 HTML 教程