是原生可折叠容器，需与成对使用，默认支持展开/收起且无需js；添加open属性可默认展开，但须避免错误嵌套、滥用样式或忽略可访问性。
details标签的基本结构和默认行为
<details></details> 是原生可折叠容器，配合 <summary></summary> 实现点击展开/收起。它不依赖 JS 就能工作，但默认样式简陋，且 <summary></summary> 前的三角符号无法直接用 CSS 完全控制（部分浏览器支持 ::marker，但兼容性差）。
常见错误是把内容直接写在 <summary></summary> 外面又不包在 <details></details> 内，导致折叠失效；或者嵌套多个 <summary></summary>，浏览器只识别第一个。
- 必须成对使用：
<details><summary>标题</summary>折叠内容</details>
- 添加
open 属性可默认展开：<code><details open></details> - 不要给
<summary></summary>设display: block以外的布局方式，否则可能破坏点击区域
用CSS隐藏原生箭头并自定义展开图标
Chrome / Edge 默认显示右向三角，Safari 显示下拉箭头，Firefox 不显示。统一控制需先清除原生样式，再用伪元素重绘。
关键点在于：用 list-style: none 清除 <summary></summary> 的标记，再用 ::before 插入 Unicode 或 SVG 图标，并通过 <details>[open] > summary::before</details> 控制旋转状态。
- 清除默认标记：
summary { list-style: none; } - 插入图标：
summary::before { content: "▼"; margin-right: 6px; transition: transform 0.2s; } - 旋转动画：
details[open] > summary::before { transform: rotate(180deg); } - 注意 Safari 对
::before在<summary></summary>中的支持较晚（iOS 16.4+），旧版本需降级为背景图或内联 SVG
制作书签列表并保持可访问性
书签项应语义化为链接，避免用 <div> + JS 模拟跳转——这会丢失焦点、键盘导航和屏幕阅读器支持。
<p>每个 <code><details></details> 代表一个分组（如“前端工具”），内部用 <ul></ul> 包裹 <li><a href="..."></a></li>。虽然 HTML 规范允许 <details></details> 直接包含流内容，但列表结构更利于样式复用和逻辑隔离。
- 书签链接必须带
href属性，空值（href="#"）会导致页面跳顶，应改用有效 URL 或href="javascript:void(0)"（仅当有 JS 处理时） - 为提升键盘操作体验，可加
tabindex="0"到<summary></summary>（部分老浏览器需要） - 避免在
<summary></summary>里放太多文字，过长会折行破坏图标对齐；建议限制字符数或用text-overflow: ellipsis
响应式折叠与性能注意点
<details></details> 的展开/收起是浏览器原生行为，无重排开销，比 JS 实现轻量得多。但若内部书签数量极多（比如上百条），首次渲染仍可能卡顿——问题不在折叠逻辑，而在 DOM 节点过多。
- 单个面板不宜超过 30–50 个书签；更多需分页或虚拟滚动（此时已超出
<details></details>能力范围） - 移动端小屏下，建议给
<summary></summary>设置最小高度和内边距，防止误触：summary { min-height: 44px; padding: 12px 16px; } - 不要用
max-height+overflow: hidden模拟折叠效果——这会破坏原生无障碍支持，且动画难控制
真正容易被忽略的是 focus 状态样式。用户用 Tab 键切换到 <summary></summary> 时，默认 outline 可能被 CSS 重置掉，又没补自定义 focus 样式，会导致键盘操作完全不可见。加一句 summary:focus { outline: 2px solid #007aff; } 就能解决。
