纯html简历必须适配chrome、手机safari、gmail、ats和pdf导出五场景；需用语义化替代，规范mailto:/tel:链接样式，强制@media print中文字体与布局，github pages部署时确保index.html小写且位于根目录。
纯 HTML 简历页面不是“能打开就行”，而是必须让同一份代码在 Chrome 预览、手机 Safari 打开、Gmail 收到、ATS 解析、PDF 导出这五种场景下，信息不丢、结构不塌、重点不埋——做不到这点，再好看的 CSS 也白搭。
为什么用 <section></section> 而不是 <div> 分块
<p>浏览器和 ATS（如 Workday、Greenhouse）靠语义标签识别内容类型。<code><div class="work-experience"> 在它们眼里就是无意义的容器；而 <code><section id="experience"><h2>工作经历</h2></section> 才会被解析为可索引的结构化区块。
-
<section></section> 告诉机器：“这是一段独立、完整、有主题的内容”
- 每个
<section></section> 内部用 <h2></h2> 作模块标题（如“教育背景”），用 <h3></h3> 作子项标题（如学校名/公司名）
- 避免嵌套
<div> 包裹 <code><section></section>：比如 <div class="container"><section>...</section></div>，这会干扰打印分页和屏幕阅读器顺序
mailto: 和 tel: 链接必须显式写全，且不能依赖 CSS 样式
Gmail 会剥离所有 <style></style> 标签，并重置链接样式。如果邮箱只写 @#@#@#@#@#@#@#@#@#@0，默认灰字+无下划线，HR 很可能直接忽略。
- 正确写法：
@#@#@#@#@#@#@#@#@#@1
- 电话同理：
@#@#@#@#@#@#@#@#@#@2
- 别用 JS 加密或图片替代：ATS 和屏幕阅读器都读不到
- 测试方法：把 HTML 发给自己 Gmail，看链接是否可点、颜色是否可见
导出 PDF 时中文乱码、段落被截断？关键在 @media print 的三处硬编码
Chrome “另存为 PDF” 用的是独立渲染引擎，不支持 flex、rem 不稳定、中文字体 fallback 到空白方块——这不是你 HTML 写错了，是没告诉它“怎么印”。
- 必须在
<style></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></repo-name></username>，若报 404，先检查仓库 Settings → Pages → Source 是否选对分支（通常是 main 或 gh-pages）
- 首次部署后最长需 2 分钟生效，别急着刷新；可用
curl -I https://xxx.github.io 检查 HTTP 状态码
真正难的不是写出一份“能看”的简历页，而是让姓名在 ATS 里被第一眼抓取、联系方式在 Gmail 里被一眼看见、工作经历在 PDF 里不被硬生生劈成两页——所有这些，都藏在 <section></section> 的选择、mailto: 的写法、@media print 的强制覆盖和 GitHub 文件名的大小写里。
<section></section> 告诉机器：“这是一段独立、完整、有主题的内容”<section></section> 内部用 <h2></h2> 作模块标题（如“教育背景”），用 <h3></h3> 作子项标题（如学校名/公司名）<div> 包裹 <code><section></section>：比如 <div class="container"><section>...</section></div>，这会干扰打印分页和屏幕阅读器顺序
mailto: 和 tel: 链接必须显式写全，且不能依赖 CSS 样式
Gmail 会剥离所有 <style></style> 标签，并重置链接样式。如果邮箱只写 @#@#@#@#@#@#@#@#@#@0，默认灰字+无下划线，HR 很可能直接忽略。
- 正确写法：
@#@#@#@#@#@#@#@#@#@1 - 电话同理：
@#@#@#@#@#@#@#@#@#@2 - 别用 JS 加密或图片替代：ATS 和屏幕阅读器都读不到
- 测试方法：把 HTML 发给自己 Gmail，看链接是否可点、颜色是否可见
导出 PDF 时中文乱码、段落被截断？关键在 @media print 的三处硬编码
Chrome “另存为 PDF” 用的是独立渲染引擎，不支持 flex、rem 不稳定、中文字体 fallback 到空白方块——这不是你 HTML 写错了，是没告诉它“怎么印”。
- 必须在
<style></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></repo-name></username>，若报 404，先检查仓库 Settings → Pages → Source 是否选对分支（通常是main或gh-pages） - 首次部署后最长需 2 分钟生效，别急着刷新；可用
curl -I https://xxx.github.io检查 HTTP 状态码
真正难的不是写出一份“能看”的简历页，而是让姓名在 ATS 里被第一眼抓取、联系方式在 Gmail 里被一眼看见、工作经历在 PDF 里不被硬生生劈成两页——所有这些，都藏在 <section></section> 的选择、mailto: 的写法、@media print 的强制覆盖和 GitHub 文件名的大小写里。
