纯html简历需兼顾可读性、可访问性、打印适配和seo:用语义化标签(如)、@media print优化打印样式、纯文本呈现技能关键词以通过ats筛选、重置默认css、确保字体与对比度合规、规范文件命名及http头。

纯 HTML 简历不是“写个页面就行”,而是要兼顾可读性、可访问性、打印适配和基础 SEO —— 如果只用 <div> 堆内容,ATS(招聘系统)可能直接漏掉你的技能关键词,HR 打印出来还全是乱码。<h3>用语义化标签替代 <div> 套娃<p>浏览器和屏幕阅读器靠标签含义理解结构,<code><div> 没语义,<code><section></section>、<article></article>、<h1></h1>–<h6></h6> 才是正确选择。比如教育经历必须用 <section></section> 包裹,学校名用 <h3></h3>,专业用 <p></p>,别全塞进一个 <div class="edu"> 里。<ul>
<li>
<code><h1></h1> 只能出现一次,放你的姓名(不是“个人简历”)
<article></article>,内部用 <time></time> 标注起止日期(支持机器解析)<ul></ul>,别用 <div> + <code>display: flex 模拟,否则屏幕阅读器读不出项数打印时样式崩坏?加 @media print 规则
HR 很可能打印你的 HTML 简历,而默认浏览器会隐藏背景色、调整字体、删掉链接下划线 —— 导致你精心设计的分隔线消失、蓝色技能标签变黑灰、超链接变成无意义文字。必须显式控制:
@media print {
* { background: transparent !important; color: #000 !important; }
a { text-decoration: none; color: #000; }
.no-print { display: none; }
body { font-size: 12pt; line-height: 1.4; }
}
- 所有装饰性图片(如头像边框、底纹)在打印时设为
display: none - 避免用
vh/vw单位做高度,打印时无法换页,内容会被截断 - 把联系方式放在顶部固定位置,别用
position: fixed,它在打印中行为不可控
让 ATS 正确识别技能和职位关键词
很多公司用 ATS(Applicant Tracking System)初筛简历,它们本质是文本提取器,对 CSS 隐藏内容、图片文字、SVG 图标完全无视。你写在 <span style="visibility: hidden">React</span> 里的关键词等于没写。
- 技能必须以纯文本形式出现在 HTML 中,例如:
<li>JavaScript (ES6+, Promise, async/await)</li>,别缩写成<li>JS</li> - 避免把技术栈塞进 SVG 图标或 Canvas 渲染的文字里
- 项目描述中自然嵌入岗位 JD 里的词:如果招聘写“参与 CI/CD 流程优化”,就别只写“用 Jenkins 搭了流水线”,而要写“通过 Jenkins Pipeline 实现 CI/CD 流程自动化,构建耗时降低 40%”
不依赖 CSS 框架,但必须重置默认样式
不同浏览器对 <ul></ul>、<h2></h2> 的 margin 和 padding 不一致,不用框架不等于放任自流。一个最小可用的 reset 就够用:
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; }
h1, h2, h3 { font-weight: 600; margin-bottom: 0.5em; }
ul { list-style: none; }
a { color: #1a0dab; text-decoration: none; }
a:hover { text-decoration: underline; }
- 别用
normalize.css或reset.css全量引入 —— 简历 HTML 应该小于 50KB,压缩后最好控制在 15KB 内 - 字体栈必须包含系统默认字体(如
-apple-system),别只写"Helvetica Neue",Windows 用户看不到 - 所有颜色至少满足 WCAG AA 对比度(文本与背景对比 ≥ 4.5:1),用在线工具测一下
#333on#fff可以,#999on#fff不行
最常被忽略的其实是文件命名和 HTTP 头:把简历存成 zhangsan-resume.html 而不是 index.html,部署时确保服务器返回 Content-Type: text/html; charset=utf-8 —— 否则中文可能变乱码,连第一行姓名都显示不出来。











