语义化标签是HTML简历结构基础：用<header><section><h2><h3><p><ul>等标签替代<div>，利用浏览器默认样式实现可读性、可访问性与打印适配；同时需配置viewport、print媒体查询及正确路径引用。
用语义化标签搭结构，别一上来就写CSS
HTML简历最常犯的错，是把所有内容塞进一堆 <div> 里，再靠 CSS 强行排版。结果浏览器默认样式失效、打印时段落挤成一团、屏幕阅读器读不出层级——面试官用手机点开，第一眼看到的就是乱码式换行。
真正省力又靠谱的做法，是借力浏览器原生样式：用 <header> 包姓名和求职意向，每段工作经历用 <section> 隔开，公司名用 <h2>、职位用 <h3>、职责描述用 <p>，技能列表必须用 <ul> 而不是手敲 <br> 模拟。这些标签本身就有默认 margin、缩进和语义权重，不写一行 CSS 也能清晰可读。
-
<h1>全页只能有一个，放姓名，别写“我的简历”这种废话 - 邮箱和电话必须包在
<a href="mailto:xxx">和<a href="tel:xxx">里，否则手机点不开 - 避免
<font>、<center>这类废弃标签，现代浏览器可能直接忽略
导出PDF时内容被截断？重点查三处
Chrome “另存为 PDF” 看似简单，但简历常出现第一页只显示半段经历、联系方式变成不可点击超链接、页眉压字等问题。根本原因不是 HTML 写错了，而是没告诉浏览器“怎么印”。
实操上必须加这三样：
立即学习“前端免费学习笔记（深入）”；
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">放在<head>里，否则 PDF 导出可能按移动端视口缩放 - 在
<style>中加@media print { ... }规则：强制background为白色、color为黑色，去掉所有box-shadow和border - 给每段
<section>加break-inside: avoid;，防止某段工作经历被硬生生切到两页
测试前先用 Chrome 开发者工具切到 Print preview 模式（Ctrl+Shift+P → 输入 “Rendering” → 勾选 “Emulate CSS media type: print”），比反复导出快十倍。
部署到 GitHub Pages 后样式全没了？路径和大小写是元凶
本地双击 index.html 一切正常，一推到 github.io 就变纯文字——90% 是路径写死，剩下 10% 是文件名大小写不符（Windows 不敏感，Linux 敏感）。
CSS 如果单独放在 style.css 文件里，引用必须用相对路径：<link rel="stylesheet" href="style.css">。别写 ./style.css（多余点斜杠）或 /style.css（根路径，在 GitHub Pages 下会指向 username.github.io/style.css，而不是你的仓库）。
图片路径同理：img/avatar.jpg 要确保文件夹结构一致；如果图存在 assets/img/ 下，路径就得写成 assets/img/avatar.jpg，且文件名大小写完全匹配。
响应式不是加个媒体查询就完事，关键在 viewport 和禁用 fixed
很多人以为只要写了 @media (max-width: 768px) { ... } 就算响应式了，结果手机打开还是横向滚动、字体小得看不清。问题往往出在两个被忽略的底层设置：
- 必须有
<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则移动端浏览器会按桌面宽度渲染，再缩小显示 - 绝对不要用
position: fixed布局头部或导航栏——PDF 导出引擎和部分低端安卓 WebView 对它支持极差，会导致内容重叠或消失 - 避免
float布局，改用display: flex或语义化流式结构，更稳定也更易维护
复杂点在于：同一份 HTML 要同时满足“手机看得清”“打印不跨页”“屏幕阅读器能朗读”。这三个目标偶尔冲突，比如打印时要隐藏导航，但手机端又需要它。这时候就得靠 @media screen 和 @media print 分离控制，而不是堆一个万能样式表。
