介绍
在 HTML 中,<summary>
标签用于为网页中的内容创建可展开和折叠的摘要元素。
注意:你可以在
index.html
中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
在 HTML 中,<summary>
标签用于为网页中的内容创建可展开和折叠的摘要元素。
注意:你可以在
index.html
中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
<details>
标签在添加 <summary>
标签之前,我们需要创建一个可以展开或折叠的内容部分。为此,我们将使用 <details>
标签。在 index.html
文件的 <body>
标签内添加以下代码。
<details>
<summary>点击我查看内容</summary>
<p>内容在这里。</p>
</details>
在上面的代码中,我们在 <details>
标签内添加了一个 <summary>
标签,用于定义内容的摘要。
aria-expanded
属性我们可以为 <details>
标签添加一个 aria-expanded
属性,以提供内容的当前状态。当内容展开时,aria-expanded
的值为 true
;当内容折叠时,其值为 false
。在 <summary>
标签后添加以下代码以包含 aria-expanded
属性。
<details>
<summary aria-expanded="false">点击我查看内容</summary>
<p>内容在这里。</p>
</details>
<summary>
标签添加样式<summary>
标签没有任何特定的属性,但我们可以使用 CSS 为其添加样式。在 <style>
标签中添加以下代码,为 <summary>
标签设置一些样式。
summary {
padding: 10px;
background-color: #eee;
cursor: pointer;
}
我们可以在 <details>
标签内添加更多内容,这些内容将自动支持展开和折叠。在第一段内容后添加以下代码以添加更多内容。
<details>
<summary aria-expanded="false">点击我查看内容</summary>
<p>内容在这里。</p>
<p>更多内容。</p>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
</ul>
</details>
我们可以在网页中添加多个可展开的部分。添加以下代码以创建另一个可展开的部分。
<details>
<summary aria-expanded="false">另一个部分</summary>
<p>另一个部分的内容</p>
</details>
<summary>
标签可用于在网页上创建可展开和折叠的内容部分。我们可以在 <details>
标签内添加更多内容,并使用样式自定义 <summary>
标签的外观。通过添加 aria-expanded
属性,我们可以提供内容的当前状态,使其对残障用户更具可访问性。