程序员简历应优先确保语义化HTML结构、正确meta标签和打印适配：用<header><section><article>替代div，设UTF-8、viewport和lang="zh"，禁用背景与target="_blank"，打印样式用block/float+rem+灰阶。
用纯 HTML 写程序员简历，关键不是“炫技”，而是把结构写对、语义写准、打印导出不崩——其他都是锦上添花。
为什么不用堆简历，而要用很多初学者一上来就写一堆 <div id="work"> 和 <div class="item">，结果导出 PDF 时经历被截成两页、技能列表缩进消失、手机上看联系方式点不开。根本原因：浏览器和打印引擎靠语义标签推断内容层级与行为。
-
<header> 包姓名+求职意向，会被屏幕阅读器识别为“页面起点”，Chrome 打印预览也默认给它留足顶部空白
-
<section> 是打印分页的天然锚点，加一句 page-break-inside: avoid 就能保住整段工作经历不被劈开
-
<article> 适合包项目经验——它自带独立语义，SEO 爬虫和 LinkedIn 插件都认这个
- 别用
<div> 模拟标题或列表，<h2> 和 <ul> 有默认行高、缩进、可访问性支持，省掉 80% 的 CSS 重置
中文简历必须设对的三个 meta 标签
中文乱码、手机上字体变小、导出 PDF 后文字挤成一团……八成是 <head> 里少了这三行：
-
<meta charset="UTF-8">：没它，张三 可能变成 å¼ ä¸，GitHub Pages 部署后必现
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">：否则 iOS Safari 会按 980px 宽度渲染，字体自动缩小，电话号码点不亮
-
<html lang="zh">（写在 <html> 标签上）：告诉浏览器这是中文内容，启用正确的标点悬挂、换行规则，避免「的」字孤悬行首
导出 PDF 时内容被截断？先关掉这三件事
Chrome “另存为 PDF” 表面简单，实则暗坑密集。测试前务必检查：
立即学习“前端免费学习笔记（深入）”；
- 删掉所有
background-image 或 background-color：PDF 导出默认关闭背景图，留着只会让块级元素变透明，内容浮空
- 把
<a href="https://www.php.cn/link/3fc4da65247af7ffd942e8ba951710e7"> 和 <a href="tel:xxx"> 的 target="_blank" 全去掉：PDF 不支持新窗口，加了反而让链接失效
- 在
@media print 里强制设 body { margin: 0; padding: 0; }：浏览器默认打印样式会加页边距，导致右侧一列内容直接被裁掉
程序员简历最容易被忽略的细节
技术人写简历最常栽在“太信自己写的 CSS”。比如加个 font-family: "Fira Code", monospace，本地看着很酷，但导出 PDF 时若系统没装该字体，就会 fallback 到系统默认等宽字体，字号、行高全乱；又比如用 Flex 布局做两栏技能列表，打印时 Flex 容器可能被整个压到第二页，第一栏空着。
真正稳的做法是：打印样式只用 display: block + float: left（兼容性好），字号统一用 rem，所有颜色走灰阶（#333、#666），连 <hr> 都比自定义 border 更可靠——因为它是原生打印友好的。
很多初学者一上来就写一堆 <div id="work"> 和 <div class="item">，结果导出 PDF 时经历被截成两页、技能列表缩进消失、手机上看联系方式点不开。根本原因：浏览器和打印引擎靠语义标签推断内容层级与行为。
-
<header>包姓名+求职意向，会被屏幕阅读器识别为“页面起点”，Chrome 打印预览也默认给它留足顶部空白 -
<section>是打印分页的天然锚点，加一句page-break-inside: avoid就能保住整段工作经历不被劈开 -
<article>适合包项目经验——它自带独立语义，SEO 爬虫和 LinkedIn 插件都认这个 - 别用
<div>模拟标题或列表，<h2>和<ul>有默认行高、缩进、可访问性支持，省掉 80% 的 CSS 重置
中文简历必须设对的三个 meta 标签
中文乱码、手机上字体变小、导出 PDF 后文字挤成一团……八成是 <head> 里少了这三行：
-
<meta charset="UTF-8">：没它，张三可能变成å¼ ä¸，GitHub Pages 部署后必现 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">：否则 iOS Safari 会按 980px 宽度渲染，字体自动缩小，电话号码点不亮 -
<html lang="zh">（写在<html>标签上）：告诉浏览器这是中文内容，启用正确的标点悬挂、换行规则，避免「的」字孤悬行首
导出 PDF 时内容被截断？先关掉这三件事
Chrome “另存为 PDF” 表面简单，实则暗坑密集。测试前务必检查：
立即学习“前端免费学习笔记（深入）”；
- 删掉所有
background-image或background-color：PDF 导出默认关闭背景图，留着只会让块级元素变透明，内容浮空 - 把
<a href="https://www.php.cn/link/3fc4da65247af7ffd942e8ba951710e7">和<a href="tel:xxx">的target="_blank"全去掉：PDF 不支持新窗口，加了反而让链接失效 - 在
@media print里强制设body { margin: 0; padding: 0; }：浏览器默认打印样式会加页边距，导致右侧一列内容直接被裁掉
程序员简历最容易被忽略的细节
技术人写简历最常栽在“太信自己写的 CSS”。比如加个 font-family: "Fira Code", monospace，本地看着很酷，但导出 PDF 时若系统没装该字体，就会 fallback 到系统默认等宽字体，字号、行高全乱；又比如用 Flex 布局做两栏技能列表，打印时 Flex 容器可能被整个压到第二页，第一栏空着。
真正稳的做法是：打印样式只用 display: block + float: left（兼容性好），字号统一用 rem，所有颜色走灰阶（#333、#666），连 <hr> 都比自定义 border 更可靠——因为它是原生打印友好的。
