纯HTML简历应使用语义化标签（如<section><time>），禁用CSS框架和内联样式，仅用<style>块控制基础排版；确保ATS可解析、打印稳定、移动端适配，内容精炼聚焦一页。
纯 HTML 搭建“精美”个人简历，容易陷入两个误区：一是过度依赖 CSS 框架（比如 Bootstrap）导致结构臃肿、语义混乱；二是手写大量花哨动画和响应式代码，反而让简历在招聘系统（ATS）里被解析失败，或在邮件客户端中错位。真正靠谱的做法是：用语义化 HTML 打底，轻量 CSS 控制视觉，优先保证可读性、可访问性和 ATS 友好性。
用 <section> 而不是 <div> 组织内容区块
很多简历把所有内容塞进一堆 <div class="block">，这会让屏幕阅读器和 ATS 无法识别内容层级。浏览器默认不渲染 <section> 的样式，但它自带语义——它代表一个独立的主题内容单元。
-
<section id="experience">包裹工作经历，比<div class="exp">更利于被解析 - 每个
<section>内部用<h2>作标题（如<h2>工作经验</h2>），不要用<h3>或<span>模拟标题 - 避免嵌套过深：
<section> → <article> → <header> → <h3>是合理路径；<div> <div> <div>是反模式
简历里别用 position: absolute 或 flex 布局做“排版设计”
看似能精确控制位置，实际会导致三类问题：打印时内容错乱、Gmail 等邮件客户端直接忽略样式、ATS 把错位文本拼成无意义长句（比如把公司名和职位名拆到不同段落）。
- 用
margin和max-width控制宽度和间距，而不是靠left: 20px - 时间线类内容（如“2022.03–2024.06｜高级前端工程师”）用
<time>标签包裹日期：<time datetime="2022-03">2022.03</time>–<time datetime="2024-06">2024.06</time>，提升机器可读性 - 技能列表用
<ul>+<li>，别用display: inline-block强行横排——换行时语义仍清晰，且适配小屏
导出 PDF 时字体和链接失效？检查 @media print 和 rel="noopener"
Chrome “另存为 PDF” 或浏览器打印功能常漏掉自定义字体、图标字体，甚至把 <a href="mailto:..."> 渲染成空白或乱码。
立即学习“前端免费学习笔记（深入）”；
- 在 CSS 中加
@media print { font-family: "Times New Roman", serif; }，避免无衬线字体在 PDF 里发虚 - 邮箱和 GitHub 链接必须带
rel="noopener"（安全要求），但也要加target="_blank"—— 否则 PDF 里点击无效 - 图标别用 Font Awesome 的
<i class="fa"></i>，改用 SVG 内联或 Unicode 符号（如?、?），确保 PDF 导出后不丢失
最常被忽略的其实是文件命名和 MIME 类型：把简历保存为 zhangsan-resume.html（而非 index.html），并在服务器或 GitHub Pages 中确保响应头包含 Content-Type: text/html; charset=utf-8。否则中文字符可能乱码，ATS 也可能拒绝解析。
