纯HTML简历需优先解决结构与兼容性问题：必须添加viewport元标签和CSS重置，使用语义化标签（如section、h1-h3、ul）提升ATS识别率，保存为UTF-8无BOM编码并用相对路径引用资源。
纯 HTML 简历不是“精美”的捷径，而是最容易暴露结构混乱、样式错位、移动端失效的雷区。别用模板套壳，先搞清浏览器怎么读你的 head 和 body。
为什么简历网页一打开就文字堆成一团？
根本原因是没写 <meta name="viewport">，也没重置默认样式。浏览器按桌面宽渲染，手机上缩成小字+横向滚动条——用户根本不会拖着看。
- 必须在
<head>里加：<meta name="viewport" content="width=device-width, initial-scale=1">
- 加一行极简 CSS 重置：
* { margin: 0; padding: 0; box-sizing: border-box; }（否则h1上下空太多，ul左侧缩进吃掉左边距） - 别用
<font>标签改颜色大小——已废弃，CSS 里用color和font-size
用什么标签组织内容才不被 ATS（招聘系统）漏掉关键词？
ATS 不是浏览器，它靠语义标签识别模块。把“教育经历”写成 <div class="edu">，大概率被当成普通文本跳过；换成 <section aria-label="Education"> 或直接 <section> + 合理标题层级，识别率明显提升。
- 用
<h1>放姓名（唯一一个，别用<h2>套姓名） - 工作经历用
<section>包裹，每段公司用<h2>，职位用<h3> - 技能列表用
<ul>，别用<div>拼横排——屏幕阅读器和 ATS 都依赖原生列表语义 - 避免
<table>排版简历（语义错误，移动端崩），用 CSS Grid 或 Flex 实现“左右两栏”即可
本地预览正常，发给 HR 打开却是白屏或乱码？
八成是文件编码或路径问题。HTML 文件本身没“运行环境”，但浏览器对编码极其敏感。
立即学习“前端免费学习笔记（深入）”；
- 保存文件时明确选
UTF-8 without BOM（VS Code 默认是这个，记事本默认是 ANSI） - 所有资源路径写相对路径：图片放
./images/photo.jpg，别用C:\xxx\photo.jpg或绝对 URL（你发的是文件，不是网站） - 如果用了本地字体（如
@font-face引了 .ttf），HR 电脑没有该字体——直接失效。优先用系统字体栈：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
- 测试时用 Chrome 右键 → “检查” → 看 Console 有没有
Failed to load resource，点开看具体哪个路径 404
真正卡住人的从来不是“怎么加动画”或“怎么换主题色”，而是 meta 漏写、href 路径多了一个点、section 忘闭合——这些错误不报红，只让页面静默失效。
