html简历是语义化、静态、内联样式的index.html文件：用划分模块，包裹经历，标记时间；css内嵌且≤1kb，禁用外部资源；技能分组用；pdf导出需@media print微调并删除viewport。

HTML 简历不是“网页版 Word”，而是用语义化标签表达结构、用 CSS 控制呈现、用纯静态方式确保投递时零兼容风险——它本质是一份可读性强、易维护、能直接发给 HR 的 index.html 文件。

用 <section></section> 划分模块，别用 <div> 堆砌 <p>HR 或 ATS（招聘系统）会解析 HTML 结构。用 <code><section></section> 包裹「工作经历」「项目经验」「技能」等主模块，比全用 <div class="section"> 更利于语义识别；<code><h2></h2> 必须紧跟在每个 <section></section> 内，代表该模块标题。

• <section><h2>工作经历</h2> <article>...</article></section> 是推荐写法
• 避免 <div id="work"> <h3>工作经历</h3>...</div>：ID 无语义，<h3></h3> 层级错乱（应为 <h2></h2>）
• 每段经历用 <article></article> 包裹，内部用 <time></time> 标记起止时间，例如：<time datetime="2021-03">2021.03–2023.08</time>

CSS 只写内联样式或单个 <style></style> 块，别引外部文件

社招简历常通过邮件发送或粘贴进招聘系统，外部 CSS 文件大概率失效。所有样式必须内嵌，且控制在 1KB 以内，避免被邮件客户端截断。

• 字体优先用系统安全字体：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
• 禁用 @import、url()（图标/字体）、CSS 变量（部分邮件客户端不支持）
• 行高、外边距用 em 或 rem 不如直接用 px 稳定，例如：margin-bottom: 16px;
• 如果加了响应式（@media），只保留 max-width: 800px 的窄屏适配，别写移动端专属布局

技能栏别堆名词，用 <ul></ul> + <li> 分类呈现

“熟悉 Java、Spring Boot、MySQL、Redis、Docker、Kubernetes” 这种一长串文本对 ATS 不友好，也看不出掌握程度。按技术栈分组，每项独立成行。

超级简历WonderCV

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

下载

• 后端：<li>Java（JDK 17+, 多线程 & JVM 调优）</li>
• 框架：<li>Spring Boot（自动配置原理 & Starter 开发）</li>
• 数据库：<li>MySQL（索引优化 & 慢查分析）</li>
• 避免写 “了解”“熟悉”“掌握”——用括号补充具体动作或场景更可信

导出 PDF 时字体和间距崩了？用 print 媒体查询微调

Chrome「另存为 PDF」或招聘系统转 PDF 时，常见问题：中文字体丢失、行距压缩、链接下划线乱跑。这不是 HTML 写错了，是打印样式没隔离。

• 在 <style></style> 里加：@media print { body { font-size: 12pt; line-height: 1.4; } a { text-decoration: none; color: #000; } }
• 中文务必指定 font-family 含 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei" 等系统字体
• 禁用 flex 布局打印——部分 PDF 引擎不支持，改用 display: block + margin 控制顺序
• 测试方法：Chrome → 打印 → 目标选择「保存为 PDF」→ 预览看是否换行异常

最易被忽略的是：把 <meta name="viewport"> 设为 width=device-width, initial-scale=1 后，PDF 导出反而变模糊。社招简历不需要响应式视口，直接删掉这行 <meta> 标签更稳妥。