极简黑白简历的核心是用语义化HTML(如<section><h2><p>)和仅两行CSS(font-family、line-height)控制视觉权重,禁用颜色、边框、图标等冗余样式,信任浏览器默认渲染。

极简黑白简历的核心不是“怎么写 HTML”,而是“怎么用最克制的 HTML + 原生 CSS 控制视觉权重”——不需要框架、不引入字体、不加图标,靠语义结构和 1–2 行 CSS 就能达成专业效果。
用 <section> 划分逻辑块,别用 <div>
浏览器默认样式对 <section>、<h2>、<p> 等语义标签已有合理间距和层级,直接利用它,省去大量 margin/padding 调整。
错误做法是全用 <div class="block">,再手动设 margin-top: 1.5em;正确做法是:
<section> <h2>工作经验</h2> <p><strong>前端工程师|XX 公司</strong><br>2022.03–2024.08</p> <p>负责……</p> </section>
-
<h2>自带 bold + 较大字号 + 上下留白,天然适合作为模块标题 - 连续多个
<p>会自然形成段落节奏,比手动加<br>更可维护 - 避免嵌套过深:不要
<section>→<div>→<p>,直接<section>→<p>
只设 font-family 和 line-height,禁用颜色声明
黑白配色的本质是放弃所有 color 声明(包括 color: #000),让文本完全依赖系统默认黑色(#000)和背景默认白色(#fff)。额外设 color 反而可能触发非预期渲染(如某些打印预览强制转灰度时出错)。
立即学习“前端免费学习笔记(深入)”;
关键 CSS 只需两行:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.6;
}
- 字体栈优先选无衬线、窄字宽的系统字体,避免加载 web font 带来延迟或 FOUT
-
line-height: 1.6比默认 1.2 更舒展,适合单色阅读;别用1.5或1.4——小数点后一位在不同浏览器渲染差异明显 - 不设
font-size:让浏览器用默认 16px,保证打印缩放一致
用 <hr> 分隔模块,删掉所有边框和阴影
很多人用 border-bottom: 1px solid #333 做分隔,但实际效果不如原生 <hr>——它在打印、PDF 导出、高对比度模式下更稳定,且语义明确( thematic break)。
- 删掉所有
box-shadow、border、outline相关声明 - 如果觉得默认
<hr>太粗,只微调:hr { border: 0; border-top: 1px solid #000; margin: 1.8em 0; } - 别用
<hr>在列表项之间——那是语义错误;只放在<section>结尾
真正难的不是写代码,是忍住不加东西:不加 icon 字体、不加 hover 效果、不加「个性化」背景图、不把姓名设成 24px 加粗。极简的完成度,取决于删减的勇气和对默认行为的信任程度。



















