怎样制作个人简历网页？

最稳妥的个人简历网页方案是纯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 生成简历更接近交付目标。