html格式化是保障协作效率与代码可维护性的硬性规范：缩进统一用2空格、块级元素独占一行并用空行分隔功能块、类名采用语义化kebab-case、属性按固定顺序用双引号、闭合标签对齐且禁用多余空行。
HTML格式化不是“让代码看起来舒服”的装饰活，而是直接影响你能不能三秒内定位到<main></main>里漏写了一个，或者别人接手时敢不敢动那个class="box2"的<div>。<h3>缩进必须用空格，且统一为2个</h3>
<p>Tab在不同编辑器里可能显示为2格、4格甚至8格，协作时一眼看过去结构就错位。空格是确定的——你敲两个，就是两个。</p>
<ul>
<li>子元素比父元素多缩进2个空格，闭合标签和开始标签对齐</li>
<li>
<code><header></header>下直接子元素缩进2格，<nav></nav>里的<ul></ul>再缩进2格
<p>欢迎<strong>登录</strong>我们的网站</p>拆成三行——内联元素紧凑写，除非内容过长影响阅读块级元素必须独占一行，逻辑区块间加空行
人靠视觉分组识别结构，不是靠DOM树。连续写<header><nav><ul>…</ul></nav></header>等于主动放弃可读性。
-
<header></header>、<main></main>、<footer></footer>之间各加一个空行 - 表单中“账户信息”和“联系方式”字段组之间也加空行，但组内
<input>不空行 - 禁止连续两个以上空行——那不是分隔，是留白失控
- 空行只用于分隔功能块，不用于“让某段代码更醒目”
类名必须表达“是什么”，而不是“长什么样”
class="red-btn"这种命名，等按钮变成蓝色那天，你就得改HTML、CSS、JS三处，还容易漏掉注释里的“红色按钮”。而class="search-submit"哪怕样式全换，语义依然成立。
- 拒绝
btn1、div3、yonghu、float-right - 优先用
kebab-case：比如product-card、error-message - 复杂组件起始/结束处加注释，如
<!-- .pricing-table -->和<!-- /.pricing-table --> - 不要为了语义化硬套
<article></article>——一段普通说明文字，没到独立发布级别，老实用<p></p>
属性顺序和引号不能靠手感，要靠规则
每次打开文件都要花五秒判断id在class前面还是后面？那是把记忆负担转嫁给所有人。规则越死，协作越省心。
- 属性一律用双引号：
href="https://example.com"，不是单引号，也不省略 - 顺序固定为：
id→class→data-*→aria-*→src/href→ 其他 - 超过5个属性就分行，每行一个，缩进对齐标签名
- 布尔属性不赋值：
disabled，不是disabled="disabled"
最常被忽略的其实是“闭合标签对齐”和“空行边界感”——前者让你一眼看出嵌套断在哪，后者决定你扫视页面结构时大脑是否需要额外做一次分组运算。这两点不靠工具，得靠肌肉记忆。
