最稳妥的个人简历网页方案是纯HTML+CSS，需用语义化标签（如<section><article><h2>）构建结构，并添加@media print样式确保PDF导出和打印时排版正确、信息完整。
直接用 HTML + CSS 写个人简历网页最稳妥，不需要框架、不依赖网络、打开即见，但关键在结构语义和打印适配——很多人忽略这点，导致投递时 PDF 导出乱版或屏幕阅读器读不出重点。
用 <section> 而不是 <div> 组织内容模块
简历本质是结构化文档，<section>、<h2>、<ul> 这类语义标签能让浏览器、PDF 工具和辅助设备正确识别“教育背景”“工作经历”等区块。用一堆 <div class="block"> 看似自由，实则导出 PDF 时容易丢层级、打印时不分页。
- 每个主模块（如“技能”“项目”）用
<section>包裹，标题用<h2> - 每段经历用
<article>（比如一个独立项目），内部用<h3>标项目名，<p>描述职责 - 避免嵌套过深：
<section> > <article> > <h3>就够了，再套<div>只会增加样式干扰
CSS 中必须加 @media print 规则
HR 常把网页另存为 PDF 或直接打印，而默认 HTML 页面的导航栏、链接下划线、背景色全会进 PDF，造成浪费纸张、信息遮挡甚至排版错乱。
- 在
<style>里写：@media print { nav, .contact-link, a[href]::after { display: none; } body { font-size: 12pt; line-height: 1.4; } section { page-break-inside: avoid; } } -
page-break-inside: avoid防止“工作经历”被硬生生切成两页 - 别用
background-image做简历头像——打印默认关闭背景图，头像直接消失
导出 PDF 时优先用 Chrome 的“另存为 PDF”，而非截图或第三方工具
Chrome 的打印功能能真实还原 @media print 规则，且支持选择“背景图形”开关（手动勾选即可保留浅色底纹）。其他工具如 wkhtmltopdf 对 Flex 布局支持差，Safari 导出常漏字体。
立即学习“前端免费学习笔记（深入）”；
- 操作路径：Ctrl+P（Win）/ Cmd+P（Mac）→ 目标打印机选“另存为 PDF”→ 勾选“背景图形”
- 字体务必用系统安全字体：优先
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;，避免自定义 Web Font 在 PDF 中回退失败 - 行高设为
line-height: 1.4，比默认 1.2 更易读，且 PDF 渲染稳定
真正难的不是写出来，而是让同一份 HTML 在手机预览、Chrome 打印、HR 的 PDF 查看器里都保持信息完整、顺序正确、重点不被淹没——所有取巧的视觉动效或响应式断点，在 PDF 里大概率归零。老实用语义标签 + 一段靠谱的 @media print，比折腾 JS 生成简历更接近交付目标。
