HTML简历必须内联样式、用table布局、安全字体、绝对URL图片，并经三端测试；禁用style标签、Flex/Grid、本地路径和@media print依赖。

HTML 简历不是“做个网页就行”，而是要让招聘方（尤其是 HR 或技术主管）3 秒内看清你的核心能力、项目经验和联系方式——同时确保在手机上不乱码、在 Gmail 里能直接打开、在猎聘附件里不丢样式。

简历 HTML 必须禁用 <style> 块和外部 CSS

很多教程教你在 <head> 里写 <style>，但这是大忌：Gmail、Outlook、部分招聘系统会直接过滤或忽略内联 <style>，导致排版崩坏成纯文字。真正能发出去的 HTML 简历，所有样式必须用 style 属性内联写死。

• 正确写法：<p style="font-size:14px; margin:8px 0;">前端开发</p>
• 错误写法：<style>p { font-size:14px; }</style>（发给 HR 后大概率变无格式文本）
• 字体优先用系统安全字体："Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif，避免用 Google Fonts 或自定义 @font-face
• 图片必须用绝对 URL（如 https://example.com/avatar.jpg），不能用本地路径 ./photo.jpg —— 附件解压后路径就失效了

<table> 是兼职简历最稳的布局方案

Flex/Grid 在 Outlook 和部分企业邮件客户端里支持极差，而 <table> 虽然老派，却是唯一能跨平台对齐、控制列宽、防止内容错位的方案。别被“语义化”绑架——求职简历不是博客，可读性＞规范性。

超级简历WonderCV

一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。

下载

• 用 <table cellpadding="0" cellspacing="0" border="0"> 清除默认间距
• 联系信息栏建议用单行 <tr><td width="25%">电话</td><td>138-XXXX-XXXX</td></tr>，保证手机横屏时不会换行错位
• 技能标签用 <span style="background:#e0e0e0; padding:2px 6px; border-radius:3px;">Vue</span> 模拟 badge，比用图片更轻量且兼容
• 避免嵌套多层 <table>，超过 2 层就容易在安卓邮件 App 中撑破容器

导出为 PDF 时 @media print 样式几乎无效

很多人想“先写 HTML，再浏览器打印成 PDF 发过去”，但 Chrome/Firefox 的打印功能会忽略大部分 style 属性（比如 background-color、border-radius），导致 PDF 里全是白底黑字、圆角变直角、颜色全丢。

立即学习“前端免费学习笔记（深入）”；

• 如果必须交 PDF，直接用浏览器「另存为 HTML」后，用 wkhtmltopdf 命令行生成：wkhtmltopdf --enable-local-file-access resume.html resume.pdf
• 或者更简单：把 HTML 文件拖进 Edge 浏览器 → F12 → 切到 Rendering 面板 → 勾选 Emulate CSS media type: print，实时调样式
• 不要依赖 @media print { ... } 做关键排版——它只控制“是否显示”，不控制“怎么显示”

真正卡住人的从来不是写不出 HTML，而是发出去之后对方看到的和你本地预览的完全两样。每次改完，务必用三台设备测试：iPhone 邮件 App、Windows Outlook 桌面版、Gmail 网页版。少一个，就可能让一份匹配度 90% 的简历，变成对方滑动就划走的“格式混乱文件”。