HTML Summary 标签

引言

HTML5中引入了<summary>和<details>标签，这是为了方便网页开发者实现页面交互效果。<summary>标签被用来表示一个可以被点击展开或收起的区域，而 <details> 标签被用来包含一个 summary 元素和一个描述。

语法

<summary>标签是定义于<details>标签内部的。如下所示：

<details>
  <summary>这是摘要</summary>
  这是详情
</details>

在<summary>标签内部，你可以放置任何你想要的内容，像是文字或者图标等等。当用户点击区域时，详情部分将会展开或者收起。

属性

<summary>标签有一个默认的display属性值为list-item，可以通过CSS修改其他的属性。其他可用的属性包括：

• hidden：表示当<summary>在<details>中的时候，默认是否应该隐藏它。
• draggable：表示是否允许用户拖动摘要部分。
• attributename：可以自定义属性，也就是在摘要部分定义一个新属性。

示例

下面是一个使用<summary>和<details>标签的实际例子：

<details>
  <summary>我是摘要，点击展开</summary>
  <p>我是详细内容</p>
</details>

总结

<summary>和<details>的引入是为了更加方便的实现页面交互效果，让用户可以在一两个点击的实现之下得到更多的信息。在使用时，需要参考语法和属性定义的规则，才能更好的实现这样的效果。