HTML 额外详细信息

介绍

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

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

基础

标签

在你喜欢的文本编辑器中创建一个 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> 标签中添加图片。