html代码规范要求：缩进统一用2或4空格（禁用tab混排），空行分隔逻辑模块，class/id命名须语义化（kebab-case、描述用途）、避免泛化词，注释仅标注闭合位置。
缩进必须用空格，且层级要对齐
浏览器不关心缩进，但人关心。缩进错位会让嵌套结构瞬间“失联”，尤其在 <section></section> 套 <article></article> 再套 <header></header> 时，一眼看不出谁是谁的孩子。
推荐统一用 2 个或 4 个空格（别混用 Tab），子元素必须比父元素多一级缩进：
<main class="content"><article><header><h2>标题</h2>
</header><p>正文段落</p>
</article></main>
常见错误：<div><p>文字</p></div> 写在同一行；或者 <ul></ul> 和它的 <li> 缩进相同；又或者用 Tab 和空格混排——编辑器显示可能一致，但协作时极易崩。
空行不是装饰，是逻辑分隔符
HTML 不会把换行当空行渲染，但人在读代码时，靠空行识别模块边界。header、main、footer 之间加空行；表单字段组之间加空行；<section></section> 和下一个 <section></section> 之间也加空行。
但注意：不要在单个 <p></p> 内部硬加空行，也不要在 <ul></ul> 的每个 <li> 后都空一行——那不是分隔逻辑，是制造噪音。
真正该加空行的地方：
-
<header></header>和<main></main>之间 - 一个完整表单结束之后
-
<section></section>内容结束，下一个语义块开始前
别加空行的地方：
-
<nav></nav>内部的<ul><li></ul>之间（用缩进和换行即可） - 单个
<div class="card"> 内部的子元素之间（除非有明显子模块）<h3>class 和 id 名字必须能“读出来”</h3> <p>写 <code>class="box1"或id="div3"是在给未来的自己埋雷。命名模糊等于放弃自解释性，团队协作时没人敢动它。好名字的特征：
- 描述用途，不是样式：
class="search-input"而不是class="blue-border" - 用 kebab-case（短横线分隔）：
class="user-profile-card"，不用userProfileCard或user_profile_card - 避免泛化词：
content、container、wrap单独出现时几乎没信息量
特别注意：BEM 风格不是必须，但如果你用了
block__element--modifier，就得贯彻到底，别一半 BEM 一半随意命名。注释只标“哪里结束”，不解释“为什么”
注释太多反而干扰阅读。最实用的注释，是帮人快速定位闭合位置——尤其在长
<section></section>、深嵌套<div> 或复杂 <code><form></form>结束处。推荐写法：
<!-- .pricing-table --> <section class="pricing-table"><header><h2>价格方案</h2></header><div class="plans">...</div> </section><!-- .pricing-table -->
不该写的注释：
-
<!-- 这是一个段落 --><p>文字</p>（太显然） -
<!-- 因为设计稿要求所以这里加 margin -->（属于需求文档范畴，不在 HTML 里留） - 跨多行的大段说明（放 README 或设计系统文档里）
真正难处理的是那些没有语义、纯靠 class 堆砌的容器链，比如连续三层
<div class="wrapper"> ——这种结构本身就需要重构，光靠注释救不了。</div> - 描述用途，不是样式：
