如何利用index.html做一个简单的简历

作者：袖梨 2026-07-21

纯HTML简历可行但不适用于ATS，适合熟人推荐、技术岗直投或个人网站展示；必须将姓名、联系方式、教育背景、工作经历、项目经验、技能等写入<body>，用<header><section><h2><article><ul>等语义化标签结构化内容。

直接用 index.html 做简历完全可行，但别指望靠它通过 HR 的 ATS（简历解析系统）——这类纯静态 HTML 简历适合发给熟人、投技术岗直聊、或放在个人域名下作为展示页。

用纯 HTML 写简历，哪些内容必须写进 `<body>`

浏览器只渲染 <body> 里的内容，所以结构要清晰、语义要准。别堆 <div>，优先用语义化标签：

<header> 放姓名、职位、联系方式（邮箱/电话/GitHub 链接）
<section> 拆分「教育背景」「工作经历」「项目经验」「技能」等模块
<h2> 作每个模块标题（<h1> 只用一次，通常是姓名）
<ul> 或 <dl> 列工作/项目条目，避免用 <p> 堆段落

示例片段：

<section>  <h2>工作经历</h2>  <article>    <h3>前端开发工程师</h3>    <p><strong>XX科技有限公司</strong>｜2022.07 – 2024.03</p>    <ul>      <li>用 React + TypeScript 重构管理后台，首屏加载时间降低 40%</li>      <li>主导组件库迁移，覆盖 12 个业务线</li>    </ul>  </article></section>

为什么不能只靠内联样式？`<style>` 标签至少得有

没有 CSS 的 index.html 在不同设备上会乱成一团：文字挤在一起、链接没颜色、打印时全糊成一块。最简方案是加一个 <style> 块在 <head> 里：

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

设基础字体：body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
给链接加下划线和颜色：a { color: #007bff; text-decoration: none; } a:hover { text-decoration: underline; }
关键间距用 margin-bottom 控制模块间隔，别依赖 <br>
打印适配加一句：@media print { nav, .no-print { display: none; } }（方便导 PDF）

不推荐用外部 CSS 文件——单文件简历就该“开箱即用”，少一个请求，少一个 404 风险。

导出 PDF 时常见问题：页面截断、链接失效、字体丢失

Chrome 浏览器「打印 → 另存为 PDF」是最常用路径，但容易翻车：

页面被截断：在 <style> 中加 @page { size: A4; margin: 0.5in; } 和 body { break-after: avoid; } 控制分页
超链接变灰/不可点：PDF 标准支持链接，但需确保 <a href="mailto:xxx"> 或 <a href="https://github.com/xxx"> 写法规范，且没被 pointer-events: none 拦住
中文字体乱码：避免用本地字体名如 "PingFang SC"，改用通用族名 font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
GitHub 图标不显示：别用 SVG 外链图标，改用 Unicode 符号（如 ?）或内联 base64 SVG