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