纯HTML简历应以语义化标签、可访问性、ATS兼容和跨平台稳定为首要目标：用等标签构建结构，禁用Flex/Grid，仅用系统字体与基础CSS，确保邮件客户端、PDF导出及屏幕阅读器正常解析。
纯 HTML 简历不是“炫技舞台”，而是能被 HR 快速扫描、被 ATS（招聘系统）正确解析、在手机上不崩 layout 的最小可靠交付物。项目经验不是罗列技术栈，而是用 HTML 本身讲清楚你解决了什么问题、怎么验证的、边界在哪。
HTML 结构必须用语义化标签，别用 div 堆砌
很多求职者用一堆 div + class 模拟标题、列表、段落，结果 ATS 抓不到“工作经历”“项目名称”这些关键块，手机端也容易错行。浏览器默认样式弱，但语义标签自带轻量结构和可访问性基础。
- 用
<section></section>包裹每个大模块（如<section id="projects"></section>），比<div class="section-projects"> 更易被解析 <li>项目标题必须是 <code><h3></h3>（不是<h2></h2>或<span></span>），因为简历层级：一级是姓名（<h1></h1>），二级是模块名（<h2></h2>），三级才是具体项目（<h3></h3>） - 技术栈列表用
<ul></ul>，哪怕只写一行——不是为了“好看”，是让屏幕阅读器和爬虫知道这是并列关键词 - 每个项目下必须有
<a href="https://github.com/xxx">GitHub</a>或<a href="https://xxx.vercel.app">线上 Demo</a>，且链接文本明确（别写“点击这里”） - 截图用
<img src="screenshot.jpg" alt="订单页支持微信/支付宝双支付入口，错误状态显示重试按钮">—— alt 文本不是装饰，是告诉 ATS “这个项目处理了支付流程异常” - 关键逻辑用
<pre class="brush:php;toolbar:false;"><code>fetch('/api/order').then(res => res.json()).catch(() => showRetryBtn())</code></pre>，代码不用全贴，只贴体现你决策的那一行 - 布局靠
<table> 或纯 margin/padding —— 是的，就用表格。它在所有环境都稳定，且语义上“技能矩阵”“时间轴”本来就是表格数据 <li>字体只用系统安全字体：<code>font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;，别加 Google Fonts 链接（加载失败就变空白） - 颜色控制在 2 种主色（如深灰 + 蓝），避免
rgba()或渐变 —— Outlook 会直接忽略整条样式声明 - 导出前在 Chrome 打开打印预览（Ctrl+P），检查所有链接是否显示为蓝色下划线、能否鼠标悬停看到完整 URL
- 中文字体必须显式声明
font-family，并在预览中逐字确认无乱码；若仍有方框，临时换用"PingFang SC", "Hiragino Sans GB"等更宽泛的 fallback - 项目截图务必用 PNG（非 WebP），部分 PDF 工具不识别 WebP，会留白
项目经验要带可验证的“动作锚点”，别只写“使用 Vue”
HR 和技术面试官扫简历时，真正看的是“你动过手的地方”。纯描述性文字（如“负责前端开发”）毫无信息量，而一个带链接、带截图 alt 文本、带关键代码片段的 <figure></figure> 块，会立刻建立可信度。
CSS 只做必要修饰，禁用 Flex/Grid 布局
简历 HTML 文件要能在 Outlook、Gmail 邮件客户端、甚至某些内网 ATS 中正常显示。这些环境对 CSS 支持极差，Flex/Grid 几乎必然失效，导致内容堆叠或错位。
立即学习“前端免费学习笔记（深入）”；
导出 PDF 时字体和链接必须手动验证
Chrome “另存为 PDF” 看似方便，但常把 <a></a> 标签转成纯文本，或把中文字体渲染成方框。这不是你的 HTML 写错了，是 PDF 引擎的缺陷。
最常被忽略的其实是项目里的“未完成项”——比如“登录态在 Safari 14 下失效，已定位是 document.cookie 的 SameSite 默认值差异”。把它写进简历的“备注”栏，比写十遍“熟悉 Cookie”更有说服力。
