纯HTML简历必须适配Chrome、手机Safari、Gmail、ATS和PDF导出五场景；需用语义化<section>替代<div>，规范mailto:/tel:链接样式，强制@media print中文字体与布局，GitHub Pages部署时确保index.html小写且位于根目录。
纯 HTML 简历页面不是“能打开就行”，而是必须让同一份代码在 Chrome 预览、手机 Safari 打开、Gmail 收到、ATS 解析、PDF 导出这五种场景下，信息不丢、结构不塌、重点不埋——做不到这点，再好看的 CSS 也白搭。
为什么用 <section> 而不是 <div> 分块
浏览器和 ATS（如 Workday、Greenhouse）靠语义标签识别内容类型。<div class="work-experience"> 在它们眼里就是无意义的容器；而 <section id="experience"><h2>工作经历</h2> 才会被解析为可索引的结构化区块。
-
<section>告诉机器：“这是一段独立、完整、有主题的内容” - 每个
<section>内部用<h2>作模块标题（如“教育背景”），用<h3>作子项标题（如学校名/公司名） - 避免嵌套
<div>包裹<section>：比如<div class="container"><section>...</section></div>，这会干扰打印分页和屏幕阅读器顺序
mailto: 和 tel: 链接必须显式写全，且不能依赖 CSS 样式
Gmail 会剥离所有 <style> 标签，并重置链接样式。如果邮箱只写 <a href="x@y.z">x@y.z</a>，默认灰字+无下划线，HR 很可能直接忽略。
- 正确写法：
<a href="mailto:x@y.z" style="color:#0066cc;text-decoration:underline;">x@y.z</a> - 电话同理：
<a href="tel:+86181****5874" style="color:#0066cc;text-decoration:underline;">+86 181****5874</a> - 别用 JS 加密或图片替代：ATS 和屏幕阅读器都读不到
- 测试方法：把 HTML 发给自己 Gmail，看链接是否可点、颜色是否可见
导出 PDF 时中文乱码、段落被截断？关键在 @media print 的三处硬编码
Chrome “另存为 PDF” 用的是独立渲染引擎，不支持 flex、rem 不稳定、中文字体 fallback 到空白方块——这不是你 HTML 写错了，是没告诉它“怎么印”。
立即学习“前端免费学习笔记（深入）”；
- 必须在
<style>中加：@media print { body { font-family: "Noto Sans CJK SC", "Source Han Sans CN", sans-serif; } } - 禁用弹性布局：
@media print section { display: block; margin-bottom: 16px; }（别信display: flex在 PDF 里能工作） - 防跨页断裂：
@media print section { page-break-inside: avoid; }，尤其对“工作经历”这种长模块 - 别漏
<meta name="viewport" content="width=device-width, initial-scale=1">：否则 PDF 可能按移动端缩放，文字糊成一团
index.html 文件部署到 GitHub Pages 时路径和大小写必须严格匹配
GitHub Pages 默认只认根目录下的 index.html，且服务器区分大小写——本地双击能打开，上传后 404，八成是文件名或路径问题。
- 确保文件名是小写
index.html，不是Index.html或INDEX.HTML - 不要放在子文件夹里（如
/resume/index.html），除非你配置了自定义域名或 CNAME - 上传后访问
https://<username>.github.io/<repo-name>，若报 404，先检查仓库 Settings → Pages → Source 是否选对分支（通常是main或gh-pages） - 首次部署后最长需 2 分钟生效，别急着刷新；可用
curl -I https://xxx.github.io检查 HTTP 状态码
真正难的不是写出一份“能看”的简历页，而是让姓名在 ATS 里被第一眼抓取、联系方式在 Gmail 里被一眼看见、工作经历在 PDF 里不被硬生生劈成两页——所有这些，都藏在 <section> 的选择、mailto: 的写法、@media print 的强制覆盖和 GitHub 文件名的大小写里。
