HTML嵌套过深时需严格缩进（2空格）、合理注释（仅关键处）、语义化class命名（如BEM）、慎用自动格式化并校验输出。
HTML 嵌套层级深时，缩进必须严格对齐
浏览器不关心缩进，但人会看晕。嵌套超过 3 层后，<div> 套 <section> 再套 <article>，如果缩进不统一，连闭合标签都容易配错。
实操建议：
- 用 2 个空格（不是 Tab）做一级缩进，VS Code 等编辑器可设
"editor.insertSpaces": true和"editor.tabSize": 2 - 每层嵌套只缩进一次，不要跳级（比如父级缩进 2 格、子级直接缩进 6 格）
-
</>类自闭合标签（如<img>、<input>）也按层级缩进，和周围标签视觉对齐 - 遇到长属性（如含多个
class或data-），换行并缩进到与属性名起始列对齐，而非随意断行
哪些地方该加注释，哪些不该
注释不是越多越好。HTML 注释（<!-- ... -->）在生产环境会随 HTML 一起下发，无压缩时增大体积；更重要的是，错位或过期的注释比没注释更误导人。
该加的地方：
立即学习“前端免费学习笔记（深入）”；
- 大区块起始处，比如
<!-- Header section -->，但别写成<!-- 开始头部 -->（中英文混用难搜索） - 临时绕过逻辑的位置，如
<!-- TODO: replace with <nav> after IA finalizes --> - 非直观结构，例如为兼容旧 JS 而保留的冗余
<div class="js-hook">，注释说明用途
不该加的地方：
- 每个标签都注释，比如
<!-- div for container --><div class="container"> - 重复标签名，如
<!-- closing main --></main>（闭合标签本身已说明意图） - 用注释“解释”语义化标签，比如
<!-- this is a paragraph --><p>...（<p>就是段落）
用 CSS class 名辅助阅读，比注释更可靠
注释可能被删、被忽略、不同步更新；而 class 名只要没改，就始终和结构绑定。合理命名能大幅降低对注释的依赖。
实操要点：
- 避免泛用
wrap、box、content这类无上下文的 class，改用header-logo、product-card-list等带业务语义的名称 - 嵌套深的组件，用 BEM 风格明确层级关系，如
search-form__input表示它是search-form的直属子元素，而非search-form-input（后者易误判为独立组件） - 临时调试用的 class（如
debug-border）务必在上线前 grep 清理，否则污染结构可读性
自动格式化工具不是万能解，要校验输出
Prettier、HTMLBeautify 等能一键缩进，但它们不了解你的业务逻辑。比如 <table> 内部的 <tr><td> 嵌套，有些格式化器会把所有单元格挤到一行，反而破坏可读性。
使用前注意：
- 配置
htmlWhitespaceSensitivity: "strict"（Prettier），避免误删有意义的空白文本节点 - 对含内联
<script>或<style>的 HTML，先分离再格式化，否则 JS/ CSS 缩进可能被错误处理 - 格式化后手动检查三处：表单控件是否仍保持
<label><input></label>正确包裹、SVG 内嵌<use>是否被折行打断、data-*属性值是否因换行被截断（尤其含 JSON 字符串时）
最常被忽略的是：多人协作时，有人关了格式化、有人开了，导致同一文件提交前后缩进混乱。建议在项目根目录加 .prettierrc 并纳入 Git，比靠自觉靠谱得多。
