纯html简历的关键是语义化结构：用等标签确保可读、可访问、可打印、手机可点击，配合viewport和@media print适配，无需css框架即可实现清晰、跨设备一致的简历效果。
直接用纯 HTML 写简历，不加 CSS 框架、不套模板，就能做出清晰、可打印、手机能点开电话邮箱的简历——关键不是“怎么美化”，而是“怎么让结构自己说话”。
用对语义化标签，浏览器默认样式就够用
很多人一写简历就急着加 style 或引入 Bootstrap，结果反而把层级搞乱。其实 <header></header>、<section></section>、<h2></h2>、<p></p> 这些标签自带语义和默认间距，够用了。
-
<header></header>包姓名 + 求职意向，别用<div> 套 <code><h1></h1>—— 后者语义模糊，打印时可能被当成普通段落缩进 - 每段工作或教育经历用一个
<section></section>，里面用<h2></h2>（公司/学校名）、<h3></h3>（职位/专业）、<p></p>（描述），天然形成阅读节奏 - 技能列表必须用
<ul></ul>，别用<br>或空格拼接——前者能被屏幕阅读器识别，后者在 PDF 导出时容易挤成一行 - 邮箱和电话必须写成
@#@#@#@#@#@#@#@#@#@0和@#@#@#@#@#@#@#@#@#@1，否则手机点不开 - 必须在
里加：<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 默认按 980px 渲染，文字自动缩放 - 导出 PDF 前，加一段最小
@media print规则：body { background: white; color: black; }+ 给每个<section></section>加break-inside: avoid;，防止某段经历被硬生生切到两页 - 测试打印效果别直接导出：Chrome 开发者工具 → Ctrl+Shift+P → 输入 “Rendering” → 勾选 “Emulate CSS media type: print”，秒级预览
- CSS 如果写在单独文件里（比如
style.css），引用必须是：<link rel="stylesheet" href="style.css">，不能写成Style.CSS或./style.css - 如果用了图片或字体文件，路径也必须全小写、相对路径，且文件名与引用完全一致
- 检查
index.html是否放在仓库根目录——GitHub Pages 默认只托管根目录下的index.html，子文件夹里的不会自动生效
viewport 和打印样式不配，手机/PDF 就会崩
本地双击打开看着好好的，一发给 HR 就文字小得看不清，或者导出 PDF 时内容被截断——90% 是因为少了两行关键配置。
部署到 GitHub Pages 后样式丢失？查路径和大小写
本地打开正常，上传后变纯文字，不是代码错了，是路径没对上。GitHub Pages 的服务器是 Linux，严格区分大小写。
最常被忽略的一点：简历不是越“酷”越好，而是越“易扫读”越好。面试官平均停留 90 秒，<h2></h2> 是否准确标出公司名、<small></small> 是否包住时间、<strong></strong> 是否强调核心技能——这些细节比动画和渐变色重要得多。
