从零开始写一份网页版个人简历可能是很多人第一次接触HTML时最想完成的一件事。我当年也是从改一份别人留下的简历模板开始入门前端的说实话这个项目看着小但它几乎把HTML信息架构、CSS排版、页面发布部署全都串了一遍非常适合作为第一个“真实项目”来练手。这篇文章我会完整拆解怎么用HTML写一份能在线打开、能打印成PDF、还能在手机上正常浏览的个人简历。全程不依赖任何框架和复杂工具适合刚学完HTML标签、想动手做点实际东西的同学也适合准备求职、希望简历在面试现场显得更用心的朋友。照着一步步做半小时就能跑出第一版。1. 整体设计与思路拆解1.1 为什么推荐用HTML手写简历我先把话说在前面用HTML写简历绝对不是“折腾”而是几条很实在的优势。先说大家最熟悉的Word。Word排版遇到的问题是“在你电脑上好好的发给别人就乱了”字体丢失、换行错位、页码漂移这些情况几乎每个人都碰到过。而用HTML写简历内容结构和视觉样式是分开的只要浏览器不换引擎打开的效果就基本一致发给谁看都一样。PDF虽然能固定版式但它改起来麻烦每次修改内容都要重新导出还很难嵌入作品演示、链接和交互效果。在线简历生成器倒是省事可模板就那么几套一眼就能认出“这是套的模板”个性化程度有限。用HTML写简历还有一个隐藏价值简历本身就是一个作品。尤其是投技术岗、设计岗、内容运营这类岗位时面试官拿到你的链接看到的不是一张纸而是一个能直接展示你基本能力的网页。页面结构清不清晰、语义标记得规不规范、移动端适不适配、加载快不快这些都是可以被“当场检验”的加分项。哪怕只是把简历做得干净利落也比发一个Word附件更有态度。另外HTML简历天然适合“版本管理”。你可以把每一版简历都保存成一个HTML文件投不同岗位时改几段文字重新导出不用担心覆盖旧版。我自己的习惯是每次改简历都保留一份带日期的文件半年回过头看能很清楚地看到自己能力描述的进化轨迹这对后续面试准备也很有用。1.2 布局方案与选择依据写简历之前先别急着敲代码先想清楚布局。简历毕竟不是论文也不是个人主页它的使用场景决定了布局必须克制。最常见的布局是单栏和双栏两种。单栏布局就是内容从上到下依次排列像论文一样顺序阅读。这种布局稳妥、清晰适合大段文字较多的经历描述也最符合简历的阅读习惯。面试官看简历时视线基本是“从上到下”扫描的单栏不会让他们纠结先看左边还是先看右边。缺点是比较平淡视觉层次感弱一些。双栏布局则是左侧放联系方式和技能右侧放经历和项目信息密度高一屏能放下更多内容。但双栏也有风险如果屏幕宽度不够两栏会被压得很窄打印时两栏宽度不好控制容易挤成一团。我的建议是如果你对HTML和CSS还不算熟练第一次就先做单栏把结构写清楚后面再升级成双栏不迟。硬要在第一版就上双栏大概率会花大量时间在“对齐”上反而耽误了简历内容本身。还有一点容易被忽略简历的目标呈现宽度。不要在电脑上把简历拉满全屏一行文字超过那么多字符人眼是读不过来的。我在做简历时一般会把内容区限制在相对固定宽度这部分后面在CSS里会详细说。1.3 简历内容怎么安排无论用什么技术写简历内容的组织逻辑都一样把面试官最想看到的信息放在最前面把无关紧要的信息往后放甚至删掉。一份典型的网页简历信息模块大概是这样的顺序姓名和求职意向、个人简介、核心技能、工作或项目经历、教育背景、其他补充信息。这其实也是面试官的心理顺序先知道你是谁再判断你能不能干这个活然后看经历支撑最后看学历背景。在HTML里我会把每一个模块对应成一个独立的区块。这样页面结构清晰后续调整顺序也方便。这里提前说一个原则简历不是自传。不要把你从小到大的荣誉全部列上去那不是加分是噪音。面试官在每份简历上停留的时间很有限你的目标是让他在十几秒内抓到重点而不是让他在一堆信息里帮你做减法。所以写HTML简历时先从内容精简开始再谈代码技巧这个顺序不要搞反。2. 核心细节解析与实操要点2.1 先把文档骨架写对用HTML写简历很多人上来就写一堆div结果页面看起来倒是对的但代码结构一塌糊涂。正确的第一步是先把HTML文档骨架写对我指的不是“能用就行”而是让浏览器和搜索引擎都能正确理解你的页面。开头几行是这样的!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content一份简洁的个人简历展示专业技能、项目经历与教育背景 title个人简历 - 某同学/title /head body /body /html这里每个标签都有讲究。DOCTYPE html声明告诉浏览器“请按现代标准渲染这个页面”少了它浏览器可能进入兼容模式导致样式表现异常。langzh-CN声明页面语言对无障碍阅读工具和搜索引擎都有帮助。meta charsetUTF-8解决中文乱码问题这个是中文页面最容易踩的坑后面我会专门说。meta nameviewport则是移动端适配的关键没有这行手机上看的时候页面会被等比缩小文字像蚂蚁一样小。title标签里的内容会显示在浏览器标签页上也是搜索引擎结果里的标题。这里别偷懒写成“无标题文档”我见过好多人简历页面标题还是默认的看起来非常不专业。2.2 用语义化标签组织结构很多人写HTML喜欢全部用divspan这是典型的“标签用得少结构全靠蒙”。HTML提供了很多语义化标签它们在浏览器里看起来可能跟div差别不大但对代码可读性、SEO和辅助阅读工具非常关键。简历页面常用的有这么几个header页面头部放姓名、求职意向、联系方式。main页面主体部分包裹所有核心内容区块。section一个独立的内容分区适合放“教育背景”“工作经历”这样的模块。article一条独立的经历或项目介绍。footer页面底部可以放一句简单的版权声明或更新日期。address专门放联系方式这里更适合写邮件、电话等内容。语义化标签最大的好处是“望文生义”。你三个月后再打开这个HTML文件扫一眼标签就知道每个区块是干嘛的不需要靠注释猜。对搜索引擎来说它也能更准确地理解简历里哪部分是标题、哪部分是描述、哪部分是联系方式。实话实说我自己现在如果看到一段全div的简历代码第一反应就是这人的HTML基础意识还不够。2.3 简历里常见的文本标记细节简历里会有大量时间、地点、公司名、职位名这些信息它们不一定需要表格但可以通过 HTML 标记让它们更清晰。比如教育经历里的时间可以用time标签包裹并带上datetime属性比如ptime datetime2019-092019年9月/time — time datetime2023-062023年6月/time/p这样写的好处是机器能读懂具体时间未来做结构化处理时更友好。再说说强调标签简历里想突出某个成果数字时可以用strong而不是b。strong表示“这部分内容在语义上很重要”b只是单纯加粗没有任何语义。屏幕阅读器读到时strong会改变语气b不会。技能和职责描述我一般用无序列表ul和li组织。很多人写经历时习惯一口气写一大段文字说实话很难读。把一个项目里你做了什么、达到了什么效果拆成两三条要点每一条一行HR扫读起来会轻松很多。列表虽然普通但它是简历里高频使用且最实用的排版武器。2.4 头像、链接和作品集的处理简历里经常需要放头像、个人网站链接或者作品集。这些东西用起来有几个很容易翻车的细节。先从头像说起。如果你要放照片图片要放在项目本地目录中不要直接引用别人服务器上的图片地址。因为外部链接随时可能失效而且简历这种场景也不适合给别人的服务器增加流量负担。图片标签上一定要写alt属性比如alt某同学的证件照这既是无障碍要求也是图片加载失败时给浏览者的说明别偷懒空着。链接方面联系方式可以这样写address p邮箱a hrefmailto:nameexample.comnameexample.com/a/p p电话a hreftel:13800000000138-0000-0000/a/p /addressmailto:和tel:协议能让用户在网页上直接点击发邮件或拨打电话这是纸质简历做不到的体验。如果你有作品集链接外部链接记得加上target_blank让链接在新标签页打开同时加上relnoopener noreferrer防止新页面通过浏览器特性反向操作原页面这是一个安全习惯。很多人只知道target不知道rel这点值得注意。2.5 可访问性与SEO起步说到这有人可能会问简历还要做SEO吗答案是做一点基础的就够了。如果你希望别人能在网上搜到你的名字或者让招聘方更容易把你页面上核心关键词抓出来那基本的SEO和可访问性就有意义。最直接的做法就是保持标题层级清晰。页面里只能有一个h1通常放你的名字然后每个模块用h2模块下面的小项用h3。不要跳级不要为了字体大小把段落文字设成h4这些标签的职责是“定义结构”不是“控制字号”控制字号交给CSS。在head里加一个meta namedescription写一句不超过一百字的页面描述。它不一定会显示在页面上但在搜索结果和分享卡片里会用到。如果是准备投递用的简历还可以在meta里加上关键词比如技术栈名称简单写就行。这里不要堆砌关键词堆了反而容易被搜索引擎当成垃圾内容。3. 实操过程与核心环节实现这一节我们从空文件开始一步一步把HTML简历写出来。我会把代码拆成几块每块都标注清楚作用最后再给一份完整可运行的示例。3.1 建立HTML骨架新建一个文件命名为index.html建议一律用index.html这个名字因为很多静态托管平台默认以它为首页。先写入最基本的骨架!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content个人简历展示页涵盖技能、项目与教育经历 title个人简历 - 某同学/title /head body !-- 页面内容稍后填入 -- /body /html写完这个骨架可以先用浏览器打开确认页面是空白但没有报错。如果你用的是编程类文本编辑器在写代码时注意保存文件编码为UTF-8这一点我后面会强调因为它是中文乱码的头号原因。3.2 个人信息与简介区块在body里先写头部部分。我一般用一个header里面放姓名、求职意向、联系方式以及一句个人简介。header h1某同学/h1 p应聘岗位前端开发工程师/p address p邮箱a hrefmailto:nameexample.comnameexample.com/a/p p电话a hreftel:13800000000138-0000-0000/a/p p个人主页a hrefhttps://example.com target_blank relnoopener noreferrerexample.com/a/p /address p两年相关经验的应届毕业生熟悉HTML、CSS与JavaScript注重细节善于沟通。/p /header注意这里h1只出现一次因为这是整份简历最重要的标题。联系方式放到address里语义上更准确。如果你不想公开完整电话号码可以只写邮箱或微信占位说明但至少要让HR知道怎么联系你。个人简介不用长两三句话讲清楚你的核心定位和最突出的优势即可。3.3 教育背景与工作经历区块接下来是主体内容。我用main包裹里面是两个典型的section对应教育和经历。main section h2教育背景/h2 article h3某高校 / 计算机科学与技术 / 本科/h3 ptime datetime2019-092019年9月/time — time datetime2023-062023年6月/time/p p主修课程数据结构、操作系统、计算机网络、Web开发基础。/p /article /section section h2项目经历/h2 article h3某跨平台系统 / 前端开发/h3 ptime datetime2022-092022年9月/time — time datetime2022-122022年12月/time/p ul li负责页面结构与样式开发按设计稿还原页面效果。/li li优化页面加载速度将首屏加载时间从约3秒降到约1秒。/li li与后端同学配合完成接口联调独立处理了多处兼容性问题。/li /ul /article /section /main这里把每一项经历都用article包裹因为它们是独立的、可引用的内容单元。h3表示经历的名称时间用time标出来。要点用列表写完每一行都尽量带上“做了什么取得什么结果”的结构这样做的好处是信息密度高不会被一大段话淹没。3.4 技能展示与个人信息技能展示是简历里一个很特殊的模块。我的建议是用两列或者标签式的展示不要做得像一台花哨的“仪表盘”。这里我给出一个简单的实现。section h2核心技能/h2 ul listrongHTML / CSS/strong熟练能完成响应式布局与页面还原。/li listrongJavaScript/strong熟练熟悉ES6了解事件处理与异步编程。/li listrongReact / Vue/strong了解能基于现有组件库进行页面开发。/li /ul /section技能不需要用进度条“百分之九十”也不需要用花哨的动效。进度条这种表达看起来很直观但比例本身没有标准反而容易显得随意。尤其在技术岗位简历里直接写“熟练”“了解”“熟悉”这些程度词会比一个虚假的百分比更诚实、更可信。3.5 用一段CSS让它像样只有HTML的简历在浏览器里会使用默认样式字体、间距都比较粗糙。我们加一段基础CSS让页面看起来更舒服。新建一个style.css然后在head里用以下方式引入link relstylesheet hrefstyle.css然后在style.css里写body { max-width: 800px; margin: 0 auto; padding: 24px; font-family: Microsoft YaHei, PingFang SC, sans-serif; line-height: 1.6; color: #333; background: #fff; } header { border-bottom: 2px solid #2c3e50; padding-bottom: 12px; margin-bottom: 16px; } main section { margin-bottom: 20px; } h1 { margin: 0; font-size: 28px; color: #2c3e50; } h2 { font-size: 20px; border-left: 4px solid #2c3e50; padding-left: 8px; margin-top: 24px; } h3 { margin-bottom: 4px; } ul { margin: 8px 0; } a { color: #0077cc; text-decoration: none; } media print { body { max-width: 100%; padding: 0; font-size: 12pt; } }这段CSS做了几件关键事情max-width和margin: 0 auto让内容区在宽屏幕上保持合适宽度并居中line-height决定了行距太挤不好读h2的左边框让模块标题更明显最后用media print做打印优化打印时去掉页边距并把字号稍微扩大避免内容像被压缩过一样看不清。3.6 完整可运行示例把上面各个片段组合起来得到一个完整文件。这里我把常用样式也一并写进去方便你直接复制保存成index.html运行查看。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content个人简历展示页涵盖技能、项目与教育经历 title个人简历 - 某同学/title style body { max-width: 800px; margin: 0 auto; padding: 24px; font-family: Microsoft YaHei, PingFang SC, sans-serif; line-height: 1.6; color: #333; background: #fff; } header { border-bottom: 2px solid #2c3e50; padding-bottom: 12px; margin-bottom: 16px; } main section { margin-bottom: 20px; } h1 { margin: 0; font-size: 28px; color: #2c3e50; } h2 { font-size: 20px; border-left: 4px solid #2c3e50; padding-left: 8px; margin-top: 24px; } h3 { margin-bottom: 4px; } ul { margin: 8px 0; } a { color: #0077cc; text-decoration: none; } media print { body { max-width: 100%; padding: 0; font-size: 12pt; } } /style /head body header h1某同学/h1 p应聘岗位前端开发工程师/p address p邮箱a hrefmailto:nameexample.comnameexample.com/a/p p电话a hreftel:13800000000138-0000-0000/a/p p个人主页a hrefhttps://example.com target_blank relnoopener noreferrerexample.com/a/p /address p两年相关经验的应届毕业生熟悉HTML、CSS与JavaScript注重细节善于沟通。/p /header main section h2教育背景/h2 article h3某高校 / 计算机科学与技术 / 本科/h3 ptime datetime2019-092019年9月/time — time datetime2023-062023年6月/time/p p主修课程数据结构、操作系统、计算机网络、Web开发基础。/p /article /section section h2项目经历/h2 article h3某跨平台系统 / 前端开发/h3 ptime datetime2022-092022年9月/time — time datetime2022-122022年12月/time/p ul li负责页面结构与样式开发按设计稿还原页面效果。/li li优化页面加载速度将首屏加载时间从约3秒降到约1秒。/li li与后端同学配合完成接口联调独立处理了多处兼容性问题。/li /ul /article /section section h2核心技能/h2 ul listrongHTML / CSS/strong熟练能完成响应式布局与页面还原。/li listrongJavaScript/strong熟练熟悉ES6了解事件处理与异步编程。/li listrongReact / Vue/strong了解能基于现有组件库进行页面开发。/li /ul /section /main footer p最后更新time datetime2024-012024年1月/time/p /footer /body /html你可以直接把这份代码保存成index.html双击用浏览器打开看到的就已经是一份能入眼的简历了。这个版本内容相对精简真正做简历时可以根据自己的经历继续往里加区块。关键是先把结构和样式跑通再谈后续优化。3.7 本地调试技巧写HTML简历不需要搭建很复杂的开发环境但有两件事能让调试效率明显提高。第一件用浏览器开发者工具检查页面。在页面里右键选择“检查”可以看到每一个元素的盒模型、实际尺寸和样式。如果你发现某个元素位置不对多半是margin或padding的问题直接在开发者工具里临时调整数值改好了再写回代码里比“改一下刷新一次”快很多。第二件学会用“无痕模式”或“强制刷新”看最新代码。浏览器会缓存CSS修改样式后刷新页面有时还是旧样式这种情况下按住快捷键强制刷新就能看到最新效果。如果你把项目放到本地服务器上跑那调试体验会更好但不是必须的。4. 常见问题与排查技巧实录写HTML简历的过程中有一批问题几乎人人都会遇到。这里把我踩过的坑以及排查思路整理出来按出现频率排序你可以直接对照检查。4.1 中文变成乱码怎么办中文乱码基本只和一个原因有关文件保存编码与页面声明编码不一致。解决办法是两层都做对。第一在HTML的head里写上meta charsetUTF-8告诉浏览器页面按UTF-8编码解析。第二保证编辑器在保存文件时选择UTF-8编码尤其是Windows系统下有的编辑器默认保存为GBK即使声明了UTF-8浏览器也可能读出乱码。如果你用的编辑器保存时可以选择编码就明确选UTF-8不要选“带BOM的UTF-8”也可以但最稳定的是标准UTF-8。如果简历改完在浏览器里还是乱码检查是不是用了太多层字符转换最简单的处理办法新建一个纯文本文件把代码复制进去选择UTF-8重新保存。4.2 样式完全不生效怎么办CSS不生效通常不是CSS写错了而是引用路径或缓存问题。先检查link标签的href是否指向了正确的CSS文件。如果你把CSS文件放在子目录比如assets/style.css那href就要写assets/style.css这个路径是相对当前HTML文件位置解析的。再看CSS文件里的语法是不是少了闭合花括号或分号这类低级错误浏览器一般不会报错只会悄悄忽略。最后排除缓存改完CSS后页面没变化按强制刷新键或者用无痕模式重新打开。我整理一个小表格方便排查现象大概率原因快速处理样式完全没生效CSS路径错误或未引入检查link标签路径刷新后样式还是旧的浏览器缓存强制刷新或换无痕窗口部分元素样式错乱CSS选择器冲突或拼写错误打开开发者工具检查元素中文乱码文件保存编码与charset不一致统一按UTF-8保存4.3 手机上布局错乱怎么办电脑上看好好的手机上一打开就挤成一团这个问题核心原因是缺了viewport声明。确认head里有这行meta nameviewport contentwidthdevice-width, initial-scale1.0没有这行手机浏览器会把页面当成等宽桌面页面缩小显示看起来就像整页被“捏扁”了。加上这行后页面会用手机屏幕宽度来渲染文字和图片大小才会正常。如果加完之后布局还是乱再检查固定宽度。比如CSS里某个元素设了width: 900px在手机上宽度不够就会溢出这种情况优先考虑用max-width代替width并把box-sizing统一设为border-box。我自己写页面习惯在最前面写一段基础重置* { box-sizing: border-box; margin: 0; padding: 0; }这段代码不能少它能让所有元素的宽高计算方式统一排查莫名其妙的“多出来的宽度”时会省很多时间。4.4 打印和导出PDF排版不好很多人用HTML写简历最后还是要导出成PDF发给公司。浏览器打印功能是不错的“免费PDF导出器”但默认打印效果经常让人不满意多出一页空白或者字体过大。解决方法是在CSS里加media print样式就像前面示例代码里那样。它专门作用于打印场景可以对字号、颜色、页边距做单独调整。几个实用的打印优化点设置body在打印时max-width: none去掉屏幕端的限制适当放大正文字号保证打印出来可读如果内容超过一页可以用page-break-inside: avoid避免列表或段落被拦腰截断比如article, li { page-break-inside: avoid; }调好之后按打印快捷键在打印对话框里选择“另存为PDF”就能得到一份版式还不错的PDF简历。这里提醒一句预览效果以打印对话框里的预览为准屏幕上的效果只能作参考因为打印样式是独立的一套规则。4.5 在线简历的隐私与内容安全把简历放到网上之前先想清楚哪些信息不该公开。身份证号、具体家庭住址、银行卡号这类敏感信息绝对不要出现在简历页面上招聘方并不需要这些面试通过后自然会在其他渠道核实。电话和邮箱是否公开取决于你的发简历场景。如果是通过邮件定向投递可以把完全联系方式写在附件PDF里网页版用脱敏联系方式或留个人主页链接即可。如果你担心邮箱被爬虫抓取后收到垃圾邮件可以把邮箱写成图片或者用“name#example.com”这种占位符并在旁边备注“请将#替换为”。这种方法不能完全防住但能挡掉一批自动采集脚本。还有一点网上简历页面尽量加上“最后更新日期”让浏览者知道你近半年内有没有维护这既是习惯也体现对信息的负责态度。5. 进阶技巧与经验分享基础版本做完之后你可能会想让它变得更好看、更有用。这个阶段我建议从下面几个方向入手性价比都很高。5.1 控制在一页以内简历不是越厚越好尤其是简历页面。一个很现实的情况是网上投递时很多系统会自动截取前一两页内容生成预览面试官在后台看到的就是截断版。所以“一页纸”原则对网页简历同样适用。控制在一页以内不是硬把字体缩小、间距压扁来“塞”内容而是重新审视哪些内容值得写。我的做法是每次改简历前先把所有经历都列出来然后一条条问自己“这个信息对目标岗位有没有直接帮助”没有就删保留的最多列十来个要点。时间太久、与目标方向无关的荣誉和社团经历该删就删。真正的简历不是全记录而是高光集锦。5.2 关键词要贴近岗位描述现在很多公司会用筛选系统对简历做关键词匹配尤其大厂校招和社招投递系统。书面简历如此网页简历也一样。具体做法是仔细读目标岗位的职位描述把里面的高频技能词和岗位词提取出来比如“HTML”“CSS”“JavaScript”“React”“组件化”“前端工程化”然后自然地融入到你的技能描述和项目要点里。这里要提醒一点关键词不是让你“编造经历”。只在真正做过的事情上使用对应的词把“做过什么”用岗位更认可的说法写出来。比如你做过一个页面本来就是用HTML、CSS写的那写“负责页面结构与样式开发”就是贴切的但如果没接触过某个框架就不要把它写进去面试一问就露馅这是拿自己的信誉冒险。5.3 把简历免费托管到线上本地HTML文件没法直接发给别人看所以把简历放上线是一个必要步骤。现在很多代码托管平台提供免费的静态页面托管服务业界一般把这些服务统称为“静态页部署”或者“Pages”功能。流程大同小异我来说通用步骤。第一步在代码托管平台注册账号并新建一个仓库仓库名一般用你的用户名或者简历相关名称。第二步把本地写好的index.html和CSS文件上传到这个仓库放到仓库根目录即可。第三步在仓库设置里找到“Pages”功能选择部署来源为当前分支或指定目录保存后平台会生成一个公开的访问地址。发布完成后把这个地址复制到你的简历邮件或社交主页里别人点开就能看到。整个过程中最需要注意的是不要把敏感信息放到不需要的目录里也不要让仓库设置为私有后还指望Pages能公开访问。发布后过几分钟访问一次确认能正常打开再把这个链接正式对外使用。5.4 给简历加一点“小动作”HTML简历和纸质简历最大的区别就是可以有少量交互。这些交互不用很多加得好会非常加分。一个经典的例子是“一键打印或导出PDF”按钮。在页面底部加一个按钮配合window.print()方法访问者点击后就能直接调出打印对话框button onclickwindow.print()打印本简历 / 导出PDF/button再比如在联系方式旁边放一个二维码扫码可以直接打开在线简历面试现场用手机展示时很实用。二维码可以用现成的生成工具把自己的简历网址贴进去生成图片然后放到页面合适位置。还有更进阶的玩法比如根据用户系统颜色模式自动切换深色显示用CSS的prefers-color-scheme就能实现。但无论加什么交互都不要过度。简历的核心是信息清晰不是炫技如果动效太多导致页面卡顿或重点不突出效果反而是减分。最后说点个人体会。我见过很多人收藏了一大堆简历模板和教程但轮到自己的时候总是不动手理由基本都是“还没准备好”“等学会某某再写”。其实写简历这件事最好的时机就是现在用这份HTML简历作为第一个练习项目先写出粗糙的第一版然后根据投递反馈和面试情况不断改。我自己的经验是每改一版简历都会顺带重新梳理一遍自己做过的事这个过程对面试准备本身就有很大帮助。HTML简历改起来快线上发布也方便几个月后回看旧版本你真的能感受到自己成长的速度。动手吧半小时后你就能拥有一份属于自己的网页简历。