HTML简历问题主因是代码低级错误：标签未闭合或嵌套错位、ID重复或alt缺失、table误作布局容器、viewport缺失或字体链失效，需用语义化标签和规范写法规避。
HTML简历写出来打不开、样式乱飞、打印错位，八成不是浏览器问题，而是代码里埋了几个经典低级错误——这些坑老手都踩过，但新手常卡半天。
标签未闭合或嵌套错位
这是最常打断渲染的硬伤。浏览器遇到 <p>姓名：张三</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2249" title="超级简历WonderCV"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175679998691134.png" alt="超级简历WonderCV" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2249" title="超级简历WonderCV">超级简历WonderCV</a>
<p>一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。</p>
</div>
<a href="/ai/2249" title="超级简历WonderCV" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 这类混搭，会自动“修复”结构，结果把后续所有内容吞进一个意外的 <p></p> 里，导致整页缩进崩塌、列表消失、section 被压扁。
- 常见现象：
<section id="experience"><h2>工作经历</h2></section>后面忘了写，后面所有模块都变成它的子元素 - 检查方法：在 Chrome 开发者工具的 Elements 面板里，看 DOM 树是否层层缩进合理；异常深的嵌套基本就是漏闭合
- 规避方式：用 VS Code 安装
Auto Close Tag和Auto Rename Tag插件，写<section></section>时自动补
ID重复或alt缺失
看似不影响显示，实则暗藏两层风险：一是 ATS（招聘系统）解析失败，比如把两个 <div id="contact"> 当作同一字段覆盖；二是导出 PDF 时某些工具会静默丢弃重复 ID 的内容。
<ul>
<li>
<code><img src="photo.jpg" alt="HTML简历制作有哪些常见错误？新手代码排错指南" > 没加 alt，不仅无障碍不达标，Chrome 打印预览里图片直接变空白方块
class="contact"；若需区分，用 id="contact-personal" 和 id="contact-emergency"
Duplicate ID 和 img element is missing required alt attribute
table 误作布局容器
用 <table> 套整个简历，是新手最容易抄错的“模板陷阱”。它会让语义全毁：屏幕阅读器读不出“教育背景”是标题，ATS 把“清华大学”和“计算机系”拆成两个孤立单元格，打印时长公司名直接挤出页面。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>真正该用 <code><table> 的场景只有三个：<code><dl></dl> 不够用的技能熟练度对比、课程成绩单、带时间轴的横向经历列表
<section id="education"></section> 包教育模块，内部用 <dl>
<dt>学校</dt>
<dd>清华大学</dd>
</dl> —— 语义清晰、响应式天然支持换行、打印分页稳定<thead> 和 <code><tbody>，并确保每行 <code><tr> 的 <code><td> 数量一致，否则 Chrome 打印预览会列宽错乱
<h3>viewport 缺失或字体链失效</h3>
<p>简历在手机上缩成一团看不清，或者导出 PDF 后中文变方框，往往就差一行代码或一个声明。</p>
<ul>
<li>没写 <code><meta name="viewport" content="width=device-width, initial-scale=1">，iPhone Safari 默认按 980px 渲染，再好的 flex 布局也白搭font-family: "PingFang SC", "Helvetica Neue", sans-serif;，但没 fallback 到 "Microsoft YaHei" 或 "Noto Sans CJK SC"，部分 PDF 打印机（如 Chrome “另存为 PDF”）会回退到无中文支持的字体font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;，覆盖主流系统真正难的不是写对第一版，而是改到第三版时，还能一眼看出哪行 HTML 在悄悄破坏打印分页或 ATS 解析——这时候，<section></section> 和 <dl></dl> 的语义边界，比任何炫技的 CSS 更管用。
