纯HTML简历是可控性、可访问性、可长期存档的最优解，需用语义化标签、原生CSS、等宽字体回退链，并确保邮箱电话可点击、代码可验证、PDF打印可用。

纯 HTML 简历不是“炫技入口”，而是可控性、可访问性、可长期存档的最优解——只要你别用 flex 布局把屏幕阅读器搞晕，也别把联系方式藏在 background-image 里。

用语义化标签代替 div 堆砌

很多程序员写简历时习惯全用 <div>，结果搜索引擎和 AT（辅助技术）根本分不清哪块是技能、哪块是项目。实际只需几处关键替换： <ul> <li> <code><section></section> 包裹「工作经历」「教育背景」等逻辑区块

<h2></h2> 作为一级子标题（如「技术栈」），<h3></h3> 用于公司名或项目名，禁止跳级

<ul></ul> 列技能项，但注意：如果某项含多个子技能（如「React：Hooks、Redux Toolkit、Server Components」），用 <dl> <dt></dt> <dd></dd> </dl> 更准确

邮箱和电话必须用 <a href="mailto:..."></a> 和 <a href="tel:..."></a>，别写成纯文本

避免 CSS 框架带来的隐性风险

用 Tailwind 或 Bootstrap 的简历模板看似省事，但会引入三类问题：

• 生成的 class 名（如 sm:text-lg md:leading-relaxed）让简历 PDF 打印时字体/行高错乱，尤其 macOS 预览器
• 框架默认重置了 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 样式，导致你贴的代码片段（如 &lt;code&gt;git log --oneline&lt;/code&gt;）缩进全崩&lt;/li&gt; &lt;li&gt;深色模式下，某些框架的 &lt;code&gt;bg-gray-50&lt;/code&gt; 在暗色系统里变成黑底黑字——HR 看不到你的 GitHub 链接&lt;/li&gt; &lt;li&gt;建议：只用原生 CSS 写响应式，媒体查询控制 &lt;code&gt;@media (max-width: 600px)&lt;/code&gt; 下的 &lt;code&gt;font-size&lt;/code&gt; 和 &lt;code&gt;padding&lt;/code&gt;，不碰 &lt;code&gt;grid&lt;/code&gt; 或复杂动画&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;让简历在终端和打印场景下依然可用&lt;/H3&gt; &lt;p&gt;技术岗简历常被 HR 用 &lt;code&gt;curl&lt;/code&gt; 抓取、用 &lt;code&gt;lpr&lt;/code&gt; 直接打印，或丢进 &lt;code&gt;wkhtmltopdf&lt;/code&gt; 转 PDF。这时候这些细节决定是否失效：&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/ai/2249&quot; title=&quot;超级简历WonderCV&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/ai_manual/000/000/000/175679998691134.png&quot; alt=&quot;超级简历WonderCV&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/ai/2249&quot; title=&quot;超级简历WonderCV&quot;&gt;超级简历WonderCV&lt;/a&gt; &lt;p&gt;一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/ai/2249&quot; title=&quot;超级简历WonderCV&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt; &lt;ul&gt; &lt;li&gt;所有字体声明必须带回退链：&lt;code&gt;font-family: &quot;SFMono-Regular&quot;, Consolas, &quot;Liberation Mono&quot;, Menlo, monospace;&lt;/code&gt;（优先选等宽字体，方便展示命令行/代码）&lt;/li&gt; &lt;li&gt;禁用 &lt;code&gt;position: fixed&lt;/code&gt; 和 &lt;code&gt;transform&lt;/code&gt;——&lt;code&gt;wkhtmltopdf&lt;/code&gt; 对这两者支持极差，容易切掉右半边内容&lt;/li&gt; &lt;li&gt;图片仅用于头像，且必须设 &lt;code&gt;width&lt;/code&gt; 和 &lt;code&gt;height&lt;/code&gt; 属性（否则 PDF 里显示为 0×0）；头像路径用相对路径，别用 &lt;code&gt;data:&lt;/code&gt; URI（base64 过长会导致 PDF 生成失败）&lt;/li&gt; &lt;li&gt;在 &lt;code&gt;&lt;head&gt;&lt;/code&gt; 加这行：&lt;code&gt;&lt;meta name=&quot;robots&quot; content=&quot;noindex, nofollow&quot;&gt;&lt;/code&gt;，避免被爬虫当模板抓走&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;项目链接和代码片段怎么放才不翻车&lt;/H3&gt; &lt;p&gt;技术简历里最常被忽略的是「可验证性」——你写了「用 Rust 实现了 LRU Cache」，但没给链接或代码，等于没写。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;GitHub 链接统一用 &lt;code&gt;&lt;a href=&quot;https://github.com/xxx/yyy&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;/code&gt;，&lt;code&gt;rel&lt;/code&gt; 属性不能少，否则安全扫描工具会标红&lt;/li&gt; &lt;li&gt;嵌入代码片段时，用 &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code class=&quot;rust&quot;&gt;...&lt;/code&gt;</pre>
• 别把整个 main.rs 贴进去，只放核心函数（如 <code>impl LRUCache），并确保缩进是 2 或 4 个空格（别混用 tab）
• 如果项目有部署地址，用 <a href="https://demo.example.com">Live demo</a> • <a href="https://github.com/...">Source</a> 并排，中间用 • 分隔，比换行更节省垂直空间

真正难的不是写出 HTML，而是克制住想加「滚动视差」「技能雷达图」或「点击展开项目详情」的冲动——那些东西在招聘系统里大概率被解析失败，或者根本没人点。