应使用语义化HTML（如）替代堆砌，抽离JSON数据、BEM命名CSS、自动化PDF生成与校验，实现简历高效维护。
用语义化 HTML 结构打底，别用 堆砌简历纯靠 和 写简历，半年后自己都难改。浏览器不关心“这是工作经历”，但 实操建议：
- 用
id 方便锚点跳转或 JS 操作，比如
- 每段工作/项目用
datetime 属性值规范，后续可被脚本解析排序
- 避免嵌套过深：三级以内结构足够清晰，比如
→ →
把数据和样式彻底分开：用 JSON 管理内容，HTML 只做容器
硬编码在 HTML 里的姓名、公司名、技能列表，每次换工作都要打开 index.html 手动改七八处，极易漏改或格式错乱。真正易维护的做法是把所有可变内容抽成外部 JSON 文件。
实操建议：
- 建一个
data/resume.json，字段按模块组织，例如：{"personal": {"name": "张三", "email": "zhang@example.com"}, "skills": ["React", "TypeScript"]}
- HTML 中只留占位结构，比如
- 用几行
fetch() + innerHTML 或 textContent 注入数据（无需框架），加载失败时 fallback 到静态 HTML 备份
- 导出 PDF 时，用 Puppeteer 或浏览器打印，它只会渲染最终 DOM，完全不受 JSON 加载影响
CSS 用 BEM 命名 + 工具类辅助，禁用行内样式和 ID 选择器
写个 style="margin-top: 24px" 或 #work-item-1 { color: #333 }，等于给维护埋雷：改一处样式，得全局搜 24px 或 work-item-1，还容易污染其他页面。
实操建议：
- 主样式表用 BEM，比如
.section--experience、.job__title、.job__period，含义明确且作用域隔离
- 小范围调整优先用工具类：
- 禁用
!important；颜色/间距等统一抽成 CSS 自定义属性，比如 :root { --spacing-md: 1rem; --color-primary: #2563eb; }
- 打印样式单独写
@media print 块，隐藏页眉页脚、调整字体大小，确保 Ctrl+P 导出 PDF 时干净
自动化生成 PDF 和校验，别靠肉眼检查链接/日期/拼写
手动导出 PDF 后再打开看有没有错字、断链、年份写成 2023 而不是 2024，效率低且不可靠。维护成本高的本质，是重复劳动没被机器接管。
实操建议：
- 用
puppeteer 脚本自动拉起 Chromium，加载本地 HTML，保存为 resume.pdf，一行命令更新全部输出：npx puppeteer index.html
- 加简单校验逻辑：读取
resume.json，检查 dateStart 是否早于 dateEnd，邮箱是否含 @，所有 https:// 开头（避免本地路径误提交）
- 拼写检查用
codespell 扫描 HTML 文本节点（需先提取纯文本），比肉眼快十倍
最麻烦的从来不是写第一版简历，而是三年后改两行内容却要花二十分钟找哪漏了斜杠、哪个 class 名拼错了、PDF 页边距又崩了——把结构、数据、样式、输出全部解耦，剩下的就是改 JSON 再跑个命令。
纯靠 实操建议： 硬编码在 HTML 里的姓名、公司名、技能列表，每次换工作都要打开 实操建议： 写个 实操建议： 手动导出 PDF 后再打开看有没有错字、断链、年份写成 2023 而不是 2024，效率低且不可靠。维护成本高的本质，是重复劳动没被机器接管。 实操建议： 最麻烦的从来不是写第一版简历，而是三年后改两行内容却要花二十分钟找哪漏了斜杠、哪个 class 名拼错了、PDF 页边距又崩了——把结构、数据、样式、输出全部解耦，剩下的就是改 JSON 再跑个命令。、、 这些标签自带含义，既方便后期加 CSS 或 JS 逻辑，也利于屏幕阅读器和 SEO（哪怕只是本地 PDF 导出）。
包裹每个大模块（如“教育背景”“项目经验”），加 id 方便锚点跳转或 JS 操作，比如
，体现独立内容单元；公司名、职位用 ，时间用 —— datetime 属性值规范，后续可被脚本解析排序把数据和样式彻底分开：用 JSON 管理内容，HTML 只做容器
index.html 手动改七八处，极易漏改或格式错乱。真正易维护的做法是把所有可变内容抽成外部 JSON 文件。
data/resume.json，字段按模块组织，例如：{"personal": {"name": "张三", "email": "zhang@example.com"}, "skills": ["React", "TypeScript"]}
、fetch() + innerHTML 或 textContent 注入数据（无需框架），加载失败时 fallback 到静态 HTML 备份CSS 用 BEM 命名 + 工具类辅助，禁用行内样式和 ID 选择器
style="margin-top: 24px" 或 #work-item-1 { color: #333 }，等于给维护埋雷：改一处样式，得全局搜 24px 或 work-item-1，还容易污染其他页面。
.section--experience、.job__title、.job__period，含义明确且作用域隔离（需提前定义好这套类，别现场写）!important；颜色/间距等统一抽成 CSS 自定义属性，比如 :root { --spacing-md: 1rem; --color-primary: #2563eb; }
@media print 块，隐藏页眉页脚、调整字体大小，确保 Ctrl+P 导出 PDF 时干净自动化生成 PDF 和校验，别靠肉眼检查链接/日期/拼写
puppeteer 脚本自动拉起 Chromium，加载本地 HTML，保存为 resume.pdf，一行命令更新全部输出：npx puppeteer index.html
resume.json，检查 dateStart 是否早于 dateEnd，邮箱是否含 @，所有 链接是否以 https:// 开头（避免本地路径误提交）codespell 扫描 HTML 文本节点（需先提取纯文本），比肉眼快十倍
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
