简介：一套基于HTML编写的精美个人简历网页源码，面向求职者、在校生及前端初学者，代码简单、通俗易懂，下载后直接使用，用记事本、VSCode、HBuilder或DW等常见工具即可打开编辑个人信息，也能在此框架上扩展更多效果，快速打造酷炫简洁的简历页面。压缩包共31个文件，涵盖2个HTML页面、4个CSS样式、4个JS脚本及15张PNG图片素材，并附字体文件、PSD源文件、操作演示视频和ICO图标等，整体大小26.45MB。目前已有10896人学习下载。包内既有可编辑的PSD分层源文件与全套图片图标，又有演示视频和基础前端代码，既适合直接替换文字生成个人简历，也能作为学习页面布局、交互特效的入门项目，资源组织清晰，便于按需修改和扩展。
1. 把「好看」落到 HTML 源码上：简历网页的第一步是信息架构
一份「好看」的 HTML 个人简历，难点从来不在标签会不会写，而在信息怎么排、颜色怎么统一、打印出来会不会崩。用 HTML 源码做简历，最大的好处是改一行字体、换一个色值，刷新就能看见结果，不会被 Word 版式或 WPS 模板牵着走；文件发给别人，双击就能打开，不依赖任何软件环境。
这个标题背后是一套完整的前端基本功：语义化 HTML 标签、CSS 布局与响应式、打印样式，以及最少量的 JavaScript。适合三类人——正在投简历的求职者、要交网页设计作业的学生、想长期维护一份在线简历的开发者。
下面按骨架、样式、交互、打印四层往下拆。每一层都给出能直接复制的源码片段、参数说明和踩坑点，你可以把代码存成 resume.html 边看边改，改完用浏览器预览，整个流程不依赖任何构建工具。
2. 用 HTML 标签搭简历骨架：语义化结构决定样式上限
2.1 语义化标签怎么选：简历不是一张图片
简历页和普通网页不一样，内容固定、版面有限，但消费场景很多：屏幕预览、PDF 导出、纸质打印。HTML 标签选得对，后期加样式几乎不用动结构。常见做法是把整页拆成三段：header 放姓名和求职意向，main 放工作经历与项目，aside 放联系方式与技能。标题从 h1 往下分级，条目列表用 ul，日期用 time 标签包裹。
为什么不直接用 div 一把梭？因为简历源码的读者不只是浏览器，还有屏幕阅读器、搜索引擎和未来的你。div 套 div 的写法在样式阶段会发现所有元素都是同级，想统一间距得给每个 div 单独写类名；而 section 和 aside 本身就携带语义，浏览器默认样式和打印样式都能顺着语义自动收敛。html 标签选型这一层省下的时间，会在后面调 CSS 时成倍还回来。
2.2 最小可运行的简历 HTML 源码
下面是一份可以直接存成 resume.html、双击在浏览器打开的源码，结构刻意保持简单，方便替换内容：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>张三 - 前端开发工程师简历</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="page-header"> <h1>张三</h1> <p>求职意向：前端开发工程师</p> </header> <div class="page-body"> <main class="page-main"> <section id="experience"> <h2>工作经历</h2> <ul> <li><time>2021.03</time> 至今 · 某科技公司 · 前端开发</li> </ul> </section> <section id="skills"> <h2>技能清单</h2> <ul> <li>HTML / CSS / JavaScript 基础扎实</li> </ul> </section> </main> <aside class="page-side" id="contact"> <h2>联系方式</h2> <ul> <li>邮箱：zhangsan@example.com</li> </ul> </aside> </div> </body> </html>这段源码里有三个关键点。一是 html 标签的 lang="zh-CN" 配合 head 里的 meta charset，少了任何一个，源码发到别的机器或在 Git 仓库里克隆后都可能乱码。二是 aside 写在 main 后面，视觉上左右两栏由 CSS 决定，但源码顺序保持主内容在前，屏幕阅读器和搜索引擎拿到的信息顺序是对的。三是每个 section 都预留了 id，第四章做锚点导航时直接用，不用回头改结构。
提示：把源码通过聊天软件发给别人时，注意别让客户端自动转码或改扩展名，另存时选「保持原格式」，否则打开会变成纯文本。
2.3 HTML 标签选型对照表
| 内容块 | 推荐标签 | 不推荐的写法 | 原因 |
|---|---|---|---|
| 姓名 + 求职意向 | h1 + p | div 套 span | 标题层级对可访问性友好 |
| 工作经历 | section > h2 > ul | 整段 p 排到底 | 列表结构便于统一间距 |
| 技能熟练度 | ul 内嵌 span | table 做进度条 | 进度条是视觉元素，不是数据表 |
| 时间节点 | time 标签 | 纯文本日期 | 语义明确，后续可做数据提取 |
| 整页容器 | div 包 main + aside | 给 body 直接加 flex | 保留 body 默认流，打印好控制 |
类名命名也值得统一。page-header、page-body、page-main、page-side 这组前缀用 page，含义是「简历这个页面的区块」；如果以后把简历源码和项目作品混在一个仓库里，建议统一换成 resume- 前缀。命名一致性对后期换肤影响很大，特别是 CSS 独立成文件之后，改一个前缀别名就能替换整套样式。
2.4 编辑器、格式化与预览的常见姿势
写简历源码不需要复杂环境。VS Code 装一个 Live Server 插件，改完保存浏览器自动刷新；不装插件直接双击 HTML 文件也能预览，只是每次修改后要手动刷新。格式化建议开编辑器自带的 format on save，但别用会把长 class 名强制换行的配置，否则源码 diff 时噪音太大。
另外，样式文件从第一天就独立成 style.css，用 link 引入。这样换配色、换版式只需要动一个文件，配合浏览器 DevTools 的快速预览，整个 html 网页制作过程比把样式写死在标签里好维护得多。
3. 用 CSS 把简历调好看：布局、配色与字体的落地参数
3.1 用 CSS 变量统一设计参数
「好看」和「乱」之间往往只差一套统一的设计参数。简历页最常见的翻车现场是：主色在标题写 #2c3e50，在分割线写 #34495e，在侧栏背景又写一遍，改主题时改不干净。CSS 自定义属性（CSS 变量）把整组值集中在 :root，所有地方引用变量名，改一处全页生效：
:root { --primary: #2c3e50; /* 标题、正文主色 */ --accent: #c0392b; /* 强调色，只用于关键元素 */ --bg: #f5f6fa; /* 页面底色 */ --card: #ffffff; /* 内容卡片背景 */ --text: #333333; /* 正文文字 */ --muted: #7f8c8d; /* 次要信息 */ --space: 16px; /* 间距基准 */ --radius: 8px; /* 圆角基准 */ --content-max: 900px; /* 内容最大宽度 */ }使用位置统一写 var(--text)、var(--card) 这类引用。间距不要在每个 section 写死 24px 或 32px，而是用 calc(var(--space) * 2) 表达倍数关系。强调色 --accent 只留给姓名下方的短横线、时间节点的小圆点，一个页面里主色、强调色、文字色加底色共四种色值，是简历这种单页文档最稳的上限，超过四色基本就会往「花」的方向走。
3.2 两栏布局与响应式断点
简历最稳的版式是左宽右窄的两栏：main 放经历，aside 放联系方式和技能。flex 布局一行排出来：
.page-body { display: flex; gap: var(--space); max-width: var(--content-max); margin: 0 auto; padding: calc(var(--space) * 2); } .page-main { flex: 2; min-width: 0; } .page-side { flex: 1; background: var(--bg); border-radius: var(--radius); padding: var(--space); }flex: 2 和 flex: 1 是 flex-grow 的简写，表示主栏占两份、侧栏占一份。min-width: 0 是最容易漏的一行——不加时，内容很长的 ul 会把 flex 子项撑出容器，中文还好，带上长英文单词或 GitHub 链接就会横向溢出。响应式用 720px 断点，窄屏时侧栏掉到主内容下方：
@media (max-width: 720px) { .page-body { flex-direction: column; padding: var(--space); } .page-side { margin-top: var(--space); } }提示：720px 断点覆盖 iPhone 横屏和大部分 Android 手机宽度，定完断点后用 DevTools 的设备模拟器逐个机型过一遍，别只拖窗口大小。
3.3 字体、行高与标题参数速查表
视觉质感一半靠字体。中文字体栈写三个候选：font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; 系统按顺序匹配，macOS 落苹方，Windows 落微软雅黑，再不行落到无衬线兜底。下面是简历样式最常用的一组参数：
| 参数 | 推荐值 | 作用与坑 |
|---|---|---|
| line-height | 正文 1.7，标题 1.4 | 正文太挤难读，超过 2.0 显稀疏 |
| letter-spacing | 0.02em 起 | 标题可用，正文加太多字会散 |
| max-width | 800 - 960px | 再宽大屏阅读困难 |
| border-radius | 6 - 10px | 全局统一一个值 |
| section 间距 | 24 - 32px | 用 calc(var(--space) * 2) 表达 |
标题的字号建议按比例缩放而不是逐个手填：h1 用 1.8rem，h2 用 1.25rem，正文 1rem，secondary 信息 0.875rem。rem 相对于根字号，用户浏览器默认字号变了，整份简历跟着等比缩放，不会出现某一段文字溢出卡片的情况。
3.4 技能条：纯 CSS 的进度条写法
技能熟练度不建议写「精通 / 熟悉」，主观且占地方。用 6px 高的轨道加内嵌元素实现进度条，纯 CSS 即可：
.skill { display: flex; justify-content: space-between; align-items: center; } .skill .bar { position: relative; width: 60%; height: 6px; background: #e8e8e8; border-radius: 3px; overflow: hidden; } .skill .bar i { display: block; height: 100%; width: 80%; /* 熟练度，按实际情况改 */ background: var(--accent); border-radius: 3px; }对应 HTML 是<div class="skill"><span>HTML</span><div class="bar"><i></i></div></div>。百分比建议直接写在内联 style 属性里，比如<i style="width: 80%"></i>，数据归数据、样式归样式，后面调整技能值时不用动 CSS 文件。
3.5 简历样式和业务网站样式的边界
做这类单页最容易犯的错，是把业务网站上那套交互全部搬过来。全屏大图、悬停放大、文字逐个浮现，屏幕上看很酷，导出 PDF 时全部失效，甚至把排版顶乱。简历的 CSS 应该维持打印优先：颜色有对比但不依赖背景图，字体用系统字体而不是网络字体，布局在 720px 断点以下完整可读。判断标准很简单——断网、直接双击打开源码文件，版面依然完整，这份 HTML 简历的 CSS 才算合格。
4. 简历源码里的实用交互：锚点跳转、打印按钮与最少 JavaScript
4.1 锚点导航：一行 CSS 加一个偏移属性
简历超过一屏就该有导航。头部放几个 a 标签，href 指向第 2.2 节预留的 section id，配合两条 CSS 就能实现平滑滚动且不遮标题：
html { scroll-behavior: smooth; } section { scroll-margin-top: 80px; }scroll-margin-top 的作用是锚点定位时给 section 顶部留出偏移，防止标题被固定导航盖住。没有这个属性，点导航跳过去，标题正好藏在导航后面。整个方案零 JavaScript，滚动条操作、键盘 Tab 聚焦都天然支持，也不会影响打印输出。
4.2 一键打印 / 存 PDF：window.print() 的标准用法
简历交付 PDF，最可靠的路径就是浏览器打印对话框的「另存为 PDF」。页面上放一个打印按钮，绑定 window.print()：
<nav class="page-actions"> <a href="#experience">工作经历</a> <a href="#skills">技能</a> <a href="#contact">联系方式</a> <button type="button" id="btn-print">打印 / 存 PDF</button> </nav>document.getElementById('btn-print').addEventListener('click', function () { window.print(); });两个注意点。第一，按钮的 type 必须写成 button，否则放进 form 里会触发表单提交。第二，打印对话框弹出后，用户要在目标打印机里手动选「另存为 PDF」，这一步无法用代码代劳，属于浏览器安全限制。还有一条经验：触发打印前不要做异步操作，比如先请求头像图片再 print，内容没加载完就出 PDF，打印出来是空的。
屏幕上的打印按钮要给一套自己的样式，比如固定定位在右上角；进入打印时再把它隐藏，避免 PDF 里多一个悬浮按钮。这个隐藏逻辑放在后面 5.1 的 @media print 里统一处理，HTML 和 JS 都不用动。
4.3 简历交互功能对比表
| 交互效果 | 实现方式 | 推荐度 | 原因 |
|---|---|---|---|
| 平滑滚动 | scroll-behavior: smooth | 推荐 | 一行 CSS，打印自动忽略 |
| 打印为 PDF | window.print() | 推荐 | 浏览器原生，兼容性最好 |
| 一键返回顶部 | a href="#top" 锚点 | 按需 | 简历内容短就不需要 |
| 打字机动态 | JS setInterval | 不推荐 | 打印时内容不完整 |
| 视差滚动 | JS 监听 scroll | 不推荐 | PDF 导出会坍缩成一张长图 |
简历的 JavaScript 总量应该控制在十几行以内。能用 CSS 表达的效果就不写 JS，打印时不需要的元素一律交给 @media print 隐藏。交互做减法这件事，在简历源码里比在业务系统里更考验取舍——看简历的人大概率会导出 PDF 或直接打印，而不是在浏览器里慢慢滑动。
5. 打印样式与简历自检：@page 边距、字体降级和三个必查项
5.1 @page 控制纸张边距
打印时纸张边距由 @page 规则决定，写在 @media print 内部：
@media print { @page { size: A4; margin: 12mm; } body { background: #fff !important; } .page-actions { display: none; } .page-side { background: #fff; border: 1px solid #ccc; } }size: A4 锁定纸张型号，margin: 12mm 控制四周边距。如果只用 body 的 padding 代替，屏幕和打印的宽度会不一致，导出 PDF 后四周留白忽大忽小。侧栏的 --bg 底色在打印对话框默认不输出背景图形的情况下会变白，加一个细边框才能保住分区感。
5.2 字体降级与黑白可读性
打印环境字体不如浏览器齐全，字体栈的降级顺序决定实际显示效果："PingFang SC" 给 macOS，"Microsoft YaHei" 给 Windows，最后 sans-serif 兜底。强调色在黑白打印下可能变成无法区分的灰色，技能条里的彩色块要在打印样式里显式改成深灰，才能保证复印件上还能分得清轨道和进度。
5.3 源码交付前的三个必查项
- 无乱码：文件用 UTF-8 保存，meta charset="UTF-8" 写在 head 最前
- 无溢出：A4 纸宽 210mm，max-width 超过 900px 的内容打印缩放后容易超出右边距
- 无白屏：断网状态下直接双击打开源码，确认没有依赖 CDN 字体和图标库，图标全部用内联 SVG 或 Unicode 字符
最后一条经验：导出 PDF 前，在 Chrome 打印预览里勾选「背景图形」再走一遍，否则 --bg 和 --accent 色块会全部消失，屏幕效果很好但 PDF 变成白纸黑字，这是打印样式里最容易漏掉的一步。
本文还有配套的精品资源，点击获取
