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