一个 index.html 文件即可实现可读性强的简历页：语义化 HTML 结构（header/main/section/h2）、响应式 viewport 声明、相对字号与行高、无障碍邮箱链接、print 媒体查询适配、GitHub Pages 路径与大小写规范。
用纯 HTML + 少量 CSS 快速搭出可读性强的简历页
不需要框架、不依赖模板，一个 index.html 文件就能跑起来——关键不是“好看”，而是让招聘方 3 秒内扫到你的姓名、联系方式、核心技能和最近一段经历。HTML 结构必须语义清晰，<section> 和 <h2> 要比一堆 <div> 更可靠。
- 用
<header>包姓名和联系信息，<main>分块放「教育」「工作经历」「技能」，每块用<section>+<h2> - 避免内联样式（
style="..."），把 CSS 写在<style>标签里，控制宽度、行高、间距即可，比如max-width: 800px防止文字撑满屏幕 - 邮箱和电话别用图片或 JS 加密——ATS（简历筛选系统）根本读不到；直接写
<a href="mailto:xxx">xxx@example.com</a>
让简历在手机上不缩放也能正常阅读
很多本地打开的 HTML 简历在手机 Safari 或 Chrome 里文字极小，是因为缺少 viewport 声明。这不是样式问题，是 HTML 头部没配对。
- 必须在
<head>里加这行：<meta name="viewport" content="width=device-width, initial-scale=1"> - 别用固定像素字号（如
font-size: 16px），改用相对单位：font-size: 1rem或1.1em，配合body { line-height: 1.6; }提升可读性 - 避免用
<table>排版时间线或技能栏——表格在小屏上会横向溢出，用<dl><dt><dd>或带flex-wrap的<div>更稳
导出 PDF 时格式错乱？重点检查这三处
Chrome “另存为 PDF” 是最常用方式，但默认会删掉背景色、截断长内容、忽略某些 margin。不是代码错了，是打印样式没适配。
- 加一段
@media print规则：重置background为白色，color为黑色，去掉所有box-shadow和border - 避免用
position: fixed或float布局——PDF 导出引擎对它们支持极差，会导致内容重叠或消失 - 如果经历条目多，给
<section>加break-inside: avoid;，防止某段经历被硬生生切到两页
部署到 GitHub Pages 后样式丢失？查路径和大小写
本地双击打开没问题，一上传到 github.io 就变纯文字——90% 是资源路径写死了，剩下 10% 是文件名大小写不符（Windows 不敏感，Linux 敏感）。
立即学习“前端免费学习笔记（深入）”；
- CSS 如果写在单独文件里（比如
style.css），引用必须用相对路径：<link rel="stylesheet" href="style.css">，不要写./style.css或/style.css - 检查文件名：GitHub Pages 默认服务器是区分大小写的，
Style.CSS和style.css是两个文件 - 如果用了图标字体（如 Font Awesome），优先用 CDN 地址而非本地文件，避免跨域或路径问题；但注意 CDN 可能被墙，稳妥起见还是用 SVG 内联图标
真正难的不是写完，而是每次更新后重新验证三件事：手机预览是否折行、PDF 导出是否分页合理、GitHub 页面是否加载了 CSS——这三个环节任何一处断掉，简历就等于没发出去。
