用HTML写简历：从结构搭建到打印PDF的完整实践指南-北京尧图网络

最近有朋友找我改简历他在文档排版软件里调了快一下午导出之后字体忽大忽小列表缩进对不齐最后一栏内容还被截掉一截。我让他把内容原样给我然后新建了一个HTML文件半小时后交回去一份打印出来不变形、看着很清爽的简历。他一直以为HTML简历是技术圈人才会玩的东西其实它就是一份网页文件只是把简历内容用网页的方式去描述和排版而已。这篇文章把我做HTML简历的完整思路写下来从简历内容怎么拆模块、结构怎么搭、样式怎么调到打印和导出PDF时那些最容易翻车的细节一条条说清楚。不管你是程序员还是只写过一点网页的新手照着这套思路都能做出一份拿得出手的个人简历。1. 为什么放着现成的排版软件不用偏要用HTML写简历先说个反直觉的结论用HTML写简历不是技术在炫技而是它刚好解决了简历排版中最常见的“失控感”。在所见即所得的文档工具里你看到的效果和最终打印出来的效果之间总会隔着一层“魔法”。明明屏幕上对齐了换个版本导出又错位默认字体、自动编号、粘贴时的格式残留会在你完全没注意的地方悄悄搞事。HTML恰恰相反每一个像素、每一条间距都是代码里明确写死的没有默认干扰也没有隐形的格式继承。1.1 简历排版的最大痛点其实是“失控”你可以回想一下被文档工具支配的经历一段从旧文档里粘贴过来的内容把整个段落样式带乱标题字号不小心用了某个内嵌模板换台电脑就整体变掉导出PDF时某一页莫名其妙多出半行空白。这些问题的本质都是同一件事——你并没有真正控制这份文档。HTML写简历时同样的场景完全不同。文件的呈现由浏览器解析HTML和CSS决定而这些都是纯文本代码。字号是多少就是多少行距是多少就是多少浏览器不会好心替你“自动修正”。我把这种掌控感叫作“所见即所得之上的另一层确定性”你在代码里看到的和打印出来的是同一套逻辑。1.2 代码化简历的三个实际好处第一方便版本管理。简历要改是很频繁的事投不同岗位可能要微调经历顺序突出不同技能。HTML文件是纯文本放进任何版本管理工具都能保留每次改动的过程出问题了随时回退。第二一份代码多处使用。同一个HTML文件可以本地打印可以右键另存为PDF可以放到某个静态托管平台变成在线简历链接甚至可以复制到邮件正文里直接发。换一套CSS白色简历能变成深色主题不用重写内容。第三排版能力非常精确。两栏布局、工作时间右对齐、技能标签横排、页脚固定这些都是HTML和CSS的“日常操作”在传统文档工具里反而是要折腾半天的东西。1.3 适合谁来掌握写HTML简历这件事门槛其实比想象中低。你不需要懂JavaScript不需要会任何框架只要能理解几个标签和一小段CSS就够。我见过不少非技术背景的求职者用这套方法做出了比模板简历精致得多的效果。所以这篇文章的目标读者很简单想让简历排版更可控、更专业的人无论基础如何都可以往下看。2. 让简历内容先于样式模块划分与信息排序很多初学者一上来就盯着样式纠结配色和字体结果内容结构一团乱。我的习惯是先完全不想样式只把简历当一篇结构化的文章来拆解。内容模块定清楚了后面写HTML和CSS都顺很多。2.1 简历内容由哪些模块构成一份常见的中文简历基本逃不出这几块模块内容HTML对应建议个人信息姓名、电话、邮箱、所在地header / 联系人间距求职意向目标岗位、期望城市、薪资范围简短段落教育经历学校、专业、学位、时间段结构化列表工作经历公司、岗位、职责、业绩条目列表项目经历项目名称、角色、技术点、结果条目列表技能清单技术栈或核心能力标签列表是不是感觉这些模块之间差异很大这就是先用HTML语义化去划分它们的原因教育经历和工作经历天然是“列表型条目”技能手机天然是“标签型条目”把它们放到合适的标签里后面排版会省很多事。2.2 信息排序的优先级原则与篇幅分配简历不是自传阅读者希望在最快时间内看到你最有价值的信息。根据我个人经验排序原则就一句话用“相关性和时间线”做双重排序。求职场次优先于学历如果是社招简历工作经历应该排在教育经历前面应届简历则教育经历在前。时间都是倒序最近的经历放最前面。篇幅按“目标岗位的匹配度”分配一段过往经历如果和求职岗位强相关多写几行弱相关点到为止甚至可以直接不写。字体篇幅上也给个参考一页纸简历适合应届生和三五年经验内的人两部分经历内容控制在4个条目以内资产较丰富、有大量项目成果的人可以自然延伸到两页但不要为了撑页面而把不重要的经历灌进去。2.3 一个实用的内容检查思路写完模块后我建议做一个“30秒速读测试”。让一个不熟悉你情况的人只扫一眼你的简历看能不能在30秒内说出你以前在什么行业、做过什么类型的岗位、有哪些核心技能。如果不能说明信息排序还是有问题赶紧调整。这个测试做完之前不要碰任何样式。3. 别急着写样式先用语义化标签把骨架搭稳我见过太多简历HTML是把整页内容堆在一堆无意义的div里后续想要打印优化或做样式调整就变得非常痛苦。HTML里那些看起来“只是不同名字的盒子”的标签其实各自有各自的含义用对了会让整个页面结构清晰很多。3.1 为什么简历和网页一样需要语义化语义化标签的好处有两层。一层是给浏览器理解的header、main、section这些标签让网页结构更清楚屏幕阅读器能更好地把内容朗读给视障用户。另一层是给你自己理解的三个月后再打开这份代码看到section classwork-experience立刻知道这一块是工作经历不用根据内容反推。简历篇幅很短不一定需要footer这种元素但main、section、header这三个非常值得用。它们对应的就是一种很自然的简历结构main是整份简历header是姓名和联系方式section是每个大模块。3.2 常用标签在简历里的具体用法拿一份简历从头到尾看h1只保留给姓名。不要滥用整份简历只有一个大标题。h2用作每个模块的小标题比如“教育背景”“工作经历”“项目经历”。h3用来做每条经历的岗位名称或项目名称。联系方式的电话、邮箱、地址用ul列表而不是用一串文本硬拼这样后面做间距和换行都方便。技能标签、项目里的一句话说明都可以用ul li表达。很多人会问为什么不用table两列排开表格在语义上适合展示关系型数据而简历里的工作经历、时间、岗位之间不是表格关系用列表反而更容易控制。3.3 全局样式的重置与基础设置浏览器自带默认样式比如body会有8px的外边距h1到h6自带不同的字号和粗细ul自带项目符号和左内边距。这些默认值如果不处理简历就会显得“原生态”。所以在CSS第一行我会先做一次简单的全局重置* { margin: 0; padding: 0; box-sizing: border-box; }然后给整个页面设置基础样式相当于给“地基”定了标准body { font-family: PingFang SC, Microsoft YaHei, Noto Sans CJK SC, sans-serif; font-size: 14px; line-height: 1.6; color: #333333; background: #f2f2f2; }这段基础样式看着简单但影响非常大字号统一了行距统一了颜色统一了页面背景和简历卡片背景分开了。后面所有精细调整都在这套基础上进行。4. 排版细节一次讲清字体、间距、配色与两栏布局骨架有了接下来是让简历“看起来专业”的排版段。这里我先把话说在前头简历排版好看与否80%取决于字体、间距和留白而不是花哨的边框和背景色。4.1 字体系统的选择中文字体有一个比较麻烦的特点不同操作系统默认自带的中文不同所以不要指望写一个字体名就能在所有人电脑上一致显示。我的做法是用一个字体栈把它放在body上font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans CJK SC, Source Han Sans SC, sans-serif;这个字体栈的意思是从左到右尝试新的苹果系统用苹方Windows用微软雅黑Linux通常装有思源黑体实在都没有就回退到无衬线字体。实际打印时只要本机有其中一种就能正常显示。字号方面我的经验值是这样姓名用26px到28px模块标题用16px正文内容用14px次要信息比如时间、地点、联系方式用13px。简历最忌讳正文字号超过15px否则一眼看上去就像文档编辑器的默认大字。4.2 间距系统与行高的拿捏间距是简历版式里最容易被忽视也最决定成败的因素。我自己有一个简单的间距体系模块与模块之间24px到32px模块标题与内容之间14px到18px单个经历条目之间14px到16px条目的标题行与补充说明之间4px到6px行高保持1.5到1.6比较舒适太紧会挤太松会浪费空间。有一个很实用的技巧同一份简历里间距的值最好都能被4整除比如16、20、24、28、32这样垂直方向看过去会非常规律。4.3 颜色搭配的克制原则简历不是海报内容为王颜色只是辅助。我通常只用三个层次的色值标题和关键信息接近黑色比如#222正文内容深灰色比如#444辅助信息更浅的灰色比如#777除此之外只选一个强调色用在姓名、模块标题下划线或技能标签上。强调色不要是那种非常艳丽的荧光色成熟的蓝色系是大多数人的安全选择。三色体系的好处是打印成黑白后依然层次分明不会因为去掉颜色就变成一团灰。4.4 两栏布局的flex和grid实现布局层面中文简历最常见的方案是两栏左边窄栏放技能、教育等偏静态的信息右边宽栏放工作经历和项目。用CSS的Grid布局来做这件事非常干净.resume-body { display: grid; grid-template-columns: 240px 1fr; gap: 24px 36px; }把整个简历主体的内容分成左右两列左边固定240px宽右边占剩下的全部空间。这就是“窄栏放辅助信息宽栏放核心经历”的经典结构。需要特别注意的一个问题我会在打印样式里把两栏临时改回一栏。原因后面会细讲这里先记下这个思路。如果你不希望简历在纸上变成两栏可以跳过这个布局方案直接全部用单栏结构也非常适合简历这种线性阅读场景。5. 打印优化HTML简历到底行不行打印说话经常有人问在网页上做得挺好看打印出来怎么这么丑实话实说大多数问题都出在没做打印样式适配。浏览器在打印网页时有一套和屏幕完全不同的规则你必须在CSS里专门告诉它打印时怎么排。5.1 用media print做一套专属打印样式CSS里的media print就是专门为打印准备的媒体查询。凡是写在里面的样式只在打印和导出PDF时生效。下面这套是我每次做简历都会加上的基础media print { body { background: #ffffff; } .resume { box-shadow: none; margin: 0; padding: 0; } .resume-body { display: block; } }第一行把页面底色改成纯白避免打印时大块背景色浪费墨水第三行把屏幕上的卡片阴影去掉第五行是关键让两栏布局在打印时变回单栏这样阅读顺序就和人的自然阅读顺序一致了。5.2 分页与打印区域的控制简历打印最尴尬的瞬间是什么一段经历的上半部分在第一页下半部分跑到第二页或者模块标题留在上一页底部内容却从下一页开始。这两个问题都有对应CSS属性section, .resume-item { break-inside: avoid; }break-inside: avoid的作用是告诉浏览器这个元素的内容尽量保持完整不要被分页截断。简历里每个经历条目、每个模块都应该加上这条规则。控制整份简历占一页纸除了内容本身要精简也可以用page设置打印页边距page { size: A4; margin: 12mm 10mm; }上面这段的意思是打印页默认A4纸张上下留12毫米边距左右留10毫米边距。不同打印机的可打印区域不一样如果你发现内容贴着纸边缘可以适当调大这两个值。5.3 打印导出PDF时的实操顺序这部分不少人问过我直接写成步骤用系统自带或任意的现代浏览器打开HTML文件。按打印快捷键通常是CtrlP或对应系统快捷键。在打印预览里如果看不到背景色记得勾选“背景图形”相关选项。目标打印机选择“另存为PDF”。检查预览里是否有元素被分页截断有就回代码里调整间距或补break-inside。整个流程下来收获的其实不是一份PDF文件而是一份在任何电脑上打开都一样稳定显示的简历版本。6. 一份可直接复用修改的HTML简历完整代码前面几章讲了理论和思路这一节给一份可以直接动手的完整骨架。代码里包含姓名信息、技能标签、两栏布局、打印样式一段一注释。6.1 代码总览HTML与CSS写在同一个文件里为了方便演示和直接复制使用我把CSS放在style标签内、写在HTML文件的头部这样一份文件就能独立工作双击就能在浏览器里打开。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title个人简历 - 王小明/title style /* ---------- 基础重置 ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans CJK SC, Source Han Sans SC, sans-serif; font-size: 14px; line-height: 1.6; color: #333333; background: #f0f0f0; } /* ---------- 简历主体卡片 ---------- */ .resume { max-width: 794px; /* 约A4纸宽度 */ margin: 32px auto; background: #ffffff; padding: 40px 44px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } /* ---------- 头部姓名与联系方式 ---------- */ .resume-header { border-bottom: 2px solid #222; padding-bottom: 18px; margin-bottom: 26px; } .resume-header h1 { font-size: 28px; letter-spacing: 3px; } .contact-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 12px; color: #666666; font-size: 13px; } /* ---------- 主体两栏布局 ---------- */ .resume-body { display: grid; grid-template-columns: 230px 1fr; gap: 20px 32px; } /* ---------- 通用模块标题 ---------- */ .module-title { font-size: 17px; font-weight: 600; border-bottom: 1px solid #e0e0e0; padding-bottom: 6px; margin-bottom: 14px; letter-spacing: 1px; } /* ---------- 侧栏技能与教育 ---------- */ .sidebar section { margin-bottom: 24px; } .skill-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .skill-list li { background: #f5f7fa; padding: 3px 10px; border-radius: 4px; font-size: 13px; } .edu-item { margin-bottom: 14px; } .edu-item p { color: #666666; font-size: 13px; } /* ---------- 主栏工作与项目经历 ---------- */ .experience-item { margin-bottom: 22px; break-inside: avoid; } .item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .item-head h3 { font-size: 15px; font-weight: 600; } .item-meta { color: #888888; font-size: 12px; white-space: nowrap; } .item-desc { margin-top: 6px; color: #444444; font-size: 13px; } .item-desc li { margin-left: 18px; margin-bottom: 4px; } /* ---------- 打印样式 ---------- */ media print { body { background: #ffffff; } .resume { max-width: none; margin: 0; padding: 0; box-shadow: none; } /* 打印时两栏变单栏 */ .resume-body { display: block; } .skills-wrap { margin-bottom: 20px; } /* 链接不要显示长串网址 */ a { text-decoration: none; color: #222222; } /* 每个模块保持完整不被分页切断 */ .experience-item { break-inside: avoid; } } page { size: A4; margin: 12mm 10mm; } /style /head body main classresume !-- 头部姓名与联系方式 -- header classresume-header h1王小明/h1 ul classcontact-list li电话138xxxx1234/li li邮箱xiaomingexample.com/li li所在城市某市/li li个人主页example.com/li /ul /header div classresume-body !-- 左侧窄栏 -- aside classsidebar section h2 classmodule-title技能/h2 ul classskill-list liHTML / CSS/li liJavaScript/li li数据分析/li li项目管理/li /ul /section section h2 classmodule-title教育经历/h2 div classedu-item h3某高校/h3 p计算机科学与技术 · 本科/p p2020.09 - 2024.06/p /div /section /aside !-- 右侧主栏 -- main classcontent section h2 classmodule-title工作经历/h2 div classexperience-item div classitem-head h3某科技有限公司 · 前端开发工程师/h3 span classitem-meta2024.07 - 至今/span /div ul classitem-desc li负责公司后台管理系统的页面开发与重构页面打开速度提升约30%。/li li参与某个跨平台项目的组件库建设沉淀通用组件12个。/li /ul /div /section section h2 classmodule-title项目经历/h2 div classexperience-item div classitem-head h3某电商数据分析平台/h3 span classitem-meta2024.01 - 2024.06/span /div ul classitem-desc li搭建报表页面和可视化模块日均处理订单数据约5万条。/li li制定前端代码规范建立组件复用检查机制。/li /ul /div /section /main /div /main /body /html6.2 这份代码里值得细看的三处设计第一处是.item-head的display: flex; justify-content: space-between。这一小段把所有经历的标题左侧靠左、右侧时间靠右中间距离自动拉开。相比用表格模拟或者手动挤空格这种方式对齐稳定得多也是整个简历里最常用到的功能之一。第二处是打印时的.resume-body { display: block; }。这会让两栏变一栏阅读顺序变成个人信息、技能、教育、工作经历、项目经历。虽然少了视觉上的左右分栏但打印出来非常稳妥特别是过简历筛选工具时单栏的线性文本更容易被准确提取。这也是一份简历在“美观”和“实用”之间最值得妥协的地方。第三处是break-inside: avoid写在.experience-item上。它能防止某个经历条目被分页切断避免出现第一页结尾只有半行字的尴尬。6.3 调试和替换的小方法代码里所有内容都是虚构的示例你只需把文字替换成真实信息动手按自己的情况删减模块。我建议把过程放在本地浏览器里实时预览改一个属性保存后刷新马上能看到效果。为了避免样式越改越乱每改一个重要参数之前先在注释里写下意图不然隔几天再看会忘了当时为什么这么设。7. 写HTML简历这些年踩过的坑最后聊几个我实际使用中遇到过的问题。这些问题不算多严重但一旦中招就很影响体验知道原因后都很容易绕开。7.1 第一个坑打开文件乱码刚用HTML写简历那会儿我用系统自带的文本工具新建文件写完在浏览器打开全是乱码。原因就是文件编码和HTML声明不一致。解决办法很固定在head里写meta charsetUTF-8并且保存文件时选UTF-8编码。如果这两者不一致浏览器就会按自己的猜测去解码。7.2 第二个坑打印后背景色悄悄消失网页上技能标签的浅蓝背景很好看打印出来却变成灰底甚至白底。不是因为打印机省墨而是浏览器打印默认不渲染背景色。如果你必须保留背景色可以在打印样式中加一行* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }不过我个人的建议是简历本身尽量别依赖背景色黑白打印时不加颜色依然能分清层级才是最稳的。7.3 第三个坑字体排版在不同电脑上不一致同一份HTML在Windows和苹果系统上打开字间距、行宽可能都不一样。这里多半是字体渲染差异造成的。解决办法就是前面说的那套字体栈让每个系统优先加载自己最擅长的中文字体同时保持正文字号采用固定像素值不要用相对单位加水。打印PDF最好在你自己常用的一台电脑上完成这样能确保最终交付版和你的预期一致。7.4 第四个坑两栏布局用float或定位来实现虽然旧的CSS方案也能排版但用float或者绝对定位做两栏简历打印时极其容易错位。特别是当你给内容加了break-inside: avoid之后浮动元素的分页行为在不同浏览器里差异很大。我统一改用Grid或Flexbox之后这类问题基本没再出现过。新写简历的人没必要再回头踩老技术的坑。7.5 第五个坑往简历里堆链接留下长串网址简历里附加个人主页或作品链接时如果链接本身很长打印出来后会在页面上显示一串带下划线的网址非常影响美观。处理方式是把链接文字写得短一点比如“个人主页”四个字然后在打印样式里把color改回黑色、去掉下划线。前面代码里已经给了对应片段实际操作起来效果立竿见影。最后再分享一个小习惯我每次写完简历都会顺手在底部加一个CSS变量定义强调色比如把模块标题的边框色、姓名颜色都指向同一个变量。这样后来想换主题时只要改一处整份简历就跟着变了。写HTML简历这件事一旦把骨架和样式分开想清楚后续每一次调整都会变得越来越快。

用HTML写简历：从结构搭建到打印PDF的完整实践指南

相关推荐

Kotlin 与 Flutter 移动端开发选型深度对比：从原理到实践

Apollo 6.0感知模块hdmap_roi_filter原理与实操配置详解

LAMMPS SPIN 包磁交换相互作用详解：pair_style spin/exchange 与 spin/exchange/biquadratic 的模型、参数拟合与源码实现

更多资讯

从bf16到8-bit量化：InternVL3-9B-Instruct模型加载与显存优化完全指南

SentinelX Core：基于MCP协议的AI内网服务安全调用网关

大模型API统一接入与认证中心设计：微服务安全实践

MCreator 实体振动机制实战：「接收振动时」流程的参数详解与源码原理

FPGA实现AD9653四通道125M ADC采集：LVDS接收与SPI配置

Multi-DBSCAN多密度聚类算法解析与Python实践

今日更新

NetSpot 实战：用信道分析与频宽优化解决 Wi-Fi 卡顿

C++ split() 字符串分割的五种实现与性能实测

R语言坐标轴范围设置：从xlim/ylim到coord_cartesian的完整指南

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？