HTML中如何创建简洁个人简历网页

作者：袖梨 2026-06-07

一个 index.html 文件即可实现可读性强的简历页：语义化 HTML 结构（header/main/section/h2）、响应式 viewport 声明、相对字号与行高、无障碍邮箱链接、print 媒体查询适配、GitHub Pages 路径与大小写规范。

不需要框架、不依赖模板，一个 index.html 文件就能跑起来——关键不是“好看”，而是让招聘方 3 秒内扫到你的姓名、联系方式、核心技能和最近一段经历。HTML 结构必须语义清晰，<section> 和 <h2> 要比一堆 <div> 更可靠。

用 <header> 包姓名和联系信息，<main> 分块放「教育」「工作经历」「技能」，每块用 <section> + <h2>
避免内联样式（style="..."），把 CSS 写在 <style> 标签里，控制宽度、行高、间距即可，比如 max-width: 800px 防止文字撑满屏幕
邮箱和电话别用图片或 JS 加密——ATS（简历筛选系统）根本读不到；直接写 <a href="mailto:xxx">[email protected]</a>

很多本地打开的 HTML 简历在手机 Safari 或 Chrome 里文字极小，是因为缺少 viewport 声明。这不是样式问题，是 HTML 头部没配对。

必须在 <head> 里加这行：<meta name="viewport" content="width=device-width, initial-scale=1">
别用固定像素字号（如 font-size: 16px），改用相对单位：font-size: 1rem 或 1.1em，配合 body { line-height: 1.6; } 提升可读性
避免用 <table> 排版时间线或技能栏——表格在小屏上会横向溢出，用 <dl><dt><dd> 或带 flex-wrap 的 <div> 更稳

Chrome “另存为 PDF” 是最常用方式，但默认会删掉背景色、截断长内容、忽略某些 margin。不是代码错了，是打印样式没适配。

加一段 @media print 规则：重置 background 为白色，color 为黑色，去掉所有 box-shadow 和 border
避免用 position: fixed 或 float 布局——PDF 导出引擎对它们支持极差，会导致内容重叠或消失
如果经历条目多，给 <section> 加 break-inside: avoid;，防止某段经历被硬生生切到两页

本地双击打开没问题，一上传到 github.io 就变纯文字——90% 是资源路径写死了，剩下 10% 是文件名大小写不符（Windows 不敏感，Linux 敏感）。

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

CSS 如果写在单独文件里（比如 style.css），引用必须用相对路径：<link rel="stylesheet" href="style.css">，不要写 ./style.css 或 /style.css
检查文件名：GitHub Pages 默认服务器是区分大小写的，Style.CSS 和 style.css 是两个文件
如果用了图标字体（如 Font Awesome），优先用 CDN 地址而非本地文件，避免跨域或路径问题；但注意 CDN 可能被墙，稳妥起见还是用 SVG 内联图标

真正难的不是写完，而是每次更新后重新验证三件事：手机预览是否折行、PDF 导出是否分页合理、GitHub 页面是否加载了 CSS——这三个环节任何一处断掉，简历就等于没发出去。