怎样用HTML制作可折叠简历？内容精简折叠技巧-html教程-PHP中文网

原生比手写 JS 更可靠，因其天然支持键盘操作、aria-expanded 自动同步、焦点管理，且语义正确、可打印、兼容 ATS 和屏幕阅读器。

怎样用html制作可折叠简历？内容精简折叠技巧

直接用 <details></details> + <summary></summary> 就能做出语义正确、键盘可访问、无需 JS 的可折叠简历区块，但必须注意 <summary></summary> 是 <details></details> 的第一个子元素，否则点击无效。

为什么简历里用 `<details></details>` 比手写 JS 更可靠

简历不是交互应用，核心诉求是“信息可读、可打印、可被 ATS 和屏幕阅读器识别”。原生 <details></details> 天然支持：空格/回车触发、aria-expanded 状态自动同步、默认焦点管理。而自己用 div + onclick + display: none 容易漏掉键盘操作、不设 aria-controls、收起后焦点丢失——这些在 HR 快速扫视或使用读屏软件时会直接导致信息不可达。

<details open></details> 可让「联系方式」或「核心技能」默认展开，其余如「项目细节」「证书列表」默认收起
不支持嵌套：不要在 <details></details> 里再套 <details></details>，Safari 和部分旧版 Chrome 会失效
不能用 height 做过渡动画——内容高度动态，强行 transition: height 会抖动或卡死

怎么让 `<summary></summary>` 标题看起来更像简历模块标题

浏览器默认给 <summary></summary> 加了个小三角，但样式控制有限。Safari 对 summary::marker 支持差，直接设 content: "" 会导致无图标、无反馈。稳妥做法是用 summary::before 手动加图标并旋转：

超级简历WonderCV

一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。

下载

summary {
  list-style: none;
  padding-left: 24px;
  position: relative;
}
summary::before {
  content: "▶";
  position: absolute;
  left: 0;
  transition: transform 0.2s;
}
details[open] > summary::before {
  transform: rotate(90deg);
}

别依赖 font-awesome 或外部图标字体——PDF 导出时可能缺失，纯字符更稳
用 details[open] 而不是 .open 类，避免 JS 干预状态，保持原生语义
如果要加背景色或边框，直接作用于 summary，但别改 cursor：浏览器已内置 pointer，手动设反而干扰可访问性

哪些简历内容适合折叠？优先级怎么排

折叠不是为了炫技，而是压缩次要信息密度，让招聘方 3 秒内看到姓名、联系方式、最近一段工作、核心技能。实操中按信息权重降序决定是否折叠：

✅ 默认展开：<header></header>（含姓名+求职意向）、<section></section> 中的「联系方式」和「核心技能」
✅ 默认收起：<section></section> 中的「项目详情」（只留标题和一句话摘要）、「证书列表」、「兴趣爱好」
❌ 不要折叠：<h2></h2> 模块标题本身（如「教育背景」「工作经历」），它们是导航锚点，折叠后结构断裂
⚠️ 注意：PDF 导出时 <details></details> 默认全部展开，若想保持收起状态，必须用 JS 动态移除 open 属性 + @media print 隐藏内容——但代价是牺牲语义，不推荐