极简简历需用语义化HTML标签与系统字体栈实现高信息密度：header→contact→summary→experience→skills严格按“人→事→证”组织，禁用div套娃、图标、动效及第三方框架，print媒体查询确保PDF输出稳定。
用纯 HTML + CSS 写极简简历，别碰框架和在线编辑器
极简不是“少写内容”，而是用最基础的标签结构表达最大信息密度。直接手写 index.html 和 style.css，不引入 Bootstrap、Tailwind 或 Canva 导出代码——那些自带冗余类名和内联样式，反而破坏极简的可控性与语义清晰度。
常见错误是把“极简”误解为“删内容”，结果联系方式藏在折叠菜单里，教育经历缩成一行省略号。真正的极简，是让每行文字都有不可替代的信息价值，且所有样式可预测、可调试。
- 只用
<header>、<section>、<p>、<ul>、<li>这五类语义化标签，不用<div>套娃 - 字体只设一种：全局
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;，不加衬线体或手写体 - 颜色限制在三种以内：主色（如
#222）、次色（如#666）、强调色（最多一种，如#007bff仅用于邮箱链接） - 行高固定为
1.6，段间距用margin-bottom: 1.2rem统一，不靠空行或<br>
简历结构必须按「人→事→证」顺序组织
招聘方平均看一份简历只有 6 秒，优先扫描的是「你是谁」「你干过什么」「你怎么证明」。HTML 结构要严格匹配这个认知路径，不能按学校/公司时间倒序堆砌。
正确顺序是：<header>（姓名 + 职位 + 一句话定位）→ <section id="contact">（电话 / 邮箱 / GitHub / LinkedIn，无图标、无超链接文字包装，纯文本+<a href="mailto:...">）→ <section id="summary">（3 行以内，用动词开头：“主导 X 项目交付”“将 Y 流程效率提升 40%”）→ <section id="experience">（公司名+职位+时间左对齐，描述用 <ul>，每项以动作词起头）→ <section id="skills">（只列与岗位强相关的 5–7 项，不写“熟悉 Office”，改写为“用 Excel 建模分析用户留存漏斗”）
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：<h2> 标题层级混乱（比如把“教育背景”设为 <h2> 却把“工作经历”降为 <h3>），或把技能写成图标墙——图标无法被屏幕阅读器识别，也增加 HTTP 请求。
响应式不是“自动适配”，而是主动放弃小屏复杂布局
所谓“手机友好”，不是让简历在 iPhone 上也显示三栏布局，而是明确告诉浏览器：“小屏下一切横向结构取消，回归单列流式”。这比媒体查询写十种断点更符合极简逻辑。
实操建议：
- 默认用
display: block和width: 100%，所有内容垂直堆叠 - 禁用
max-width容器，让文字自然撑满视口宽度（移动端阅读体验优于居中窄列） - 去掉所有 hover 动效、transition、transform——它们在简历场景中毫无信息增益，只拖慢渲染
- 用
@media (min-width: 768px)仅做一件事：把<header>中的姓名和职位改为 inline-block 并右对齐时间，其余结构保持不变
性能影响很实际：去掉一个 box-shadow 或 filter: blur()，首屏渲染快 120ms；而招聘系统 ATS 解析 HTML 时，遇到未知 CSS 属性可能直接跳过整段内容。
导出 PDF 时字体和换行会错乱？用 print 媒体查询硬控
Chrome 直接“另存为 PDF”常导致中文断字、链接变蓝底、页眉页脚乱入。这不是浏览器 bug，是你没接管打印样式。
在 style.css 底部加这段：
@@media print {
* { margin: 0; padding: 0; text-shadow: none; }
body { font-size: 12pt; line-height: 1.5; }
a { color: #000 !important; text-decoration: underline; }
header, footer { page-break-inside: avoid; }
section { page-break-inside: avoid; margin-bottom: 1.5rem; }
}关键点：
-
font-size: 12pt是印刷级最小可读字号，比 px 更稳定 -
page-break-inside: avoid防止“工作经验”标题在一页末尾、内容被切到下一页 - 不要依赖 Google Fonts 打印——本地未安装字体时，PDF 会回退为黑体，导致中英文混排行高崩塌；坚持用系统字体栈
- 导出前在 Chrome DevTools 的 Rendering 面板勾选 “Emulate CSS media: print”，实时预览效果
最后提醒一句：极简简历最难的部分，从来不是写 HTML，而是删掉那句“具备良好沟通能力”——它没提供任何可验证的事实，却占了宝贵的 7 个像素高度。
