纯HTML简历可交付的关键是语义化结构与打印/移动端适配：用等标签构建可读骨架，邮箱电话用mailto/tel链接，清除固定宽度，添加viewport和@media print规则，确保GitHub Pages路径大小写正确。
纯 HTML 就能做出可交付的简历网页，关键不是写多炫的样式，而是让姓名、联系方式、最近一段经历在手机上不缩放也能一眼看到，打印成 PDF 时不丢段落、不分页错乱。
先用语义化标签搭出可读骨架
浏览器默认样式足够支撑基础阅读，问题常出在结构混乱：比如用一堆 <div> 套 <code><span></span> 模拟标题，结果屏幕阅读器读不出层级，ATS 系统也抓不到“工作经历”这个区块。
-
<header></header>包姓名、职位和一句话简介，别用<h1></h1>套<div> <li>每个主模块（教育、工作、技能）必须用 <code><section></section>包裹，标题统一用<h2></h2> - 每段工作或项目内部，公司/学校名用
<h3></h3>，时间+职位这类复合信息改用<dl><dt></dt></dl>+<dd></dd>，避免硬换行或空格分隔 - 邮箱和电话必须写成
<a href="mailto:xxx@example.com">xxx@example.com</a>和<a href="tel:+8613800138000">138-0013-8000</a>，否则手机点不开 - 技能列表用
<ul></ul>，别用顿号或换行符拼接；日期类次要信息用<small></small>，它自带语义和合理字号 - 测试时直接在 Chrome 开发者工具里切到 “Device Toolbar”，选 iPhone SE 或 Nexus 5X，看文字是否溢出、链接是否可点
移动端能看的前提是删掉固定宽度
很多人加了 <meta name="viewport" content="width=device-width, initial-scale=1"> 就以为响应式完成了，其实真正卡住的是 HTML 本身——比如给整个简历包一个 style="width: 960px; margin: 0 auto" 的 <div>，手机上只能左右拖拽。
<ul>
<li>所有宽度相关内联样式先清空，让文本自然折行</li>
<li>头像或证书图统一加 <code>style="max-width: 100%; height: auto;"，别用 width="200"
@media print 不是锦上添花，是必选项
HR 大概率会把你的网页另存为 PDF，而默认打印行为会让导航栏、下划线链接、背景色全进文档，导致纸张浪费、重点被遮挡、甚至某段经历被硬生生切成两页。
立即学习“前端免费学习笔记（深入）”；
- 在
<style></style>里必须写@media print规则，至少包含：nav, .contact-link, a[href]::after { display: none; }、body { font-size: 12pt; line-height: 1.4; }、section { break-inside: avoid; } - 别用
background-image放头像——打印默认关闭背景图，头像直接消失 - 字体栈必须用系统安全字体：
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;，Web Font 在 PDF 中大概率回退失败 - 导出前先在 Chrome 里按
Ctrl+Shift+P→ 输入 “Rendering” → 勾选 “Emulate CSS media type: print”，比反复另存 PDF 快得多
部署到 GitHub Pages 后样式丢失？先查路径和大小写
本地双击 index.html 正常，一上传到 github.io 就变纯文字，90% 是路径写死或大小写不符——Windows 文件系统不区分大小写，Linux（GitHub Pages 所在环境）严格区分。
- CSS 如果外链，引用必须用相对路径：
<link rel="stylesheet" href="style.css">，而不是./css/style.css或绝对路径 - 文件名统一小写：
style.css、index.html、photo.jpg，避免Style.CSS或INDEX.HTML - 图片路径别用中文或空格，
my photo.jpg会被转义成my%20photo.jpg，容易 404 - 如果用了
<img src="images/avatar.png" alt="HTML怎么分步制作个人简历网页" >，确保images/目录真实存在且大小写一致
真正难的不是写出页面，而是同一份 HTML 在手机 Safari 里不缩放、在 Chrome 打印预览里不分页错乱、在 HR 的 PDF 查看器里保持段落完整——所有视觉动效和复杂布局，在 PDF 导出时基本归零。老实用 <section></section> + @media print，比折腾 JS 或框架更接近交付目标。
