简历用html怎么做 个人网页简历制作【模板】

html简历应采用语义化结构：用放联系信息，唯一且为姓名，模块用，经历/教育用，技能用，样式全部内联，pdf导出需@media print专用样式，禁用js和图标字体依赖。

HTML 简历该用什么结构，别一上来就写 <div> <p>语义化标签不是加分项，是浏览器和屏幕阅读器“看懂你”的唯一方式。用错结构，ATS（招聘系统）可能直接跳过你的姓名。</p> <p>核心原则：把简历当「文档」，不是「海报」。用 <code><section></section> 划分模块，<h1></h1> 只出现一次（你的名字），教育/经历用 <article></article> 或带 aria-label 的 <section></section>，避免全页堆 <div>。 <ul> <li> <code><h1></h1> 必须是姓名，且仅一个；职位描述放 <h2></h2> 或 <p></p>，别为了样式滥用标题层级

联系方式别藏在 <footer></footer> 里——它不属于页面底部，而是简历的「头部信息」，建议放在 <header></header> 或紧贴 <h1></h1> 后

技能列表用 <ul></ul> 是允许的（<ul></ul> 在 HTML 允许范围内），但别套三层 <div> 模拟列表——既增加体积，又破坏可访问性 <h3>CSS 怎么写才不被 Gmail / ATS 折叠或清空样式</h3> <p>Gmail 会删掉 <code><style></style> 标签和大部分 CSS 选择器；多数 ATS（如 Workday、Greenhouse）只解析内联样式或极简行内类。指望外部 CSS 文件或复杂媒体查询？基本白搭。

实操上，所有关键样式必须内联：style="margin:0;padding:8px;font-size:14px;"。别省这个事，也别用 CSS 预处理器输出内联——容易漏、难调试。

立即学习“前端免费学习笔记（深入）”；

• 字体优先用系统安全字体：用 font-family: -apple-system, BlinkMacSystemFont, "Segoe ui", Helvetica, Arial, sans-serif;，别写 "PingFang SC" 这种非通用名
• 宽度控制死：设 style="max-width:800px;margin:0 auto;" 在最外层 <main></main>，避免 Gmail 自动缩放变形
• 链接必须加 style="color:#0066cc;text-decoration:underline;"——Gmail 默认把链接变灰且去下划线，HR 可能根本看不出那是邮箱或 github

导出 PDF 时中文乱码、间距崩坏怎么办

chrome 打印成 PDF 是最稳的路径，但默认设置会让中文字体断供、rem 单位失效、flex 布局错位。不是代码问题，是渲染上下文切换了。

关键动作：打印前加一段仅用于 PDF 的 <style></style>，用 @media print 覆盖，并强制指定字体族和单位。

• 中文字体必须显式声明：在 @media print 里写 body { font-family: "Noto Sans CJK SC", "Source Han Sans CN", sans-serif; }，别依赖系统默认
• 禁用弹性布局：PDF 渲染器对 display:flex 支持极差，打印专用样式里统一改用 display:block + margin 控制间距
• 移除所有 transition、animation、transform——它们在 PDF 中无意义，还可能触发 Chrome 渲染 bug

要不要加 JavaScript？加了反而降低通过率

绝大多数 ATS 不执行 JS，Gmail 会剥离全部 <script></script> 标签，ios 邮件客户端甚至会拦截含 JS 的 HTML 邮件。动态加载技能条、点击展开项目详情？这些交互在简历场景里纯属干扰。

唯一可考虑 JS 的情况：生成「当前日期」或自动计算「X 年经验」——但得降级为纯 HTML 备用内容，比如 <span id="exp-year">5</span> 年，再用 JS 覆盖。否则 JS 失效时，HR 看到的是裸露的占位符。

• 绝对不要用 JS 加载关键内容（如公司名、职位、项目描述）——ATS 和邮件客户端一律视为空白
• 不要用 localStorage 记住主题色或字体大小——简历不是 web app，没有「用户偏好」这回事
• 如果用了第三方图标字体（如 Font Awesome），确保有 SVG 备份或直接内联 SVG——CDN 不稳定时，图标变方块比没图标更减分

最麻烦的从来不是写完，而是每次投递前手动检查：Gmail 是否截断了联系方式、ATS 是否识别出你的 Python 技能关键词、PDF 里项目时间是否挤成一团。这些细节不靠工具，靠人眼一行行核对。