用<section>划分模块比用<div>更可靠，因其语义明确、利于ATS解析和屏幕阅读器识别，且必须配<h2>、避免嵌套过深；移动端需viewport和rem/em字号；PDF导出要适配@media print；GitHub Pages部署须注意路径大小写与根目录引用。
用 <section> 划分模块比用 <div> 更可靠
简历页面不是堆砌内容，而是让招聘方 3 秒内定位关键信息。语义化标签直接决定 ATS（简历筛选系统）能否正确提取字段，也影响屏幕阅读器识别逻辑。<section> 明确标识独立主题区块，比一堆 <div class="block"> 更易被解析。
-
<section id="experience"><h2>工作经历</h2>...是标准写法；<div id="work">在 PDF 导出或 ATS 解析时可能被忽略 - 每个
<section>必须配<h2>，不能只靠 CSS 视觉加大字号——这是可访问性和 SEO 的硬性要求 - 避免嵌套过深：
<section><div><div><p>这类结构会削弱语义，直接用<dl><dt>公司</dt><dd>XX科技</dd>表达时间线更干净
viewport 和相对字号是移动端可读的前提
本地双击打开看着正常，手机 Safari 里字小得看不清？大概率是漏了 <meta name="viewport"> 或用了固定像素字号。
- 必须在
<head>中加入：<meta name="viewport" content="width=device-width, initial-scale=1"> - 字体统一用
rem或em：比如body { font-size: 1.1em; line-height: 1.6; }，别写font-size: 16px - 行高设为
1.6而非1或2——实测这是小屏文字不粘连、不稀疏的临界值
导出 PDF 时内容错位，先查 @media print 和 break-inside
Chrome “另存为 PDF” 不是渲染引擎，它对 CSS 支持有限。很多错乱不是代码写错，而是没适配打印上下文。
- 加一段基础打印样式：
@media print { * { box-shadow: none !important; background: #fff !important; color: #000 !important; } } - 禁止分页撕裂：给每段经历的
<section>加break-inside: avoid;，否则“2023.03–2024.06｜某公司｜前端开发”可能被切到两页 - 绝对定位（
position: absolute）、浮动（float）、flex的wrap在 PDF 中支持极差，能不用就不用
部署到 GitHub Pages 后样式丢失，90% 是路径或大小写问题
本地双击 index.html 没问题，上传后变纯文字——这不是 CSS 写得不好，是资源引用断了。
立即学习“前端免费学习笔记（深入）”；
- CSS 文件引用必须用相对路径：
<link rel="stylesheet" href="style.css">，不要写./style.css或/style.css - GitHub Pages 服务器区分大小写：本地文件名是
Style.CSS，上传后实际路径是style.css，链接就会 404 - 如果用了图片，路径也要检查：比如
<img src="avatar.jpg">，确保文件名和扩展名完全一致
最麻烦的其实是“看起来没问题”的情况：比如 CSS 里写了 background: url(./images/bg.png)，但实际文件在根目录，少了个 ../ 就挂了。建议所有静态资源路径都从根目录开始写，统一用 /images/xxx.jpg。
