简历HTML结构应语义化分块：用<section>包裹联系信息（<address>）、教育背景（<ul>）、工作经历（<article>）、技能清单（<dl>），标题层级严格为<h1>至<h3>，时间用<time>标签，路径须相对且全小写，确保ATS可读与打印友好。
index.html 里怎么组织简历结构才不乱
直接用 <div> 堆内容，很快就会变成“改一行崩三处”。简历网页不是写作文，得按语义分块：联系信息、教育背景、工作经历、技能清单——每一块都该用独立的 <section> 包裹，而不是全塞进一个 <main> 或一堆 <div class="block">。
常见错误是把邮箱电话写在 <p> 里就完事，结果屏幕阅读器读不出这是联系信息。正确做法是用 <address> 标签包联系方式，它自带语义，且默认斜体（可后续用 CSS 覆盖）。
- 教育经历用
<ul>列学校+学位+时间，别用<table>——表格语义是“二维数据对比”，不是“罗列条目” - 工作经历每条用
<article>，因为每段经历是独立、自包含的内容单元 - 技能项用
<dl><dt>前端</dt><dd>HTML/CSS/React</dd></dl>，比<ul>更准确表达“类别→具体项”的关系
CSS 排版时哪些样式必须手写，哪些可以省
别一上来就套 Bootstrap 或 Tailwind。简历网页就一页，加载快、打印友好才是关键。Flexbox 足够搞定 90% 布局，Grid 只在做技能雷达图或双栏证书展示时才必要。
容易踩的坑：用 text-align: center 居中整个简历——会导致所有段落文字居中，阅读体验极差。标题可以居中，正文必须左对齐（text-align: left），这是可读性底线。
立即学习“前端免费学习笔记（深入）”；
- 姓名用
<h1>，职位用<h2>，其他小标题统一用<h3>，别为了“好看”改成<span>+ 字体加大 - 时间信息（如“2020–2023”）建议用
<time datetime="2020-01">2020–2023</time>，方便未来被爬虫或 ATS 系统识别 - 打印时隐藏无关元素：加
@media print { .no-print { display: none; } }，然后给分享按钮、导航栏加class="no-print"
简历网页上线后打不开？检查这三处硬伤
本地双击打开 index.html 没问题，一上传到 GitHub Pages 或 Vercel 就白屏，大概率是路径写死了。
典型错误：CSS 文件写成 <link href="css/style.css" rel="stylesheet">，但实际项目根目录下根本没有 css/ 文件夹；或者图片路径用 C:\Users\Me\Desktop\resume\photo.jpg 这种绝对路径。
- 所有资源路径用相对路径：图片放
./img/photo.jpg，CSS 放./style.css，确保文件结构扁平（index.html、style.css、img/同级） - 检查浏览器控制台（F12 → Console）有没有
404报错，报哪行就修哪行的href或src - GitHub Pages 默认只认小写文件名，上传了
Style.CSS，引用却写style.css，在 Windows 本地能跑，Linux 服务器直接 404
想让简历被招聘系统（ATS）识别，HTML 里不能删的标签
很多公司用 ATS（Applicant Tracking System）初筛简历，它们不解析 JavaScript，也不懂 fancy CSS 动画，只认结构化 HTML 标签和纯文本流。
最常被忽略的是：把“JavaScript”写在 <span class="skill">JavaScript</span> 里，ATS 可能当普通字符串跳过；但如果写成 <dt>编程语言</dt><dd>JavaScript, Python, TypeScript</dd>，它就能归类到技能字段。
- 姓名必须出现在
<h1>，且不能藏在background-image或 SVG 里 - 邮箱必须是
<a href="mailto:xxx@xx.com">xxx@xx.com</a>，别用图片或 JS 加密混淆 - 避免用 CSS 把文字移出视口（如
position: absolute; left: -9999px）来“隐藏关键词”，ATS 会直接忽略这类内容
排版越简单，被机器读取的概率越高。花哨动效留到个人作品集页，简历页就老老实实当一份能被读懂的文档。
