简介：这是一款面向求职者的响应式简历网站模板，以绿色为主色调，整体清新自然，适合需要在线展示个人技能与工作经历的求职者使用。压缩包共50个文件，容量约1.38MB，包含HTML页面、CSS样式表、JavaScript交互脚本、JPG/PNG图片素材以及eot/woff/ttf字体图标资源，核心页面与辅助代码分离，并附有说明文档，便于快速修改与部署。目前已有799人学习下载。模板内置个人信息、教育背景、工作经验、技能展示等完整模块，采用HTML5语义化标签与响应式布局，可自动适配桌面、平板与手机屏幕；同时搭配CSS3渐变、阴影动画和jQuery交互特效，让简历浏览过程更具层次感；语义化标签也有利于搜索收录。用户既可以替换文字、图片与配色来匹配不同岗位需求，也能通过阅读源码学习响应式布局、Bootstrap组件、字体图标引入和表单验证等前端开发技巧，是一份兼顾求职演示与自学实践的优质素材。
1. 一份绿色 HTML5 简历模板值得下载吗：先从格式问题说起
前阵子帮一个朋友收拾简历，他发来的 Word 文档在我电脑上打开，字体错位、表格线消失，导出 PDF 后页边距又和原稿完全不是一个东西。后来我把他的信息填进这份绿色 HTML5 个人简历模板，几分钟内完成，邮件发出去再没收到关于格式的追问。这份模板本质上是一份纯 HTML + CSS 的单页文档，绿色做主色调，版式不花哨，内容集中在一屏内。用浏览器打开快、打印成 PDF 稳定，省去了和 Word 版本控制较劲的精力。它适合准备求职的从业者，尤其是投递前端、设计相关岗位的人，也适合想用它做作品展示的开发者，直接在模板上换内容就能落地成一份自己的在线简历。
2. 拆开看模板：HTML 文件结构、head 配置与页面区块
下载解压之后，先不要急着打开浏览器按 F12 改颜色。我一般的习惯是先用编辑器把文件树看一遍，搞清楚哪些文件是页面本体、哪些是辅助资源、哪些删了也不影响内容。这样后面无论改内容还是排查问题，都不会改错文件。
2.1 文件清单与职责边界
这套模板最常见的组织方式是 index.html 放全部结构，css/style.css 放样式，js/main.js 放交互，头像和图标单独放 img 目录。拆包后建议先做一个简单的文件清单对比，我整理了一份常见结构：
| 路径 | 作用 | 是否需要改 |
|---|---|---|
| index.html | 简历页面本体，所有文字、区块结构、表单都在这里 | 必改，内容全替换 |
| css/style.css | 颜色、布局、响应式规则、打印样式 | 换色时主要改这里 |
| js/main.js | 导航高亮、技能条动画、滚动监听等交互 | 不需要动效可删 |
| img/avatar.png | 头像占位图，通常是一张正方形图片 | 换成自己的照片 |
| favicon.ico | 浏览器标签页小图标 | 不换也不影响布局 |
这里有一个容易被忽略的边界问题：css 只负责样式，js 只负责行为，两者都不应该往 index.html 里塞内容。很多新手改模板时会发现技能条宽度改了没反应，原因往往是技能条的实际宽度由 js/main.js 里的一段脚本控制，而不是由 CSS 里的 class 控制。如果你不打算保留动效，直接把 index.html 里引用 main.js 的那一行删掉，然后在 HTML 里把每个技能条宽度写成内联样式，效果反而更稳定，打印也不会受脚本加载时机影响。
2.2 head 里的配置：字符集、视口与标题
简历模板能不能正常显示，关键往往不在 body 里，而在 head 里那四五行 meta。模板默认的 head 结构通常是这样的：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>个人简历 - 姓名</title> <meta name="description" content="XX的个人简历，求职方向：前端开发"> <link rel="stylesheet" href="css/style.css"> </head>lang="zh-CN"的作用是告诉浏览器和阅读器这个页面是简体中文，避免部分浏览器按英文分词去解析中文内容；charset="UTF-8"如果缺失，低版本浏览器可能把中文渲染成乱码，这是最基础的排查点。viewport这行决定移动端布局，没有它，手机浏览器会按 980px 宽度渲染页面，简历在手机上打开就会出现横向滚动条。title里的内容我一般会改成“姓名 - 求职方向”，比如“张三 - 前端开发”，这样浏览器标签页和收藏夹里显示得更专业。
2.3 页面区块划分：语义化标签不是摆设
模板把简历分成几个独立区块，不管叫什么名字，核心结构都类似：头部个人信息、关于我、教育经历、技能特长、联系方式。这套模板在结构上用了 HTML5 的语义化标签，而不是全部堆 div。常见划分方式如下：
<header class="resume-header"> <div class="avatar"> <img src="img/avatar.png" alt="张三照片"> </div> <h1>张三</h1> <p class="subtitle">求职意向：前端开发</p> </header> <nav class="resume-nav"> <ul> <li><a href="#about">关于我</a></li> <li><a href="#education">教育经历</a></li> <li><a href="#skills">技能特长</a></li> <li><a href="#contact">联系方式</a></li> </ul> </nav> <main> <section class="resume-section" id="about"> <h2>关于我</h2> <p>一段简要的自我评价，控制在三到五行。</p> </section> <section class="resume-section" id="education"> <h2>教育经历</h2> <!-- 时间线内容 --> </section> </main>header表示页面的头部区域，nav标记导航，main包裹主体内容，section表示一个独立的内容分区。这些标签对样式的影响看起来不大，但对无障碍阅读器和搜索引擎是有实际价值的。比如屏幕阅读器遇到<nav>会直接告诉用户这里是导航区域，用户可以选择跳过；section配上id又同时解决了锚点定位的问题，导航里的<a href="#education">点击后就会滚动到对应的教育经历区块。
这里还有一个选型细节：模板里不同的区块用<section>而不是<article>。原因很简单，简历整体是一个完整的文档，各个区块是它的章节而不是独立可转载的文章，所以section在语义上更准确。如果你要做一份带项目展示页的在线简历，项目卡片才更适合用<article>，因为每张卡片都是自包含的内容。
3. 修改主色调：CSS 变量、HSL 换算与对比度检查
模板默认的绿色看着清爽，但每个人的审美和求职方向不同，主色大概率要换。换色最忌讳的做法是全局搜索绿色代码逐个替换，那样换出来的颜色深浅不一，还会漏掉边框、阴影和 hover 状态。这套模板之所以适合拿来改，是因为它把颜色集中在 CSS 变量里，改一处就全局生效。
3.1 颜色变量：看明白:root里定义了哪些量
打开 css/style.css，在文件最上方通常会看到一段:root变量定义，格式类似这样：
:root { --primary: #2e7d32; /* 主色，用于标题、按钮、分割线 */ --primary-light: #4caf50; /* 浅色，用于 hover 和标签背景 */ --primary-dark: #1b5e20; /* 深色，用于文字和边框强调 */ --bg: #f5f8f5; /* 页面背景，实际掺了一点绿色 */ --text: #333333; /* 正文颜色 */ --muted: #888888; /* 次要说明文字颜色 */ --card-bg: #ffffff; /* 卡片和内容块背景 */ --border-radius: 8px; /* 圆角统一值 */ --max-width: 960px; /* 内容区域最大宽度 */ }变量名的含义比选择器更能说明问题。--primary是主色，用到的地方包括姓名标题、导航高亮、按钮背景；--primary-light一般是 hover 状态和标签底色，比主色浅一档；--primary-dark用于文字强调部分，比主色深一档。修改时我通常只改这三个变量，就可以让整页的色系统一变化。--bg也值得注意，它表面看是灰色，实际上是绿色掺得很浅的灰绿。如果你只换了主色没换--bg，页面背景和按钮之间会产生轻微色偏，视觉效果会有点脏。
3.2 从十六进制到 HSL：换色前先算一眼色相
直接拿一个新绿值替换确实最快，但这样容易丢失一个重要的统一性：整套绿色衍生出来的浅绿、深绿之间的微妙关系。我的习惯是把颜色从十六进制换算成 HSL，先看色相，再决定饱和度和明度怎么改。以模板默认的绿色系为例，常见换算结果是：
| 十六进制 | 色相 H | 饱和度 S | 明度 L |
|---|---|---|---|
| #2e7d32 | 123° | 46% | 34% |
| #4caf50 | 123° | 55% | 50% |
| #1b5e20 | 123° | 66% | 25% |
注意看，这三个颜色的色相都是 123°，它们属于同一个色系，只是饱和度和明度不同。改成你自己想要的蓝色时，最稳妥的做法是保持饱和度、明度比例不变，只把色相 123° 换成目标色相的数值。比如改成偏商务的蓝色，主色可以取色相 210°；改成稳重的深蓝色，主色色相取 220°。浏览器开发者工具里取颜色时不要直接看十六进制，那个色值对视觉的感知帮助不大。打开 DevTools 的 Color Picker，输入框支持直接切换 hex、rgb、hsl 三种格式，直接把三组颜色都看一遍，这样换出来的颜色深浅关系才协调。
3.3 对比度检查与大面积背景的坑
换完颜色之后，表面看着没问题，最容易翻车的是对比度。简历上最常出现的组合是深色文字配浅色背景，比如--primary-dark加--bg，或者--text加--card-bg。我一般会用 DevTools 选中文字元素，在 Styles 面板的颜色气泡里直接看对比度检查结果。正文文字建议达到 4.5:1 以上，这是 WCAG 的 AA 标准；如果是姓名这种大字号标题，3:1 以上视觉上就足够清晰。检查时最常发现的问题是--muted这类灰色说明文字，默认的 #888888 在白底上对比度其实只有 3.2:1 左右，如果简历里有一整段灰色自我评价，阅读起来会很吃力。我会把它调深到 #5a5a5a 左右，保证在正常屏幕和打印件上都看得清。
这里还要提醒一个和打印有关的颜色坑：如果模板里用了大面积的主色背景，比如整个头部是深绿底白字，打印时浏览器默认不会把背景色输出到纸张上。我遇到过不止一次预览很漂亮、导出 PDF 后头部变成白底黑字的情况。处理方式不是改颜色，而是在第 5 章会详细说的打印样式里做调整，或者在设计上直接避免大面积背景，改用白色背景加深色边框来区分区块。
4. 替换个人信息：头像、技能条、经历与联系区块的改法
颜色改完，下一步就是把模板里的假数据全部换掉。这步看起来是纯体力活，但有几个地方如果没搞明白原模板的设计意图，改完之后会出现头像变形、技能条不动、打印出来没有联系方式之类的问题。这一章我把每个区块的替换方式拆开讲。
4.1 个人信息与头像替换：注意 alt 文本和图片尺寸
先用代码看一下头部个人信息通常怎么写：
<header class="resume-header"> <div class="avatar"> <img src="img/avatar.png" alt="张三照片"> </div> <h1>张三</h1> <p class="subtitle">求职意向：前端开发</p> </header>替换头像时，先把你自己的照片裁成 1:1 正方形，压缩到 200KB 以内再放进 img 目录。文件名不要用中文，不要带空格，推荐直接叫 avatar.png 或者 zhangsan.jpg。如果原始照片是竖版 3:4，直接放进模板会触发object-fit的裁切逻辑，照片两边会被裁掉，构图不完整。模板里的.avatar容器通常设置了固定宽高和border-radius，所以换图后要在浏览器里实际看一眼，确认人脸位置没有偏离。alt文本也不要留空，写成“张三照片”或“个人照片”，万一图片加载失败，屏幕阅读器也能读出来这是什么。
4.2 技能条与进度条：改 HTML 还是改脚本，先看 data 属性
技能条是简历模板里最容易改错的地方，有些模板直接写死内联宽度，有些模板用脚本读取data属性初始化。先看静态写法：
<div class="skill">// 常见做法：js 读 data 属性后设置宽度 const skillBars = document.querySelectorAll('.skill'); skillBars.forEach(el => { const level = el.dataset.level || '80'; // 默认取 80 const fillEl = el.querySelector('.skill-bar-fill'); fillEl.style.width = level + '%'; });注意脚本里的dataset.level拿到的是字符串，拼接%之后才是有效的宽度值，不要把它直接当成数字做加减运算，除非你先parseInt(level, 10)。数值也不要带百分号，写成><ol class="timeline"> <li> <time>2018.09 - 2022.06</time> <h3>XX大学</h3> <p>计算机科学与技术 · 本科</p> </li> <li> <time>2022.07 - 至今</time> <h3>XX科技有限公司</h3> <p>前端开发工程师</p> </li> </ol>
把简历底稿替换成真实经历了，有两件事容易忽略。一是时间顺序，简历建议按时间倒序排列，最近的一段经历放在最上面，模板里默认是从前往后写的，需要手动颠倒；二是时间格式要统一，全部写成“YYYY.MM - YYYY.MM”，不要一会中文“年”一会英文连字符，打印出来会显得混乱。用<ol>而不是<ul>的原因很直接：教育经历和工作经历是带顺序的，语义上应该用有序列表；如果项目经历之间不分先后，改成<ul>更合适。
4.4 联系方式：mailto 链接与表单两种呈现方式
联系方式区块是模板里差异最大的地方。有的模板只是放一排 mailto 链接，有的模板带了联系表单，做法完全不同。mailto 方式写起来最简单：
<div class="contact"> <a href="mailto:name@example.com">name@example.com</a> <a href="tel:13800138000">138-0013-8000</a> </div>mailto:点击后调用系统邮件客户端，tel:在手机上点击直接拨号。两种链接在实际打印成 PDF 后都会完整显示，适合投递简历时向 HR 展示联系方式。带表单的版本则可能长这样，用到了 HTML5 新增的表单控件类型：
<form class="contact-form"> <label for="contact-name">称呼</label> <input type="text" id="contact-name" name="name" required> <label for="contact-email">邮箱</label> <input type="email" id="contact-email" name="email" required> <button type="submit">发送</button> </form>type="email"是 HTML5 新增的输入类型，浏览器会校验输入内容是否像邮箱地址，格式不对时点击提交会被拦截，不需要写额外 JS。required表示这个字段不能为空。但注意，本地直接打开 HTML 文件点提交并不会真的发送邮件，表单只是前端界面，真正接收消息需要后端接口或者第三方表单服务。简历模板里如果有表单，我一般建议改成 mailto 纯链接，省心，也避免在求职场景里留下一个点了没反应的按钮。
5. 打印与导 PDF 的常见问题排查：四个必踩的坑
简历最终要落到 PDF，而 HTML 做简历最痛的一环也是在打印。这里把我在实际使用中反复踩过的四个坑列出来，每一条都是现象、原因、解决三连。照着排查一遍，基本能解决八成以上。
5.1 打印样式失效：检查@media print是否真的生效
现象：浏览器预览里样式完全正常，打开打印预览却回到白底黑字的默认排版，导航和按钮全都显示出来，版式混乱。
原因：模板可能没有写@media print规则，或者样式表里有媒体查询但被后面的普通规则覆盖。浏览器打印时会套用默认打印样式，交互类元素不会自动隐藏。
解决：在 css/style.css 末尾加一段打印规则，只保留简历内容的显示：
@media print { .resume-nav, .no-print { display: none !important; } body { background: #ffffff; } .resume-card { box-shadow: none; border: 1px solid #e0e0e0; } }display: none !important是为了强制隐藏导航这类交互元素，避免它们出现在纸张上。body背景强制白底，防止段落式背景色被打印机渲染成灰色。.resume-card去掉投影和圆角，打印件看起来更像纸质简历。加完这段规则后，重新打开打印预览确认生效。
5.2 内容被截断到两页：控制分页符的两种写法
现象：简历内容整体只有一页多几行，打印出来变成两页，第二页孤零零地只有一排字或者一行标题，页脚处还有大片空白。
原因：浏览器默认在块级元素边界处分页。如果你的技能条、时间线里的li横跨两个页面边界，浏览器会把它们切开，第二页就出现了残片。
解决：给这些内容块加上防分页属性，让它们尽量整体落到同一页：
.timeline li, .skill, .resume-section { page-break-inside: avoid; break-inside: avoid; } h2, h3 { page-break-after: avoid; }page-break-inside: avoid是兼容性更好的老写法，break-inside: avoid是新的标准写法，双写覆盖各版本浏览器。page-break-after: avoid的意思是标题后面不要紧跟分页线，防止标题在页尾、内容在下一页。如果加了规则后还是分页，那就不是规则问题，而是总内容量确实超过一页，需要精简文字或者把--max-width调宽一点减少换行。
5.3 中文引号与字体缺失：字体栈里的血泪经验
现象：导出的 PDF 里中文引号变成了方框，英文和数字显示正常，或者整个段落字体看起来像宋体混杂黑体，质感很差。
原因：模板默认字体栈很可能只写了Arial, Helvetica, sans-serif，中文字符落到系统默认字体上；如果模板里用了弯引号，而字体栈里没有加载对应字符集的字体，就会显示成豆腐块。
解决：把正文的字体栈替换成一套中文优先的配置：
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; }-apple-system用于 macOS 和 iOS 的苹方字体；PingFang SC是苹果系中文；Microsoft YaHei覆盖 Windows；Noto Sans CJK SC覆盖 Linux 和大部分在线导出工具。字体栈里的顺序不是随便排的，浏览器会从第一个开始找，找到谁用谁。还要把正文里的弯引号“ ”统一保留为全角形式，不要再把它替换成英文直引号，中文文本里英文引号在打印时容易和中文标点混排，间距会挤。
5.4 背景图形与头像丢失：浏览器打印设置里的开关
现象：预览界面里深绿背景和头像都正常，打印出来的 PDF 却是白底，头像位置是一块空白，或者头像背景完全消失。
原因：大多数浏览器默认不打印背景图形，这是一个浏览器设置，不是 CSS 能单独解决的。头像消失还有另一个常见原因：模板里的头像不是用<img>而是用 CSSbackground-image嵌入的，背景图片在打印时同样会被忽略。
解决：打印对话框里手动勾选“背景图形”选项，Chrome 和 Edge 都在打印预览右侧的“更多设置”里。头像问题需要改 HTML，把背景图方式换回 img 标签：
<!-- 原来是这种 --> <div class="avatar" style="background-image: url(img/avatar.png)"></div> <!-- 改成这种 --> <img class="avatar" src="img/avatar.png" alt="个人照片">注意：打印对话框的“背景图形”勾选状态不会保存，每次打印都要重新确认。
改了<img>之后，记得检查.avatar的 CSS 是否还有background-image相关样式，有的话一并清掉，否则打印时会同时出现一张空白背景图占位和一张正常照片，排版错位。
6. 往模板里再加一点东西：暗色模式与动态技能条
模板改到这一步，基本可以满足“内容正确、颜色统一、能导出 PDF”三个要求。如果还想让投递出去的简历更有记忆点，可以加两个低成本的小功能，一个针对在线打开的场景，一个针对本地查看的体验。
6.1 暗色模式：三行 CSS 覆盖配色变量
在线简历在手机上打开的概率不低，晚上看白色背景会比较刺眼。模板如果坚持用 CSS 变量控制颜色，加暗色模式只需要在样式表末尾写一段媒体查询：
@media (prefers-color-scheme: dark) { :root { --bg: #121212; --card-bg: #1e1e1e; --text: #e0e0e0; --muted: #9e9e9e; } }这段规则会在系统开启深色模式时自动生效，把页面背景和卡片背景变暗、文字调亮。验证方法：在 Chrome DevTools 中按 Ctrl+Shift+P 打开命令面板，输入 Rendering，在 Emulate CSS media feature 下拉里选择prefers-color-scheme: dark，页面会立即切换到暗色效果。注意这里只改了背景和文字，主色--primary不用动，绿色在深色背景上依然保持足够的辨识度。
6.2 动态技能条：让加载过程不僵硬
模板默认的技能条如果只是静态宽度，打开页面时看不出任何反馈。如果想加一点 Loading 感，可以用脚本在页面加载后把宽度从 0 过渡到目标值，顺便用上模板字符串来拼接宽度：
// 动态技能条：读取>.skill-bar-fill { transition: width 0.6s ease; }加动画之前确认一下 style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" />
