HTML details 与 summary 的基础作用
什么是 details/summary
details 标签是一个容器，用来包裹需要可折叠显示的区域；summary 则提供了可点击的标题，作为折叠区域的入口。
summary 会在未展开时显示为可点击的文本，点击后会自动切换到展开状态，显式控制与默认行为都由浏览器提供的交互实现。
在结构上，details 和 summary 的组合形成一个无须额外脚本即可实现的折叠区域，details 可以通过 open 属性来指示当前状态，summary 始终作为标签显示在区域顶部。
基础用法快速示例
以下示例演示了最简单的搭配：一个折叠区域，默认关闭，点击 查看详情 展开内容。
<details><summary>查看详情</summary><p>这里是折叠的内容。</p>
</details>通过浏览器原生行为，details 的状态变化是原生的，无需额外 JavaScript，可以快速实现可折叠的 UI 组件，且对键盘导航友好。
无障碍与语义：为何选择 details/summary
可访问性要点
使用 details 与 summary 提供的交互是语义化的，summary 的文本会被屏幕阅读器以标题形式读出，帮助用户理解折叠区域的内容。
details 提供了可聚焦的区域，用户可以通过键盘(回车/空格)控制展开与收起，确保无障碍性符合现代前端实践。
与自定义脚本实现的折叠组件相比，使用原生标签的好处在于最大程度的可访问性和更低的维护成本，无需额外 ARIA 标签即可获得良好语义。
浏览器和屏幕阅读器的支持
主流浏览器对 details 与 summary 给予原生支持，屏幕阅读器也能可靠识别折叠状态与标题文本。
当需要兼容性较差的环境时，可以考虑提供一个无脚本的回退实现，或引入轻量 polyfill 来覆盖极端浏览器场景，确保体验一致性。
为了保持简单与稳定，建议在内容结构层面就使用这两个标签，而将行为逻辑交给浏览器处理。
实现折叠内容的完整步骤与示例
核心要点与技巧
核心要点包括：默认状态为折叠、summary 作为可见标题、details 的开合状态可通过 open 属性读取和控制；通过 CSS 可以对 open 状态进行样式化。
通过 details[open] 选择器可以定制展开时的外观，例如改变边框、背景或箭头图标，提升视觉层级和可读性。
需要注意的是，summary 的点击区域通常与文本紧密相关，避免将大量复杂内容放入 summary 之外，以免影响可访问性与可用性。
完整示例代码
下面的示例综合了标签用法、状态选择和简单样式，是实际开发中常见的折叠场景：
<details><summary>展开更多</summary><p>这段内容在展开时显示，包含重要信息。</p>
</details>本段还演示了一个紧凑的交互：details 的开启状态可以直接通过 CSS 选择器改变外观，提升用户体验。
details { border: 1px solid #ddd; padding: 0.5em;
}
details[open] { background: #f9f9f9;
}
summary { cursor: pointer; font-weight: bold;
}
通过以上组合，可以实现一个结构清晰、样式可控、无脚本依赖的折叠区域。
CSS 与交互增强：如何定制折叠样式
默认样式与覆盖
使用 details 的默认样式时，浏览器会提供原生箭头和展开行为，若需要统一外观，可以通过 CSS 来覆盖默认样式，确保跨站点风格一致。
自定义箭头 可以通过伪元素实现，例如隐藏系统箭头并在 summary 前插入自定义图标，提升品牌一致性。
实用的 CSS 技巧
通过组合选择器，可以在 summary 的文本前后添加图标、或在展开时调整阴影和间距，以增强可读性。
details { border: 1px solid #ccc;border-radius: 6px;padding: 0.5rem;
}
details summary::marker { display: none; } /* 移除默认标记（浏览器可能不同） */
details summary::after {content: "▼";float: right;
}
details[open] summary::after { content: "▲"; }
这样可以在不破坏语义的前提下，获得更加一致的视觉呈现。
常见坑与兼容性注意
坑点一：默认箭头与可控图标
不同浏览器对 details/summary 的默认样式存在差异，某些情况下系统箭头难以自定义，CSS 定制 是解决方案之一，但要确保在不同浏览器下保持可访问性。
尽量避免在 summary 中放入过多交互组件，保持其文本的清晰性，减少屏幕阅读器的干扰。
坑点二：嵌套 details 的行为
如果需要在同一页面中嵌套 details，请注意嵌套区域的展开状态可能相互影响，open 状态只能逐层控制，避免产生意外的展开/收起行为。
对于复杂的交互场景，可以在外层使用简单的标签组合，并在内部保持结构清晰，确保可维护性与可访问性。
