纯html简历的核心是语义化结构:用等标签确保可读性、可访问性与打印适配,无需css框架。

用纯 HTML 写简历,别碰 CSS 框架,先保结构正确
纯 HTML 简历不是“简陋”,而是把语义和顺序做对——浏览器默认样式够用,但很多人一上来就乱套 <div>,结果打印出来段落挤成一团、联系方式藏在角落。核心是:用对语义化标签,让内容天然有层级和可读性。
<p>实操建议:</p>
<ul><li>用 <code><header></header> 包姓名和求职意向,别用 <h1></h1> 套 <div>
<li>教育经历、工作经历用 <code><section></section> 区分,每段经历内用 <h2></h2>(学校/公司名)、<h3></h3>(专业/职位)、<p></p>(描述)自然嵌套
<ul></ul>,别用换行符 <br> 模拟列表——后者无法被屏幕阅读器识别,也难调整间距<a href="mailto:xxx"></a> 和 <a href="tel:+86xxx"></a>,否则手机点不开不写 CSS 也能让简历“能看”:浏览器默认样式利用技巧
Chrome/Firefox 对 <h1>–<h6></h6>
</h1>、<ul></ul>、<blockquote></blockquote> 都有合理缩进和行高,关键是怎么“借力”。很多人加一堆 <br> 或空 <p></p> 控制空行,反而导致打印时分页错乱。
实操建议:
- 段落之间靠
<p></p>自带的上下 margin,别手动塞空行 - 想让某段文字稍小(比如日期),用
<small></small>标签,它语义明确且浏览器默认设了 font-size - 强调关键词(如“全栈开发”“React”)用
<strong></strong>,比手写<span style="font-weight:bold"></span>更轻量、更语义 - 避免用
<center></center>或<font></font>(已废弃),它们在现代浏览器中可能被忽略或触发怪异模式
导出 PDF 时格式崩了?检查这三点
Chrome “另存为 PDF” 是最常用方式,但简历常出现内容被截断、页眉页脚压字、联系方式变超链接不可点等问题——根本原因不是 HTML 错,而是没告诉浏览器“怎么印”。
实操建议:
- 在
里加:<meta name="viewport" content="width=device-width, initial-scale=1.0">
,否则 PDF 导出可能按移动端视口缩放 - 用
<style>@media print { ... }</style>做最小干预:比如隐藏无关链接、调大<h2></h2>行高防跨页断行、用page-break-inside: avoid包住整段工作经历 - 测试前先在 Chrome 开发者工具里切到“Print preview”模式(
Ctrl+Shift+P→ 输入 “Rendering” → 勾选 “Emulate CSS media type: print”),比直接导出快十倍
在线托管不用买服务器:GitHub Pages + 自定义域名零成本上线
把 HTML 文件扔到 GitHub 仓库就能生成公开网址,但新手常卡在路径错误(比如图片 404)、首页不自动加载、HTTPS 混合内容警告这几个点。
实操建议:
- 仓库名必须是
username.github.io(username替换成你的 GitHub ID),否则 GitHub Pages 不会认作个人主页 - 简历文件必须叫
index.html,且放在仓库根目录,不能套在/resume/子目录里 - 所有资源(图片、CSS)用相对路径,比如
<img src="photo.jpg">,别写<img src="/photo.jpg">(开头斜杠会从域名根开始找) - 如果用了
mailto:或tel:,确保 GitHub Pages 设置里启用了 HTTPS(默认开启),否则某些浏览器会拦截非安全上下文中的协议跳转
真正难的不是写完,是让每一段 <p></p> 在手机、打印、屏幕阅读器里都保持本意——HTML 简历的底线不是“好看”,是“不丢信息”。











