可行但需规避两大误区：一是重CSS轻语义结构，二是滥用div。必须用h1-h3严格层级、section划分模块、dl/ul表达技能、address包裹联系方式；CSS布局须兼顾屏幕阅读器与PDF导出，字体、链接、页眉页脚需针对性处理。
纯 HTML 搭建“高颜值”个人简历，不靠框架、不靠模板网站，是可行的，但容易陷入两个误区：一是过度依赖 CSS 美化而忽略语义结构，二是把 div 当万能容器，导致屏幕阅读器无法识别、SEO 零支持、打印排版错乱。
用对语义化标签，比加阴影动效更重要
简历本质是结构化文档，h1 到 h3 要严格按层级表达信息主次，比如姓名用 h1，工作经历用 section 包裹，每段经历用 article 或 dl（定义列表）表达职位+时间+职责。避免全篇 div + class 堆砌。
-
h1只出现一次，必须是你的姓名 - 教育背景、项目经验等大模块用
section，不是div - 技能列表优先用
ul，若带描述（如“React：主导 3 个组件库重构”），改用dl，dt放技能名，dd放说明 - 联系方式放
address元素内，它原生语义就是“联系信息”，且部分邮件客户端会自动识别
CSS 控制视觉，但别让 flex/grid 破坏可读性
用 display: flex 排版技能栏或时间轴很常见，但要注意：flex 容器内子元素顺序与 DOM 顺序不一致时（比如用 order 调换位置），屏幕阅读器仍按 HTML 顺序读取，会造成逻辑混乱。打印 PDF 时，flex 布局也可能被截断或错行。
- 时间轴类内容（如工作经历）优先用普通文档流 +
margin控制间距，而非flex横向排列年份和标题 - 多列技能展示，用
grid更稳妥，但设置grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))，避免小屏下强行撑开 - 所有颜色对比度必须 ≥ 4.5:1（可用浏览器插件 Lighthouse 检测），别只看自己显示器效果
导出 PDF 时字体和链接经常失效
本地打开 HTML 文件用 Chrome “打印 → 保存为 PDF”，常出现中文字体回退成宋体、超链接变灰、页眉页脚遮挡内容等问题。
立即学习“前端免费学习笔记（深入）”；
- 强制指定 Web 安全字体栈：
font-family: "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif; - PDF 中超链接需保留可点击性：给
a加text-decoration: underline，并确保target="_blank"不影响导出（实际不影响，但很多人误删） - 禁用页眉页脚：Chrome 打印设置里关掉“页眉和页脚”，否则默认插入网址，挤占简历正文空间
- 避免使用
background-image做装饰底图——PDF 导出时多数不渲染，留白难看
真正卡住人的，从来不是怎么让简历“好看”，而是当 HR 用 NVDA 屏幕阅读器听你简历时，能不能在 3 秒内听清你是谁、做过什么、会什么。语义结构没立住，再炫的 CSS 都是空中楼阁。
