HTML 5

标签

HTML 5 中新增了 <summary> 标签，用于表示文档或段落的一个摘要或标题，并且与 <details> 标签一起使用，可以实现折叠和展开内容的效果。

语法

<details> 标签包裹内容，<summary> 标签定义折叠内容的标题或摘要。

<details>
  <summary>Title</summary>
  Content here...
</details>

示例

以下示例展示了如何使用 <summary> 和 <details> 标签实现折叠效果。

<details>
  <summary>步骤1：准备材料</summary>
  手机、数据线、电脑
</details>

<details>
  <summary>步骤2：连接手机和电脑</summary>
  将数据线插入手机和电脑的 USB 接口中
</details>

<details>
  <summary>步骤3：打开手机的调试模式</summary>
  在手机中打开开发者选项，启用 USB 调试模式
</details>

<details>
  <summary>步骤4：运行应用程序</summary>
  在电脑中运行应用程序，即可进行调试
</details>

在浏览器中展示的效果如下：

属性

<summary> 标签支持如下属性：

• accesskey: 规定激活元素的快捷键；
• class: 规定元素的一个或多个类名；
• dir: 规定元素中内容的文本方向；
• hidden: 规定元素是否隐藏；
• id: 规定元素的唯一 ID；
• lang: 规定元素内容的语言；

浏览器支持

目前除了 IE 浏览器外，所有主流浏览器都支持 <summary> 标签。

注意事项

1. <summary> 标签必须作为 <details> 标签在其子元素中的第一个子元素，否则会出现兼容性问题；
2. IE 浏览器需要使用 JavaScript 实现 <summary> 和 <details> 效果；

更多关于 HTML 5 <summary> 标签的信息，请参考 HTML