昨天有个做设计的小伙子找我，说想搞个个人网站展示作品。我看了一眼他之前找外包做的，好家伙，加载慢得像蜗牛，而且改个字体还得求爷爷告奶奶。我就说，兄弟，你学点前端基础，自己写个html个人简历代码，不仅省钱，还显得你有技术范儿。

其实很多人怕写代码，觉得那是程序员的事。真不是这样。写个简单的简历页面，比做顿饭还简单。你不需要懂什么复杂的算法，只要会复制粘贴，稍微改改字就行。

先说为啥要自己写。第一，免费。市面上那些好看的模板，动辄几百上千，还带一堆你没用的功能。第二，快。你想改个颜色，加张照片，打开文件编辑器，保存，刷新浏览器，完事。不用等客服响应，不用排队。第三，SEO友好。搜索引擎喜欢干净、结构清晰的代码，你自己写的，比那些套壳的模板更利于搜索排名。

咱们直接上干货。建一个文件夹，里面放两个文件：index.html和style.css。这是最基础的架构。

在index.html里，先写骨架。

张三

前端开发工程师

关于我

热爱技术，喜欢折腾...

工作经历

• 2020-至今：某科技公司

这段代码看着挺长，其实全是标签。header是头部，section是区块，footer是底部。就像搭积木一样，把你要放的内容塞进去就行。注意看，我在title里写了“我的个人简历”，这有助于搜索引擎理解页面内容。

接下来是style.css，负责打扮。

body {

font-family: Arial, sans-serif;

max-width: 800px;

margin: 0 auto;

padding: 20px;

background-color: #f4f4f4;

}

header {

text-align: center;

padding: 50px 0;

background-color: #333;

color: white;

}

section {

background: white;

margin: 20px 0;

padding: 20px;

border-radius: 5px;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}

这里用了max-width限制宽度，让页面在手机上也不会撑得太开。背景色用了浅灰，内容区用白色卡片样式，这是现在很流行的极简风。

很多人写到这步就卡住了，觉得太麻烦。其实你可以找个现成的html个人简历代码模板，下载下来，把里面的文字替换成你自己的。别怕改坏，大不了删了重来。

有个小细节要注意，图片一定要压缩。别直接扔一张几MB的原图进去，那样加载速度能把你急死。用TinyPNG这种工具压缩一下，清晰度没差多少，体积能小一半。

还有，别忘加meta标签里的description。

这行代码虽然看不见，但百度蜘蛛能看见。它决定了搜索结果里显示的那段简介。写得好，点击率能高不少。

我刚开始做这行的时候，也爱买模板。后来发现，每次改个联系方式都要找客服，太累了。自己写虽然前期花点时间，但后期维护那是真香。特别是当你需要加个新的项目展示，或者换个配色方案，随时都能动手。

当然，写代码难免出错。比如我上次就把