简历页面不用框架，直接用语义化html+css更稳：响应式、可打印、seo友好，部署简单且避免渲染错位；结构用等标签，css分屏显、移动端、打印三套样式，路径与mime类型需严格校验。

简历页面要不要用框架？直接写 HTML 更稳

不用 React、Vue 或任何构建工具，纯 HTML + CSS 就能做出响应式、可打印、SEO 友好的在线简历。框架反而增加部署复杂度，还容易让字体渲染错位、打印样式失效。

• 静态 HTML 上传到 GitHub Pages / Vercel / Netlify 几秒就上线，没构建失败风险
• 搜索引擎能直接抓取姓名、职位、技能关键词，meta 标签和语义化标签（<section></section>、<h1></h1>）写对就行
• 打印 PDF 时，浏览器原生“另存为 PDF”功能对 @media print 支持最可靠，框架打包后的内联样式常被忽略

怎么组织 HTML 结构才不踩坑？

别用一堆 <div> 套娃。用语义化标签明确区块职责，否则屏幕阅读器读不出重点，打印时也容易断页错乱。 <ul> <li> <code><header></header> 放姓名、联系方式、个人简介（控制在 3 行内）

<section></section> 每块一个：工作经验用 <article></article> 包裹每段经历，教育背景用 <dl> <dt></dt> <dd></dd> </dl> 清晰对齐学位与时间

技能列表用 <ul></ul>，但每个 <li> 加 data-skill-level 属性（如 data-skill-level="85"），方便后续加 CSS 进度条

避免把所有内容塞进一个 <main></main>，否则移动端横向滚动、打印分页全乱

CSS 怎么写才能适配手机和 PDF？

核心是三套样式叠加：默认屏显 + @media (max-width: 768px) + @media print。别指望一套 CSS 通吃。

超级简历WonderCV

一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。

下载

• 字体优先用系统字体栈：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;，避免 Web Font 加载失败导致空白
• 打印样式里必须重置：body { margin: 0; padding: 0; }，禁用背景色（background: transparent !important;），隐藏无关元素（.no-print { display: none !important; }）
• 移动端去掉固定宽度，用 max-width: 800px + margin: 0 auto 居中，段落行高设为 1.6 防止文字挤在一起

部署前必须检查的 3 个硬伤

很多人本地预览没问题，一上线就错位或 404，问题往往出在路径和 MIME 类型上。

• index.html 必须放在根目录，不是 /src/index.html；CSS 文件路径写相对路径（./style.css），别用绝对路径 /style.css（GitHub Pages 默认子路径部署）
• 图片用 <img src="avatar.jpg" alt="张三头像">，别用 base64（增大 HTML 体积，缓存失效）；确保 avatar.jpg 和 HTML 同目录
• 检查服务器返回的 Content-Type：HTML 文件必须是 text/html，CSS 必须是 text/css —— Vercel 默认正确，GitHub Pages 有时会把 .css 误判成 application/octet-stream，加 .nojekyll 文件可修复

最麻烦的其实是字体 fallback 和打印分页——这两处调一次要试五六种浏览器+PDF 导出组合，别省这步。