单页HTML简历的核心是语义化结构：用<section>划分模块、@media print确保打印正确、<dl>/<ul>规范时间线与技能、移除固定宽度以适配移动端，所有优化均基于原生HTML/CSS。
单页HTML简历不是“把所有内容塞进一个页面”，而是让浏览器、打印引擎和屏幕阅读器都能自然理解信息层级——关键在语义结构，不在滚动长度。
用 <section> 划分模块，别用 <div> 堆砌
简历本质是结构化文档，<section> 告诉浏览器“这是独立语义块”，而 <div> 只是无意义容器。PDF 导出工具、ATS 系统、Chrome 打印预览都依赖这个信号做分页或提取。
- 每个主模块（如“工作经历”“教育背景”“技能”）必须用
<section>包裹，标题统一用<h2> - 避免嵌套
<section> > <div> > <h3>：多一层<div>就多一分样式干扰和语义丢失风险 - HR 上传系统时若自动解析失败，90% 是因为用了
<div class="experience">替代<section>
@media print 必须写，否则 PDF 会丢内容或错页
Chrome “另存为 PDF” 默认按屏幕视口渲染，不加 @media print 规则，就等于没告诉浏览器“这张纸该怎么排”。很多简历导出后只剩半页，或联系方式被截断，根源在此。
- 至少加这三行：
nav, .header-banner { display: none; }（隐藏非履历内容）、section { page-break-inside: avoid; }（防止某段经历跨页）、body { font-size: 12pt; line-height: 1.4; } - 别信“导出时勾选背景图形就能解决一切”：背景图在打印模式下默认关闭，头像用
<img>，别用background-image - 测试前先开 Chrome DevTools → Ctrl+Shift+P → 输入 “Rendering” → 勾选 “Emulate CSS media type: print”，比反复导出快得多
时间线和技能列表用 <dl> 和 <ul>，别手写换行
用 <br> 或空格分隔“公司｜职位｜时间”，看似省事，实则破坏语义流：窄屏下错位、屏幕阅读器无法识别字段边界、导出 PDF 后变成一坨乱码。
立即学习“前端免费学习笔记（深入）”；
- 时间线用
<dl><dt>2021.06–2023.08</dt><dd>XX 公司｜前端开发</dd></dl></li> <li>技能用 <code><ul><li>React</li><li>TypeScript</li></ul>
，而非 “React / TypeScript / Node.js” -
<small>标日期、<strong>标关键词（如“全栈开发”），比手动写style="font-size:0.9em"更轻量且语义明确
移动端可读性靠 HTML 流式结构，不是靠 CSS 媒体查询
很多人加了 <meta name="viewport"> 就以为响应式完成了，结果手机上文字小得要放大三次。真正起作用的是 HTML 是否允许内容自然折行和收缩。
- 删掉所有固定像素宽度：
width: 800px、style="width:200px"、<table width="60%">—— 它们在手机横屏下直接溢出 - 图片统一加
style="max-width: 100%; height: auto;"，别用width="200"属性 - 邮箱和电话必须用
mailto:和tel:链接，否则 iOS/Android 点不开，ATS 也抓不到
最难的不是让简历“看起来满一页”，而是让它在 Chrome 打印预览里不跨页、在 GitHub Pages 上路径不 404、在 HR 的 PDF 查看器里能被搜索到“React”——这些细节不靠 JS 或框架，只靠对 <section>、@media print 和 <dl> 的老实使用。
