纯html简历需兼顾语义化、样式可控与打印适配：用替代套娃，配合print媒体查询清除背景、隐藏非核心元素、锁定字体，并利用折叠技术栈，同时声明viewport和使用https外链。
纯 HTML 简历不是“写个页面交差”，而是要在无框架、无构建工具的前提下，让简历在 Chrome、Safari、Edge 甚至打印时都保持结构清晰、语义准确、样式可控——关键在于语义化标签 + CSS 层叠控制 + 打印适配三者咬合。
用 <section></section> 和 <article></article> 替代 <div> 套娃<p>很多简历用一堆 <code><div class="section"> 堆内容，结果屏幕阅读器读不出层级，打印时也容易断页错乱。语义标签本身不带样式，但能被浏览器默认赋予合理间距和 outline 逻辑。<ul>
<li>
<code><section></section> 包裹「工作经历」「教育背景」这类独立主题块，浏览器会将其视为一个逻辑单元，print 媒体查询中可用 break-inside: avoid 防止跨页截断
<article></article> 用于每段工作经历内部——它自带隐式 heading 级别，配合 <h3></h3>（公司名）+ <time></time>（日期）能被 LinkedIn 或 ATS 工具更准识别<section> > <article> > <div> 中的 <code><div> 改用 <code><ul></ul> 或 <dl></dl> 描述技能/项目点，保持语义密度
print 媒体查询里必须重置的三件事
用户 Ctrl+P 一按，发现联系方式跑最后一页、技能栏被截成两半、深色主题变灰糊一片——问题全出在没做打印专用样式。
- 强制清除背景色：
@media print { * { background: transparent !important; } }，否则浅色文字在白纸打印时消失 - 隐藏非核心元素：
@media print { .contact-icon, .nav, .social-link { display: none; } }，图标和导航对纸质简历毫无意义 - 锁定字体与行高：
@media print { body { font-family: "Times New Roman", serif; line-height: 1.4; } }，避免系统缺失字体导致排版坍塌
用 <details></details> 实现“面试官可展开”的技术栈折叠区
硬塞 20 个技术名词在一页上，既占空间又稀释重点。HTML5 原生 <details></details> 不依赖 JS，支持键盘聚焦和屏幕阅读器朗读，比手写 onclick 切换更可靠。
<details><summary>前端技术栈</summary><ul>
<li>React（v18，含 Server Components 实践）</li>
<li>TypeScript（严格模式 + 自定义 ESLint 规则）</li>
</ul></details>
- 默认收起，节省首屏空间；点击后自然展开，CSS 可用
details[open] > summary::after换箭头图标 - 不要给
<summary></summary>加tabindex——它原生可聚焦，加了反而破坏可访问性 - 打印时默认展开：
@media print { details { display: block; } details[open] > summary { display: list-item; } }
最常被忽略的是：简历 HTML 文件本身要声明 <meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 缩放错乱；还有所有外链资源（如字体）必须用 https，否则现代浏览器直接拦截，连本地双击打开都可能空白。
