应使用语义化html标签构建简历：用包基本信息，划分主模块，作模块标题，标记日期，列职责；剥离所有内联样式和javascript；精简class仅保留必要语义标识；pdf导出前需添加@media print规则并测试打印效果。
用语义化 HTML 标签代替 <div> 堆砌
<p><a style="color:#f60; text-decoration:underline;" title="简历" href="https://m.php.cn/zt/23893.html" target="_blank">简历</a>里最常见冗余，就是全用 <code><div> 包内容，再靠 class 强行定义结构。浏览器和屏幕阅读器都看不懂你在表达什么，也白白增加 DOM 节点数。
<p>直接用语义标签，既精简又自带含义：</p>
<ul>
<li>
<code><header></header> 包姓名、职位、联系方式
<section></section> 划分“教育背景”“工作经历”“项目经验”等主模块（别用 <div class="section">）
<li>
<code><h2></h2> 作每个模块标题（<h1></h1> 只用一次，给姓名）<time></time> 包日期（如 <time datetime="2022-09">2022.09–2024.06</time>），比纯文本更结构化<ul></ul> 和 <li> 表达职责条目，不用 <p></p> + 换行符模拟内联样式和 JavaScript 全部剥离
一份纯 HTML 简历不该有 style 属性、<style></style> 块或 <script></script> 标签——这些不是内容，是表现和行为，且极易引入冗余逻辑。
真实做法：
- 把样式抽成单独的
resume.css文件，用<link rel="stylesheet" href="resume.css">引入 - 如果必须单文件交付（比如发 PDF 前转 HTML），用
<style></style>标签放在里，但禁止写内联style="..." - 完全不用 JS：不自动填日期、不折叠模块、不加动画——简历不是 SPA，交互即冗余
删掉所有无意义的 class 和 id
很多模板喜欢给每个元素加一堆 class：class="section-title heading-2 font-bold mb-4"。这些全是 CSS 关心的事，HTML 层面只需表达“这是个模块标题”，别的都不该管。
判断一个 class 是否该留，就问：去掉它，这个元素的语义是否丢失？
- ✅ 保留：
class="skills-list"（说明这是一个技能列表，非通用<ul></ul>） - ❌ 删除：
class="mt-6 text-lg font-medium"（纯样式，CSS 里控制即可） - ❌ 删除：
id="contact-section"（除非你明确需要锚点跳转，否则不要加）
真正需要的 class 应该极少，通常只用于微调语义边界，比如 class="job-entry" 包裹一段完整工作经历，方便后续用 CSS 选择器统一处理。
PDF 导出前检查 HTML 是否可被打印友好解析
很多人以为 HTML 简历写完就完事，结果用浏览器「另存为 PDF」时出现分页错乱、内容截断、字体失效——这不是 HTML 冗余，而是没考虑输出目标的约束。
关键动作：
- 在
resume.css中加@media print规则，隐藏非内容元素（如导航、图标 SVG、背景图） - 避免用
flex或grid做复杂布局，PDF 打印引擎对它们支持不稳定；优先用block+margin控制流式结构 - 字体用系统安全字体栈，例如：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;，别依赖 Google Fonts 链接（离线导出会失败） - 测试方法：Chrome → 打开 HTML → Ctrl+P → 选“保存为 PDF”，看第一页是否完整、日期是否对齐、列表是否换行正常
HTML 简历真正的精简，不在于删了多少空格或注释，而在于每一行标签都在回答“这个内容在说什么”，而不是“我想让它看起来像什么”。一旦开始为屏幕阅读器、打印引擎、爬虫甚至未来十年的解析器写 HTML，冗余自然就没了。
