多页面简历指单页内通过语义化 section+id 实现分屏展示，确保在招聘系统、PDF 导出、屏幕阅读器中结构完整；需用 scroll-margin-top、@media print 和 scroll-snap-type 等技术适配多端。
多页面简历不是指多个 HTML 文件来回跳转，而是单页内通过锚点、CSS 分割或 JS 切换实现「分屏展示」——现代招聘系统和移动端更倾向这种结构，也便于导出 PDF 时控制分页。
用 section + id 实现语义化分页
浏览器原生支持 scrollIntoView() 和 URL 锚点跳转，无需 JS 就能完成基础分页。关键不是“做多少页”，而是每页是否具备独立语义。
- 每个模块必须用
<section id="education"></section>这类带唯一 ID 的语义标签包裹，不能只用<div> <li>ID 命名要直白：<code>contact、experience、projects，避免page1这类无意义命名 - 导航链接写成
<a href="#skills">技能</a>，点击后自动滚动到对应section - 加
scroll-margin-top: 80px防止标题被固定导航栏遮挡（尤其用position: sticky时） - 在每个
section开头加break-before: page（Chrome / Edge 支持）或page-break-before: always（兼容旧版） - 禁用所有
flex或grid的跨行布局，它们在打印中常失效；改用display: block+margin-bottom: 96vh模拟分页 - 测试方法：Chrome 打开「打印预览」→ 选择「另存为 PDF」→ 看每页是否完整包含一个模块
- 别信
overflow: hidden能隐藏溢出内容——打印时它常被忽略，文字仍会跑出边界 - 父容器设
scroll-snap-type: y mandatory，每个section设scroll-snap-align: start - 必须搭配
height: 100vh和overflow-y: auto，否则吸附无效 - 禁用
touch-action: pinch-zoom，否则 iOS 上双指缩放会破坏滚动节奏 - 注意：HR 系统解析简历时基本忽略滚动行为，所以核心信息（姓名、电话、邮箱）仍需放在首屏可见区域，不能依赖滚动才出现
@media print 控制 PDF 分页位置
导出 PDF 时，浏览器默认会把内容硬性截断，导致经历描述被切在两页中间。必须手动指定分页点。
用 scroll-snap-type 做全屏滚动效果
如果目标是视觉上“一屏一页”的交互式简历（比如作品集场景），CSS 原生滚动吸附比 JS 插件更轻量、更稳定。
立即学习“前端免费学习笔记（深入）”；
真正难的不是让页面“看起来分页”，而是确保每页内容在 HR 系统、ATS（求职者追踪系统）、PDF 导出、屏幕阅读器里都保持结构完整——section 的语义、time 标签包裹日期、dl 替代表格列，这些细节比动效更重要。
