简介一套基于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 langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title张三 - 前端开发工程师简历/title link relstylesheet hrefstyle.css /head body header classpage-header h1张三/h1 p求职意向前端开发工程师/p /header div classpage-body main classpage-main section idexperience h2工作经历/h2 ul litime2021.03/time 至今 · 某科技公司 · 前端开发/li /ul /section section idskills h2技能清单/h2 ul liHTML / CSS / JavaScript 基础扎实/li /ul /section /main aside classpage-side idcontact h2联系方式/h2 ul li邮箱zhangsanexample.com/li /ul /aside /div /body /html这段源码里有三个关键点。一是 html 标签的 langzh-CN 配合 head 里的 meta charset少了任何一个源码发到别的机器或在 Git 仓库里克隆后都可能乱码。二是 aside 写在 main 后面视觉上左右两栏由 CSS 决定但源码顺序保持主内容在前屏幕阅读器和搜索引擎拿到的信息顺序是对的。三是每个 section 都预留了 id第四章做锚点导航时直接用不用回头改结构。提示把源码通过聊天软件发给别人时注意别让客户端自动转码或改扩展名另存时选「保持原格式」否则打开会变成纯文本。2.3 HTML 标签选型对照表内容块推荐标签不推荐的写法原因姓名 求职意向h1 pdiv 套 span标题层级对可访问性友好工作经历section h2 ul整段 p 排到底列表结构便于统一间距技能熟练度ul 内嵌 spantable 做进度条进度条是视觉元素不是数据表时间节点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-spacing0.02em 起标题可用正文加太多字会散max-width800 - 960px再宽大屏阅读困难border-radius6 - 10px全局统一一个值section 间距24 - 32px用 calc(var(--space) * 2) 表达标题的字号建议按比例缩放而不是逐个手填h1 用 1.8remh2 用 1.25rem正文 1remsecondary 信息 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 classskillspanHTML/spandiv classbari/i/div/div。百分比建议直接写在内联 style 属性里比如i stylewidth: 80%/i数据归数据、样式归样式后面调整技能值时不用动 CSS 文件。3.5 简历样式和业务网站样式的边界做这类单页最容易犯的错是把业务网站上那套交互全部搬过来。全屏大图、悬停放大、文字逐个浮现屏幕上看很酷导出 PDF 时全部失效甚至把排版顶乱。简历的 CSS 应该维持打印优先颜色有对比但不依赖背景图字体用系统字体而不是网络字体布局在 720px 断点以下完整可读。判断标准很简单——断网、直接双击打开源码文件版面依然完整这份 HTML 简历的 CSS 才算合格。4. 简历源码里的实用交互锚点跳转、打印按钮与最少 JavaScript4.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 一键打印 / 存 PDFwindow.print() 的标准用法简历交付 PDF最可靠的路径就是浏览器打印对话框的「另存为 PDF」。页面上放一个打印按钮绑定 window.print()nav classpage-actions a href#experience工作经历/a a href#skills技能/a a href#contact联系方式/a button typebutton idbtn-print打印 / 存 PDF/button /navdocument.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打印自动忽略打印为 PDFwindow.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 给 macOSMicrosoft YaHei 给 Windows最后 sans-serif 兜底。强调色在黑白打印下可能变成无法区分的灰色技能条里的彩色块要在打印样式里显式改成深灰才能保证复印件上还能分得清轨道和进度。5.3 源码交付前的三个必查项无乱码文件用 UTF-8 保存meta charsetUTF-8 写在 head 最前无溢出A4 纸宽 210mmmax-width 超过 900px 的内容打印缩放后容易超出右边距无白屏断网状态下直接双击打开源码确认没有依赖 CDN 字体和图标库图标全部用内联 SVG 或 Unicode 字符最后一条经验导出 PDF 前在 Chrome 打印预览里勾选「背景图形」再走一遍否则 --bg 和 --accent 色块会全部消失屏幕效果很好但 PDF 变成白纸黑字这是打印样式里最容易漏掉的一步。本文还有配套的精品资源点击获取