纯html简历需结构清晰、语义准确、加载极快：用等语义化标签组织内容，内联精简css（≤1kb），禁用!important，字体用系统安全栈，项目必配真实可访问的live demo和source链接，技术栈写具体版本，并用@media print优化pdf导出。
纯 HTML 简历不是“做出来就行”，而是要让 HR 或技术面试官在 3 秒内确认你是谁、会什么、做过什么——这需要结构清晰、语义准确、加载极快，且不依赖任何框架或外部 CDN。
用 <section></section> 而不是 <div> 组织内容
<p>语义化标签直接告诉浏览器和屏幕阅读器“这是教育经历”“这是项目列表”，对 SEO 和无障碍访问有实际影响，也方便后续用 CSS 快速定位样式。</p>
<p>常见错误是全篇堆 <code><div class="section">，结果样式一改，结构就失去意义。正确做法是：
<ul>
<li>
<code><header></header> 包裹姓名、职位、联系方式
<section></section> 分别用于 experience、projects、skills、education
@#@#@#@#@#@#@#@#@#@0，链接需真实可打开（Vercel/Netlify 静态部署几秒搞定）@#@#@#@#@#@#@#@#@#@1，不要只写“代码见 GitHub”React 18.2；不是“Node”，而是 Node 20.x
导出 PDF 时字体和链接会丢？用 @media print 预留兜底
很多公司要求 PDF 版本，但 Chrome “另存为 PDF” 常导致链接消失、中文字体回退、灰色背景变黑。这不是 bug，是默认打印样式没适配。
加一段轻量 @media print 就能解决大部分问题：
@media print {
body { font-size: 12pt; line-height: 1.4; color: #000; background: #fff; }
a[href]:after { content: " (" attr(href) ")"; font-size: 10pt; }
img, video, svg { display: none; }
.no-print { display: none; }
}
这样导出的 PDF 会显示链接地址，去掉无关媒体元素，并确保中英文都用可嵌入的系统字体渲染。
真正难的不是写 HTML，而是每一条信息都经得起点击验证——链接打不开、技能写错版本、项目描述和代码库不一致，比排版丑更致命。
