用纯HTML写简历页最快能打开、分享和打印，核心是信息清晰、结构正确、手机可读；需用语义化标签搭骨架，如<header>放姓名职业简介，<section>分块内容，<h2><h3>作标题，电话邮箱用tel:/mailto:链接，技能用<ul>列表，经历用<dl><dt><dd>结构，禁用固定宽和换行，图片加max-width:100%，导出PDF时用系统安全字体栈并确保href有效。
用纯 HTML 写简历页，先别碰 CSS 和 JS
直接写 index.html 是最快能打开、能分享、能打印的方案。浏览器双击就运行，不依赖服务器，也不怕部署出错。重点不是“多好看”，而是“信息清晰、结构正确、手机能看”。
常见错误是上来就调字体、加动画，结果姓名都挤在左上角，联系方式藏在滚动到底才看到。先用语义化标签搭骨架：
-
<header>放姓名、职业、一句话简介 -
<section>每块内容（教育、工作、技能）独立包裹，别全堆<div> -
<h2>作小标题（如“工作经历”），<h3>作公司名或学校名，别用<strong>或<font>模拟标题 - 电话、邮箱用
<a href="tel:...">和<a href="mailto:...">，点开手机能直接拨号/发信
简历里哪些内容必须用列表，哪些不能硬换行
“熟练掌握 Python、JavaScript、SQL” 这种技能堆砌，用 <ul> 或 <ol> 明确分项，比空格/顿号分隔更利于屏幕阅读器识别，也方便后续加图标或进度条。
但“2021.06–2023.08｜XX 公司｜前端开发”这种复合信息，别用 <br> 强制换行——它破坏语义，且在窄屏下容易错位。改用 <dl><dt> + <dd> 结构：
立即学习“前端免费学习笔记（深入）”；
<dl> <dt>2021.06–2023.08</dt> <dd>XX 公司｜前端开发</dd> <dt>2020.09–2021.06</dt> <dd>YY 创业公司｜实习前端</dd> </dl>
这样既保持线性阅读顺序，又为 CSS 控制左右对齐留了余地。
移动端适配不是靠“加 meta”，而是控制内容流
很多人只加一句 <meta name="viewport" content="width=device-width, initial-scale=1"> 就以为搞定响应式。其实真正起作用的是 HTML 结构本身是否允许收缩。
容易踩的坑：
- 用固定像素写
width（比如style="width: 800px;"），手机横屏都显示不全 - 简历照片用
<img src="..." width="200">，没设max-width: 100%，导致溢出 - 把整页包进一个大
<div style="width: 960px; margin: 0 auto">，移动端只能左右滑动
最简解法：所有宽度相关样式先删掉，让文本自然折行；图片统一加 style="max-width: 100%; height: auto;"；用 <section> 替代居中 div。
导出 PDF 时字体和链接失效？检查这三点
Chrome “另存为 PDF” 功能很常用，但常出现中文字体变方块、邮箱链接点不开、页眉页脚错位。原因不在 PDF 设置，而在 HTML 本身：
- 别用 Web 字体（如
@import url('https://fonts.googleapis.com/...')），PDF 导出时无法加载，回退到系统默认字体可能缺中文支持。改用系统安全字体栈：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; - 所有
<a>链接必须带href，且不能是#空锚点——PDF 不解析 JS，点击无效 - 避免用
position: fixed做页眉页脚，PDF 渲染器不支持分页定位，内容会重叠或消失
实际效果比预想的更依赖基础结构是否干净。越早放弃“像招聘网站那样炫”的念头，越快得到一份真正可用的简历页。
