HTML优化技巧：缩进与注释提升可读性

实操建议：

• 用 2 个空格（不是 Tab）做一级缩进，VS Code 等编辑器可设 "editor.insertSpaces": true 和 "editor.tabSize": 2
• 每层嵌套只缩进一次，不要跳级（比如父级缩进 2 格、子级直接缩进 6 格）
• 类自闭合标签（如 、<input>）也按层级缩进，和周围标签视觉对齐
• 遇到长属性（如含多个 class 或 data-），换行并缩进到与属性名起始列对齐，而非随意断行

哪些地方该加注释，哪些不该

注释不是越多越好。HTML 注释（）在生产环境会随 HTML 一起下发，无压缩时增大体积；更重要的是，错位或过期的注释比没注释更误导人。

该加的地方：

• 大区块起始处，比如 ，但别写成 （中英文混用难搜索）
• 临时绕过逻辑的位置，如
• 非直观结构，例如为兼容旧 JS 而保留的冗余
  ，注释说明用途

不该加的地方：

• 每个标签都注释，比如
• 重复标签名，如 （闭合标签本身已说明意图）
• 用注释“解释”语义化标签，比如

  ...（

  就是段落）

用 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 等能一键缩进，但它们不了解你的业务逻辑。比如