HTML简历缩进混乱虽不报错，但会导致协作和维护困难；应统一用2空格缩进、限制嵌套深度、用Prettier自动格式化，并在复杂兼容、模块边界、临时禁用处加注释，禁用冗余及敏感信息注释；优先使用语义化标签替代div，id仅用于锚点或表单关联，class需语义化且可叠加。
HTML简历里缩进不一致，为什么浏览器没报错但协作时总出问题
浏览器确实不校验缩进，但人会——尤其当多人共用同一份简历源码、或你半年后回来看自己写的 <section> 嵌套了四层 <div> 却找不到闭合位置时。缩进不是“好看就行”，它是 DOM 层级的视觉映射。
关键判断：缩进混乱的 HTML 简历，在修改某段经历时极容易误删父容器、漏掉闭合标签，或把 <ul> 写进 <p> 里（浏览器会自动修正，但结构已变）。
- 统一用 2 个空格 缩进，禁用 Tab 键；不同编辑器对 Tab 的宽度解释不一致，VS Code 和 WebStorm 默认也倾向空格
- 每个子元素比父元素多缩进一层，
</section>必须和对应<section>对齐，而不是和上一行内容对齐 - 嵌套超过 4 层就该警觉：是不是该用
<article>或<aside>替代<div>？或者把项目经历抽成独立模块？ - 用 Prettier 配置 HTML 自动格式化，保存即生效；别依赖手动调整，尤其在快速迭代简历版本时
HTML简历加注释，哪些地方必须写，哪些写了反而坏事
简历 HTML 是公开资源，查看源码的人可能包括面试官、HR、甚至爬虫。注释不是写日记，它得承担明确职责：说明“为什么这么写”，而不是“我今天改了这里”。
常见错误现象：在 <header> 上方写 <!-- 这是头部 -->，或在 <footer> 里留 <!-- 2025-03-12 加了邮箱 -->——前者冗余，后者过期即误导。
立即学习“前端免费学习笔记（深入）”；
- 只在三类地方加注释：复杂兼容性处理（如
<!-- IE11 不支持 aspect-ratio，此处用 padding-top 回退 -->）、模块边界（<!-- /end of experience section -->）、临时禁用代码（<!-- <div class="skills-hidden">...</div> -->） - 禁止出现敏感信息：不要写
<!-- API_KEY=xxx -->或本地路径<!-- /Users/me/resume/src/... --> - 日期格式统一为
YYYY-MM-DD，不写“昨天”“上周”，避免时间漂移；修改人字段可省略，Git 提交记录更权威 - 注释前后各留一个空格：
<!-- 这样 -->，别写成<!--这样-->或<!-- 这样 -->，影响可读性
用语义化标签替代 div，对简历 HTML 的实际影响是什么
简历不是 Demo 页面，它会被 ATS（求职系统）、屏幕阅读器、甚至 Google 抓取。用 <div class="contact"> 和用 <aside class="contact">，表面看渲染一样，但背后解析逻辑完全不同。
性能影响微乎其微，但可访问性与长期维护成本差异巨大：前者需要额外注释说明用途，后者浏览器直接理解。
-
<header>放姓名/头像/联系方式，<main>包整个内容区，<footer>放版权或链接，不用再靠 class 名猜意图 - 工作经历用
<section>，每段经历用<article>，技能列表用<dl>（<dt>+<dd>），比一堆<div class="item">更易定位和样式复用 - 禁用
<div role="button">这类“伪交互”；简历是静态文档，所有按钮都该是真实<a>或<button>，否则键盘用户无法聚焦 - class 名要语义化：
class="contact-info"比class="flex-col-mb-2"更可靠；后者一旦换 CSS 方案就全失效
简历 HTML 文件里 class 和 id 怎么分配才不容易翻车
id 在简历中几乎没正当用途。你不需要用 document.getElementById('email') 获取邮箱，也不需要锚点跳转到“技能”区块——除非你真做了单页内导航，而绝大多数纯展示简历并不需要。
滥用 id 的后果很实在：改一次 class 名，全局搜索替换即可；改一次 id 名，得查 JS、CSS、HTML 三处，还可能漏掉某个 href="#projects"。
- 只在两种场景用 id：
<a href="#education">跳转教育背景，或<label for="phone">关联表单控件（虽然简历通常无表单） - class 是通用容器：同一页面可多次出现
class="job-item"，CSS 和 JS（document.querySelectorAll(".job-item")）天然支持 - 避免 class 名含样式描述：
class="text-red font-bold"是反模式；改成class="error-highlight"或直接用语义名class="contact-email" - id 必须唯一，但 class 可以叠加：
class="job-item remote-job"比两个独立 class 更灵活
真正难的不是写对第一版简历 HTML，而是三个月后加一段新项目时，还能一眼看清结构、不破坏已有缩进、不误删注释里的回退方案。这些细节不显眼，但决定你是否敢放心把源码链接发给面试官。
