用html5语义化标签（如）构建单文件简历，配viewport、内联样式、base64图片及@media print优化，确保ats识别、移动端适配与pdf打印可用。
直接用 HTML 写个人简历网页，不需要框架、不依赖服务器，关键在于结构清晰、语义正确、能快速被浏览器和招聘系统识别。下面按实际搭建顺序讲清楚怎么做。
用 <section></section> 划分简历模块，别堆 <div><p>HTML5 的语义化标签不是装饰，<code><section></section>、<header></header>、<article></article> 能让屏幕阅读器和 ATS（招聘系统）更好解析内容。比如“教育背景”“工作经历”都该用 <section></section> 包裹，而不是一堆无意义的 <div class="box">。<p>常见错误：把整个简历塞进一个 <code><div id="resume">，结果搜索引擎和 HR 系统抓不到重点。<ul>
<li>
<code><header></header> 放姓名、联系方式（用 <address></address> 包邮箱/电话更规范）
<article></article>，内部用 <time></time> 标注起止时间（如 <time datetime="2021-03">2021.03–2023.08</time>）<ul></ul>，但注意：全文只允许用 <ul></ul> 作为列表容器，不能用 <ol></ol> 或自定义符号——这是 HTML 规范限制，不是建议内联样式够用，但必须加 viewport 和基础字体重置
纯 HTML 简历页最容易在手机上崩排版，根源常是漏了 <meta name="viewport">。没有它，移动端会按桌面宽度缩放，文字小得看不清。
也不必引入完整 CSS 框架。几行内联样式就能稳住基本体验：
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; color: #333; }
section { margin-bottom: 1.5rem; }
h2 { border-bottom: 2px solid #007bff; padding-bottom: 0.3rem; }
</style>
注意：font-family 列表里优先写系统字体，避免加载失败导致全站显示成宋体；line-height 设为 1.6 是可读性底线，低于 1.4 容易串行。
导出为单 HTML 文件时，图片必须用 base64 或相对路径
如果你把简历发给 HR，或上传到某些只支持单文件的平台（如 GitHub Pages 的 index.html），就别用外链图床或绝对路径 /images/photo.jpg——本地双击打开直接 404。
- 头像小图（≤5KB）可转 base64：
<img src="data:image/png;base64,iVBORw0KGgo...">，粘贴进src即可 - 其他图用相对路径，确保图片和 HTML 在同一文件夹，例如
<img src="avatar.jpg"> - 绝对不要用
file:///开头的路径，浏览器安全策略会拦截
打印 PDF 前检查 @media print 和链接可见性
HR 很可能把你的网页简历打印成 PDF，这时默认样式会暴露问题：蓝色链接变黑、超链接地址消失、侧边栏乱入正文。
加一段简易打印样式即可：
<style media="print">
nav, aside, .no-print { display: none; }
a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
body { font-size: 12pt; }
</style>
关键点：a[href]::after 能让每个链接后面自动补上网址，避免“点击此处了解更多”这种无效描述；nav 和 aside 必须隐藏，否则 PDF 里出现“返回首页”按钮就很尴尬。
真正麻烦的是简历里嵌了在线作品链接（比如 CodePen、Figma），这些在 PDF 里完全失效。如果非放不可，至少把 URL 文字显式写出，别只靠锚文本。
