HTML简历需用语义化标签构建结构骨架，如、、/，避免嵌套过深；防中文乱码须设UTF-8编码与多层中文字体fallback；打印样式需重写而非隐藏，慎用Flex/Grid，用page-break-inside: avoid控制分页，并重置默认margin/padding。
HTML简历不是“写网页”，而是用标签把内容结构先钉死——结构对了，后续加样式、导出PDF、适配打印才不会崩。
怎么搭语义化基础骨架
别用一堆 <div> 堆出来。浏览器和屏幕阅读器靠语义标签理解内容层级，打印时也依赖这个逻辑分页。一个错位的 <code><section></section> 可能导致整页简历在 PDF 里被截断。
-
<header></header>放姓名、职位、一句话定位（别塞联系方式，那是干扰） - 每个模块用
<section></section>包裹，加id（比如id="experience"），方便 CSS 定位和后期加锚点链接 - 工作经历/教育背景这类列表，用
<ol></ol>或<ul></ul>，别用<p></p>+ 换行模拟——后者在打印时极易跨页断裂 - 避免嵌套过深：
<section></section>→<article></article>→<div> → <code><p></p>这种四层结构，会让 CSS 选择器失控，也增加打印分页判断难度中文乱码和字体失效怎么防
导出 PDF 时字体突然变成方块，90% 是编码或字体链没写实。浏览器默认不加载中文字体，你写的
font-family: "PingFang SC"在 Windows 或 Linux 上根本不存在。-
<meta charset="UTF-8">必须放在最前面，漏掉就全页乱码 - CSS 中定义字体，用多层 fallback：
font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;，别只写一个名字 - 不要依赖系统字体做字号基准：比如用
1.2em配合中文字体，在某些 PDF 导出工具里会缩放失真；优先用px或rem（配合根元素font-size控制） - 如果要用图标字体（如 Font Awesome），确保 CDN 地址可用，且导出 PDF 工具支持远程字体加载——很多本地打印工具直接忽略
为什么一加
@media print就排版错乱打印样式不是“隐藏不想要的”，而是重写整个渲染逻辑。浏览器打印预览走的是另一套盒模型计算路径，Flex/Grid 在部分引擎里表现不稳定。
立即学习“前端免费学习笔记（深入）”；
- 打印样式里禁用所有
background-image和color（除非是黑字），PDF 导出时背景图常丢失，彩色文字变灰度后可读性暴跌 - 用
page-break-inside: avoid包住每段<section></section>，但别滥用——它在某些浏览器里反而引发空白页 - 慎用
display: grid做两栏布局：打印时 Grid 容器可能整体换页，导致左侧技能栏空在第一页，右侧经历全挤到第二页 - 测试必须用真实打印预览（Chrome 的 Ctrl+P → “另存为 PDF”），不能只靠 DevTools 的 “print” 模式——后者不触发真实分页计算
部署前必须检查的三件事
很多人把 HTML 文件双击打开没问题，就以为完成了。其实真正翻车在部署后：链接打不开、字体加载失败、移动端缩成一团。
- 所有路径写相对路径：CSS 用
href="style.css"，别用href="./css/style.css"或绝对路径，否则 GitHub Pages 部署后 404 - 删掉开发期用的
console.log或调试用的border: 1px solid red——这些在打印时可能意外触发分页或留白 - 用手机访问一次，检查
<meta name="viewport" content="width=device-width, initial-scale=1.0">是否生效；没这句，iOS Safari 会强制缩放，导致文字糊成一片
最易被忽略的点：打印样式里没重置
margin和padding。浏览器默认给<h1></h1>、<p></p>加的外边距，在 PDF 里会变成大片空白，尤其首屏顶部经常多出半页空白——这不是 bug，是你没覆盖它。 -
