HTML中能否在单个details标签内使用两个summary标签？

HTML规范明确规定，<details>标签内只能包含一个<summary>标签，它作为该组件默认的展开/折叠触发器。

当你在一个<details>里放多个<summary>时，浏览器只会识别第一个<summary>作为触发器，后续的<summary>会被当作普通的流式内容处理，但很多浏览器不会为多余的<summary>赋予默认样式，所以你可能看不到它的存在，或者页面表现不符合预期。

举个实际代码示例：

<details>
  <summary>第一个触发器</summary>
  <summary>第二个summary</summary>
  <p>详情内容</p>
</details>

在浏览器中，只有第一个<summary>会显示为可点击的触发器，第二个<summary>会和<p>一样作为详情内容的一部分，默认处于折叠状态，只有展开后才能看到。如果你的页面完全没变化，大概率是第二个<summary>被折叠在详情区域里，你没展开看不到。

如果需要多个可点击的触发区域，不要在同一个<details>里放多个<summary>，可以考虑拆分多个<details>组件，或者用JavaScript自定义交互逻辑来实现类似效果。

内容的提问来源于stack exchange，提问作者Naga Phaneendra