HTML 额外详细信息

HTMLHTMLBeginner
立即练习

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

介绍

HTML 的 <details> 标签提供了一种方式来为任何标题或文本提供额外的详细信息。默认情况下,<details> 标签会隐藏其内部的文本,只有在用户点击箭头按钮时才会显示文本。在本实验中,我们将学习如何使用带有自定义摘要的 HTML <details> 标签。

注意:你可以在 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/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/MultimediaandGraphicsGroup -.-> html/embed_media("`Embedding External Media`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70738{{"`HTML 额外详细信息`"}} html/doc_flow -.-> lab-70738{{"`HTML 额外详细信息`"}} html/embed_media -.-> lab-70738{{"`HTML 额外详细信息`"}} html/inter_elems -.-> lab-70738{{"`HTML 额外详细信息`"}} end

基本的 <details> 标签

在你喜欢的文本编辑器中创建一个 index.html 文件。

将以下代码复制并粘贴到你的 index.html 文件中:

<details>
  <summary>点击查看更多</summary>
  <p>这段文本默认是隐藏的,点击箭头按钮可以查看。</p>
</details>

这是一个使用 <details> 标签的基本示例。<details> 标签内的文本默认是隐藏的,用户可以通过点击箭头按钮来查看文本。

自定义摘要

现在让我们为 <details> 标签创建一个自定义摘要。将现有代码修改为如下内容:

<details>
  <summary>阅读更多关于作者的信息</summary>
  <p>John Doe 是一位作家,他在不同领域出版了许多书籍。</p>
</details>

在上面的代码中,我们使用 <summary> 标签添加了一个自定义摘要“阅读更多关于作者的信息”,并在 <details> 标签内提供了作者的详细信息。

添加图片

让我们在 <details> 标签中添加一张图片。将以下代码复制并粘贴到你的 index.html 文件中:

<details>
  <summary>点击查看更多</summary>
  <p>这段文本默认是隐藏的,点击箭头按钮可以查看。</p>
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</details>

在上面的代码中,我们使用 <img> 标签添加了一张图片。当用户点击箭头按钮时,<details> 标签内的图片和文本将会显示出来。

添加 open 属性

现在让我们为 <details> 标签添加 open 属性,以便默认显示文本。将现有代码修改为如下内容:

<details open>
  <summary>阅读更多关于作者的信息</summary>
  <p>John Doe 是一位作家,他在不同领域出版了许多书籍。</p>
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</details>

<details> 标签的 open 属性确保文本在网页上默认可见。

总结

在本实验中,我们学习了如何使用 HTML <details> 标签为任何标题或文本提供额外的详细信息。我们还学习了如何使用自定义摘要以及在 <details> 标签中添加图片。

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