1. 简介
HTML中的<summary>标签是一个用于定义折叠内容列表中的标题的标签。它通常与<details>标签一起使用，用于创建可展开和折叠的内容区域。通过点击<summary>标签，可以展开或折叠<details>标签包含的内容。
2. 用法
下面是一个基本的使用示例：
<details>
<summary>点击展开/折叠</summary>
<p>这是可展开和折叠的内容区域</p>
</details>
通过上面的示例，点击"点击展开/折叠"这个<summary>标签，就可以展开或折叠包含的段落<p>标签。
2.1 设置默认状态
可以通过给<details>标签设置open属性，来控制默认状态是展开还是折叠：
<details open>
<summary>默认展开</summary>
<p>这是默认展开的内容区域</p>
</details>
上面的示例中，<details>标签的open属性被设置为true，所以默认状态是展开的。
3. 注意事项
3.1 结构与语义化
使用<summary>和<details>标签时，要注意正确的结构和语义化。应该将对应的内容作为<details>标签的子元素，并且<summary>标签应该紧跟在<details>标签之后。
<details>
<summary>标题</summary>
<p>内容</p>
</details>
上面的示例中，<details>标签的子元素包含了标题和内容，<summary>标签在<details>标签后紧跟着作为标题。
3.2 兼容性
<summary>标签在一些较旧的浏览器中可能不被支持。为了提供更好的兼容性，可以使用CSS和JavaScript来模拟<summary>标签的行为。
4. 总结
<summary>标签可以用于定义折叠内容列表的标题，结合<details>标签可以创建可展开和折叠的内容区域。它提供了一种简洁的方式来显示和隐藏内容，使得页面更加易读和易用。
在使用<summary>标签时，要注意正确的结构和语义化，并确保兼容性。通过合理使用<summary>标签，可以提升用户体验，使得页面内容更加清晰和易于浏览。