HTML简历必须用语义化标签而非div堆砌,这是底线;需用<header><section><time>等标签确保ATS和屏幕阅读器正确解析,避免深层嵌套与非语义结构。

HTML 简历该用语义化标签还是 div 堆砌?
语义化标签不是加分项,是底线。用 <header> 包个人信息,<section> 分教育、工作、技能,<h2> 做模块标题,<time> 标时间——这些不只是“好看”,而是让屏幕阅读器、ATS(招聘系统)能正确解析内容。用一堆 <div class="box"> 套娃,等于把简历塞进黑盒子。
常见错误:把整个简历包在 <div id="resume"> 里,里面全用 <div> + CSS 控制结构。结果是:打印时样式崩、微信内嵌浏览器不识别区块、HR 用 Word 批量提取信息失败。
-
<article>不适合简历主体(它代表独立可分发的内容,如博客文章) -
<aside>只用于辅助信息(比如侧边栏的联系方式),别用来放核心经历 - 避免嵌套超过三层
<section>,ATS 对深层嵌套支持差
CSS 排版怎么避免“看着还行但一打印就乱”?
打印样式不是锦上添花,是交付前提。浏览器默认会忽略很多 CSS,比如 float、background-color、z-index,而简历常被 HR 打印成 PDF 存档。
实操建议:
立即学习“前端免费学习笔记(深入)”;
- 用
@media print单独写打印样式,强制设color: #000、background: transparent - 避免用
flex或grid做主布局——老版 Edge、某些 PDF 转换工具不支持 - 字体优先用系统安全字体:
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;别依赖 Google Fonts,离线或内网打不开 - 行高设为
line-height: 1.4,段落间距用margin-bottom: 0.8em,比像素值更适应缩放与打印
如何让 HTML 简历在微信/邮件里正常显示?
微信内置浏览器禁用外部 CSS 文件,Gmail 会剥离 <style> 标签里的大部分规则,甚至删掉 class 属性。指望「链接一个 CDN 样式表」就能跑通,基本等于投递失败。
解决方案只有一条:内联关键样式 + 最小化依赖。
- 所有 CSS 写进
<style>标签,并用工具(如 inlinestyler)转成内联style属性 - 删掉
:hover、@keyframes、calc()—— 这些在邮件客户端里基本无效 - 宽度统一用
max-width: 800px+margin: 0 auto,别用vw或%布局,微信会错算视口 - 图标用 SVG 内联(不是
<img src="icon.svg">),否则微信可能拦截或渲染为空白
要不要加 JavaScript?加了会有什么后果?
不要。99% 的场景下,加 JS 就是给 ATS 和邮箱服务器制造障碍。
真实反馈:某公司 HR 使用的招聘系统(Moka / Liepin)会直接丢弃含 <script> 标签的 HTML 文件;Outlook 邮件客户端默认禁用脚本,且不提示;微信打开带 fetch 或 localStorage 的简历,会报错并白屏。
- 动态加载内容(如“点击展开项目详情”)→ 改为静态折叠(用
<details><summary>,原生支持,无 JS) - 想做响应式切换 → 用纯 CSS 媒体查询,别调
window.matchMedia - 统计访问量?别在简历里埋 GA 或自建埋点,既违规又暴露隐私
最稳妥的 HTML 简历,就是一份不含 <script>、不依赖外部资源、所有样式内联、结构语义清晰的单文件。复杂交互不是专业,是干扰。











