简历HTML应使用语义化标签：用<section>划分模块，<header>仅包顶部信息，<time>包裹日期，<ul><li>替代；打印适配需设max-width、重置@media print样式；移动端修复white-space和word-break；Grid布局需兼容旧浏览器。
简历页面该用什么HTML语义化标签组织内容
个人简历不是纯展示页，而是结构化信息载体。用 <section> 划分核心模块（如“教育背景”“工作经历”），比全用 <div> 更利于屏幕阅读器识别和SEO。每个模块标题必须用 <h2> 或递进的 <h3>，不能为省事堆砌 <h1> —— 浏览器和辅助工具会把多个 <h1> 当作内容层级混乱。
关键点：
-
<header>只包姓名、联系方式等顶部信息，别塞进“求职意向” - “技能”部分优先用
<ul>+<li>，避免用换行符<br>模拟列表 - 时间线类内容（如工作经历）用
<time>包裹日期，例如<time datetime="2020-03">2020.03–2022.08</time> - 避免嵌套过深：
<section> > <article> > <div> > <div>这种结构会让CSS定位和维护变脆弱
CSS排版时如何控制简历的打印适配与单页宽度
多数人把简历发PDF前会先在浏览器里打印预览，而默认HTML页面常因宽度失控导致内容被截断。解决核心是两件事：限制最大宽度 + 重置打印样式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 主容器加
max-width: 800px，配合margin: 0 auto居中，防止在大屏上拉伸变形 - 打印时禁用背景色和浮动：
@media print { * { background: transparent !important; color: #000 !important; } .no-print { display: none; } } - 避免使用
position: fixed或transform布局，它们在多数浏览器打印预览中渲染异常 - 字体大小统一用
rem或em，别混用px和%，否则缩放时行高错乱
响应式简历在手机端为何文字挤成一团
问题不在没写媒体查询，而在于忽略了行内元素默认不换行和盒模型叠加效应。比如技能标签用 <span> 并设了 padding 和 border，又没设 white-space: normal，小屏下就会溢出容器。
典型修复方式：
- 所有文本容器加
word-break: break-word，特别针对邮箱、长项目名这类不可分割字符串 -
<section>内部用display: flex; flex-direction: column;替代浮动布局，避免子元素塌陷 - 删掉全局
* { box-sizing: border-box; }外的其他重置，它和某些UI库冲突会导致padding计算异常 - 手机端隐藏非核心项：用
class="print-only"标记仅打印需要的内容，再用@media (max-width: 768px) { .print-only { display: none; } }
用CSS Grid做时间轴布局时容易漏掉的兼容性细节
Grid 确实适合做左右分栏的时间轴（左列年份、右列描述），但 grid-template-columns: 150px 1fr 在 Safari 15.6 之前不支持隐式轨道命名，且 IE 完全不支持。如果目标用户包含HR用旧版Edge，就得降级。
稳妥做法：
- 用
display: grid同时配display: -ms-grid（IE10/11），并手动写-ms-grid-column定位 - 时间轴项用
<dl><dt><dd>结构，语义清晰且天然支持老浏览器块级流式布局 - 避免
grid-area命名区域，改用grid-column-start这类基础属性，减少解析失败风险 - 测试时打开 Safari 的“开发 > 重新加载忽略缓存”，它对 Grid 的 CSS 缓存策略特别顽固
真正难的不是写出漂亮排版，而是让每段经历在Chrome打印、Safari预览、甚至Outlook内嵌查看时都不丢行、不重叠、不缩成小字——这些细节没在代码里显式写死，就在你删掉某条 !important 或改掉一个 flex-wrap 值的时候悄悄失效。
