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