简历HTML必须包含语义化标签：<header>（姓名与联系方式）、<section>（分块如experience）、<article>（每段经历）、<time>（时间）、<h3>/<h4>（公司/职位）、<address>（联系信息）、<ul>/<ol>（技能/成果），且<h1>仅用于唯一姓名。
简历HTML结构必须包含哪些语义化标签
纯
堆砌的简历在SEO、屏幕阅读器和未来维护上都会出问题。直接用语义化标签，不是为了“看起来高级”，而是让招聘系统、ATS（求职追踪系统）能准确提取你的姓名、职位、工作经历这些关键信息。
核心结构按顺序固定：<header>放姓名和联系方式，<section>分块组织内容（如<section id="experience">），每段经历用<article>包裹，时间用<time datetime="2022-03">，公司名用<h3>，职位用<h4>。避免把所有内容塞进一个<div class="content">里——ATS可能直接跳过没语义的区块。
-
<address>只用于联系信息（邮箱、电话、LinkedIn），别塞地址以外的内容 -
<ul>和<ol>要配合使用：技能列表用<ul>，项目成果按重要性排序时用<ol> - 别用
<h1>写“我的简历”——<h1>只能是你的姓名，且全文唯一
CSS排版时最容易破坏可访问性的三处细节
字体大小、行高、颜色对比度不是“好不好看”的问题，而是“能不能被读取”的问题。很多简历PDF转HTML后直接复制内联样式，结果在Windows高对比度模式下文字全消失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 正文用
rem单位（如font-size: 1rem），根元素:root设font-size: 16px，确保缩放时比例一致 - 行高至少
line-height: 1.5，技术栈标签类短文本可用1.3，但段落描述必须≥1.5 - 文字与背景对比度必须≥4.5:1（用Chrome DevTools的Accessibility面板实时检查），
#333配#fff合格，#666配#f8f9fa不合格
响应式简历在手机端失效的常见原因
加了@media查询却依然在iPhone上横向滚动？大概率是忘了重置默认行为或用了固定宽度。
关键修复点：
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在，且不能被JS动态修改 - 删掉所有
width: 960px、max-width: 1200px这类固定值，改用width: 100%+padding控制留白 - 技术栈图标用
flex-wrap: wrap代替float或inline-block，否则小屏会挤成一行溢出 - 用
min-width: 0处理<pre>代码片段，防止长技术名词（如React.memo()）撑破容器
导出为PDF时字体丢失或格式错乱怎么办
浏览器“打印为PDF”功能依赖系统字体，而font-family: "Helvetica Neue"这种Mac专属字体在Windows或Linux下会降级成宋体，导致排版偏移。
稳妥方案：
- 只用无衬线通用字体栈：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif - 避免
@font-face自定义字体——多数PDF生成器不支持WOFF解析 - 打印样式单独写：
@media print { body { font-size: 12pt; margin: 0; } }，移除box-shadow、background-image等不可打印属性 - 用
page-break-inside: avoid包住每个<article>，防止工作经历被截断到两页
复杂点在于：ATS系统对PDF的解析能力参差不齐，有些连表格都识别不了。如果投递渠道明确要求PDF，优先保证语义结构完整，而不是追求视觉特效。
