投递简历时，一份排版精致、交互流畅的在线网页简历，往往比一份冷冰冰的PDF更能打动面试官。尤其对于前端、设计、产品类岗位，HTML5简历本身就是能力的证明。本文将完整讲解如何用HTML5搭建个人简历网页，以及作品集模块的几种主流展示方案，代码可直接复用。
一、简历网页的整体结构与语义化标签
一份简历网页通常包含几个固定模块：个人信息、教育背景、工作经历、技能清单、作品集和联系方式。用HTML5的语义化标签来组织这些内容，不仅让代码可读性更强，对搜索引擎优化也有帮助。头部信息使用<header>包裹，主体各模块用<section>划分，每段经历用<article>表示，页脚联系方式放在<footer>中。
下面是一个典型的结构骨架，建议先把骨架搭好再填充内容，后期维护起来会轻松很多：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>张三 - 前端开发工程师简历</title>
</head>
<body>
<header class="profile">
<img src="avatar.jpg" alt="个人照片">
<h1>张三</h1>
<p>前端开发工程师 | 3年经验</p>
</header>
<main>
<section id="skill">
<h2>技能清单</h2>
<ul>
<li>HTML5 / CSS3 / JavaScript</li>
<li>Vue / React</li>
</ul>
</section>
<section id="experience">
<h2>工作经历</h2>
<article>
<h3>某某科技 - 前端开发</h3>
<p>负责公司官网与后台管理系统的开发...</p>
</article>
</section>
<section id="portfolio">
<h2>作品集</h2>
<div class="works-grid"></div>
</section>
</main>
<footer>
<p>邮箱：zhangsan@ipipp.com</p>
</footer>
</body>
</html>语义化的价值在于结构清晰，面试官查看网页源码时也能感受到你的编码习惯。此外，<section>配合id属性还能实现导航锚点跳转，配合平滑滚动属性即可完成一个简单的单页简历导航。
二、用CSS3提升简历的视觉表现
结构搭好后，视觉层面主要靠CSS3撑起。简历网页不宜花哨，重点是层次分明、留白得当。可以使用CSS自定义属性统一管理主题色，方便后续换肤。技能进度条、时间轴、卡片阴影这些经典效果，用纯CSS就能实现。
以技能进度条为例，借助transition和width动画，可以在页面加载时呈现渐进填充效果：
:root {
--main-color: #2c7be5;
--text-color: #333;
}
.skill-item {
margin-bottom: 14px;
}
.skill-bar {
width: 100%;
height: 8px;
background: #eee;
border-radius: 4px;
overflow: hidden;
}
.skill-bar .fill {
height: 100%;
width: 0;
background: var(--main-color);
border-radius: 4px;
transition: width 1.2s ease-out;
}
/* 页面加载后通过JS设置width触发动画 */
.skill-bar .fill.on { width: 85%; }再配合少量JavaScript监听IntersectionObserver，当技能区域滚动进入视口时再触发动画，整体观感会自然很多。工作经历部分建议做成垂直时间轴，用::before伪元素画轴线和圆点，代码量小且效果好。
三、作品集的三种主流展示方案
作品集是技术类简历的核心，展示方式直接影响面试官的浏览体验。常见做法有三种：网格卡片布局、灯箱大图预览、横向轮播。小型作品不多时推荐网格布局加灯箱预览的组合，作品超过十个再考虑轮播或分页。
网格布局用CSS Grid两行代码就能搞定，且天然支持响应式：
.works-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.work-card {
border: 1px solid #e5e5e5;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: transform .3s, box-shadow .3s;
}
.work-card:hover {
transform: translateY(-6px);
box-shadow: 0 10px 24px rgba(0,0,0,.12);
}点击作品卡片后弹出大图预览，也就是常说的灯箱效果。原生实现思路很简单：准备一个隐藏的遮罩层，点击时把对应图片地址填进去并显示，代码如下：
const mask = document.createElement('div');
mask.className = 'lightbox';
mask.innerHTML = '<img src="" alt="">';
document.body.appendChild(mask);
document.querySelectorAll('.work-card img').forEach(function (img) {
img.addEventListener('click', function () {
mask.querySelector('img').src = this.dataset.full || this.src;
mask.classList.add('show');
});
});
// 点击遮罩关闭预览
mask.addEventListener('click', function () {
this.classList.remove('show');
});如果不想手写轮播，也可以引入Swiper这类成熟库，但简历网页建议保持轻量，一个压缩后不超过10KB的灯箱脚本完全够用。每个作品卡片记得附上项目名称、技术栈和在线访问地址，只放截图不讲技术栈的作品集说服力会大打折扣。
四、移动端适配与线上部署
面试官很可能直接用手机打开你的简历链接，所以移动端适配不能省。最基础的一步是在<head>里写好viewport标签，然后用媒体查询在窄屏下调整布局，比如把双栏改成单栏、缩小头像尺寸、隐藏部分装饰元素。
@media (max-width: 768px) {
.profile {
flex-direction: column;
text-align: center;
}
.profile img {
width: 96px;
height: 96px;
}
.works-grid {
grid-template-columns: 1fr;
}
}部署环节的门槛已经很低。GitHub Pages、Gitee Pages、Vercel或者国内的对象存储静态托管都可以免费上线，把打包好的静态文件推上去就能拿到一个可访问的链接。建议购买一个简短的个性域名绑定上去，把链接放在传统简历的显眼位置。最后别忘了做基础的性能优化：图片压缩成WebP格式、CSS和JS合并压缩、开启HTTPS，这些细节同样是加分项。
总结一下，一份优秀的HTML5在线简历等于清晰的语义化结构、克制的视觉动效、有说服力的作品集展示和流畅的移动端体验。动手做一版，比十份纸质简历更容易让面试官记住你。