空格缩进、语义分行、逻辑空行、必要注释是html结构清晰的四大准则：统一2或4空格缩进；长属性按id→class→data-*→src/href→alt排序分行；仅在语义区块间加单空行；嵌套≥3层时用kebab-case注释闭合标签。

直接用空格缩进、每层2个或4个、子元素独占一行，就能解决90%的混乱问题。别信“自动格式化能搞定一切”——它常把语义区块切碎，反而掩盖结构缺陷。

缩进必须用空格，不能用Tab

不同编辑器对Tab的宽度解析不一致，Git diff里会显示成^I，协作时容易误判修改范围。空格则稳定可预测。

• 统一选2空格（小项目）或4空格（团队/复杂页面）
• <div class="container"> 后换行，<code><header></header> 顶格写还是缩进？——必须缩进，它是<div>的子元素<li>自闭合标签如 <code><img>、<input> 也要缩进，和同级块元素对齐

长属性必须分行，且按语义排序

一行塞满class、id、data-、src、alt，等于放弃可读性。分行不是为了好看，是为了快速定位关键属性。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载
• 推荐顺序：id → class → data-* → src/href → alt/title
• 超长src URL 换行后，第二行从=后开始缩进，保持视觉对齐
• 布尔属性如 required、disabled 不加=，也不写true

空白行只用于分隔逻辑区块，不是装饰

空行太多会让代码“浮起来”，找不到重心；太少又让<header></header>、<main></main>、<footer></footer>糊成一团。

• 仅在以下位置加空行： 和 <main></main> 之间、 和 <footer></footer> 之间、独立表单/卡片组件前后
• 同一语义区块内（如<nav></nav>里的多个<a></a>）不加空行
• 避免连续两个空行——这是格式失控的早期信号

语义化标签闭合处加注释，尤其嵌套深时

当看到