纯 HTML 实现手风琴用 和 标签，语义清晰、无需 JS、支持键盘操作与屏幕阅读器；加 open 属性可默认展开，多组并列实现多面板，CSS 仅用于样式微调。
实现手风琴/折叠面板的纯 HTML 写法
纯 HTML 实现手风琴（Accordion）或折叠面板，核心是利用 <details></details> 和 <summary></summary> 原生标签。无需 JavaScript 或 CSS（基础功能），语义清晰、可访问性好、默认支持键盘操作（如回车/空格展开收起）。
基本结构：一个可折叠项
每个 <details></details> 代表一个面板，<summary></summary> 是标题栏，其后内容为折叠区：
<details> <summary>常见问题 1</summary> 这里是展开后显示的内容，可以是文字、列表、甚至图片。 </details>
默认展开与多个面板
加 open 属性让某一项默认展开；多个 <details></details> 并列即可实现多面板：
<details open> <summary>默认打开的面板</summary> 初始状态即可见。 </details> <details> <summary>点击才展开的面板</summary> 初始隐藏。 </details>
样式微调（可选，仍属纯 HTML + 内联或外部 CSS）
原生 <details></details> 有默认箭头，可通过 CSS 隐藏并自定义（例如用 ▼ / ▶）：
立即学习“前端免费学习笔记（深入）”；
details summary {
list-style: none;
}
details summary::marker {
content: "▶ ";
}
details[open] summary::marker {
content: "▼ ";
}
注意：该 CSS 不影响 HTML 结构合法性，仍属于“纯 HTML 方案”的延伸优化。
无障碍与兼容性提示
优势：自带 ARIA role（role="group" 和 role="button"），屏幕阅读器友好；支持 Safari、Chrome、Firefox、Edge（现代版本均支持）。
注意：IE 完全不支持，如需兼容 IE，必须降级为 JS 方案——但严格意义上已不属于“纯 HTML”范畴。
