详细信息摘要HTML5 - HTML

HTML5中的详细信息摘要元素<summary>和详细信息描述符元素<details>允许您轻松地创建展开和折叠详细信息大纲。

用法

<details>元素包含一个<summary>元素和一个包含详细信息的内容区域。

<details>
  <summary>点击展开详细信息</summary>
  <p>这里是详细信息内容</p>
</details>

属性

<details>和<summary>元素都有一些属性来使其更加定制化。

<details>的属性

• open：默认情况下，详细信息区域是关闭的；但如果设置open属性，那么默认打开详细信息。

<details open>
  <summary>默认打开详细信息</summary>
  <p>这里是详细信息内容</p>
</details>

<summary>的属性

• title：悬停在摘要上的文本。

<details>
  <summary title="展开详细信息">点击展开详细信息</summary>
  <p>这里是详细信息内容</p>
</details>

样式

<details>元素的默认样式无法自定义，但可以设置类或ID来修改其样式。可以使用CSS中的::after伪元素来在详细信息之前添加箭头图标。

<style>
  details {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 5px;
  }
  summary {
    margin-bottom: 5px;
    cursor: pointer;
    outline: none;
  }
  summary::after {
    content: " ▼";
  }
  details[open] summary::after {
    content: " ▲";
  }
</style>

<details>
  <summary>展开详细信息</summary>
  <p>这里是详细信息内容</p>
</details>

浏览器支持

<details>和<summary>元素是HTML5中的新元素，因此部分旧版浏览器可能无法通过。目前主流浏览器都已经支持，包括Google Chrome、Firefox、Safari、Opera等。

总结

• HTML5中的<details>和<summary>元素可以轻松地创建可展开/折叠的详细信息大纲。
• 使用属性可以对元素进行定制化。
• 通过CSS样式可以自定义元素的外观。
• 大多数现代浏览器都支持这两个元素。