HTML5原生可实现无障碍、打印友好、SEO友好的可折叠模块，无需JavaScript；必须为首个子元素，禁用div包裹或嵌套标题；默认展开用open属性，箭头仅Chrome/Firefox支持::marker定制。
用 <details></details> 和 <summary></summary> 实现原生可折叠模块
不用写一行 JavaScript，HTML5 原生就支持可折叠内容——<details></details> 是语义化容器，<summary></summary> 是默认显示的标题行，点击即展开/收起。浏览器默认带箭头图标和过渡行为，兼容 Chrome、Firefox、Edge（Safari 从 12.1 起完全支持），打印时默认展开，适合简历中“项目细节”“技术栈说明”这类非核心但需按需查看的内容。
常见错误是套错层级或忽略可访问性：<summary></summary> 必须是 <details></details> 的**第一个子元素**；不能用 <div> 包 <code><summary></summary>；里面别塞 <h2></h2> 等标题（会破坏大纲层级）。
- 基础写法：
<details> <summary>React 全栈开发项目</summary> <p>基于 Next.js + Node.js 构建，支持 SSR 和静态导出…</p> </details>
- 默认展开加
open属性：<details open></details> - 想改箭头样式？只能用 CSS 覆盖
::marker（Chrome/Firefox 支持），Safari 目前不支持伪元素定制
为什么不用 onclick + display: none 手动控制
手写 JS 切换 display 或 class 看似灵活，但在简历场景下反而容易翻车：
立即学习“前端免费学习笔记（深入）”；
- 无障碍失效：屏幕阅读器无法感知状态变化，
aria-expanded和aria-controls得手动维护，漏掉一个就影响求职者被 ATS（招聘系统）识别 - 打印时内容消失：多数浏览器打印 PDF 时不会执行 JS，
display: none的内容直接丢弃，导致关键项目经历“凭空蒸发” - 移动端点透问题：在 iOS Safari 上，快速连点可能触发两次事件，状态错乱，而
<details></details>是原生双态控件，无此风险
折叠模块嵌入简历结构的实操要点
把可折叠能力自然融入语义化简历结构里，不是为了炫技，而是解决信息密度与可读性的矛盾。比如教育经历中“课程设计”、工作经历中“技术难点”、技能栏中“熟练度说明”，都适合折叠。
- 别折叠主干结构：每个
<section class="experience"></section>本身不该被折叠，那是简历逻辑骨架；折叠的是其内部的补充描述 - 保持视觉一致性：所有
<summary></summary>前加统一 icon（如 ▶ / ▼），可用background-image配合padding-left，避免用 Unicode 字符（复制粘贴易乱码） - 响应式注意：小屏设备上，
<summary></summary>文字过长会折行，建议限制宽度或用white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - SEO 友好：搜索引擎能索引
<details></details>内所有文本，无需额外标注
导出 PDF 时折叠状态怎么处理
Chrome “另存为 PDF” 默认导出**展开态**，这是合理行为——招聘方看 PDF 不该被交互状态干扰。但如果你发现某段内容在 PDF 里被截断，问题通常不在折叠逻辑，而在父容器高度或分页控制。
- 检查是否用了
height: 100vh或min-height类样式，PDF 渲染器对视口单位支持不稳定 - 在
@media print中强制重置：@media print { details { display: block; } summary { display: list-item; } } - 真正要防的是跨页断行：给
<details></details>加page-break-inside: avoid;，确保整个模块落在同一页
最常被忽略的一点：本地预览 PDF 时，务必用 Chrome 的 Print Preview 模式（Ctrl+Shift+P → 输入 “Rendering” → 选 “Emulate CSS media type: print”），而不是直接点“另存为”，否则看不到真实分页效果。
