HTML Details 和 Summary

HTMLHTMLBeginner
立即练习

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

介绍

在 HTML 中,<summary> 标签用于为网页中的内容创建可展开和折叠的摘要元素。

注意:你可以在 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/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/LayoutandSectioningGroup -.-> html/access_cons("`Accessibility Considerations`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/custom_attr("`Custom Data Attributes`") html/AdvancedElementsGroup -.-> html/adv_access("`Accessibility for Advanced Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70849{{"`HTML Details 和 Summary`"}} html/lists_desc -.-> lab-70849{{"`HTML Details 和 Summary`"}} html/layout -.-> lab-70849{{"`HTML Details 和 Summary`"}} html/doc_flow -.-> lab-70849{{"`HTML Details 和 Summary`"}} html/access_cons -.-> lab-70849{{"`HTML Details 和 Summary`"}} html/inter_elems -.-> lab-70849{{"`HTML Details 和 Summary`"}} html/custom_attr -.-> lab-70849{{"`HTML Details 和 Summary`"}} html/adv_access -.-> lab-70849{{"`HTML Details 和 Summary`"}} end

添加 <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 属性,我们可以提供内容的当前状态,使其对残障用户更具可访问性。

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