html缩进与换行规范要求统一使用2或4个空格（禁用tab），块级元素独占一行并缩进，自闭合标签推荐加斜杠，属性值须用双引号包裹。
HTML格式化没有“官方分类”，但实际开发中围绕可读性、协作和工具链，自然形成了四类规范：缩进与换行、语义化结构、命名规则、属性书写。其中缩进与换行是所有人每天直面的第一道门槛——它不报错，但写错一次，全团队都得花三分钟找漏掉的 。
缩进用空格还是 Tab？为什么必须统一
必须用空格，且全项目统一为 2 或 4 个空格。Tab 在不同编辑器里显示宽度不一致（VS Code 默认 4，Sublime 可能设成 2），协作时同一行代码在两人屏幕上错位，editor.detectIndentation 自动检测反而会引入混乱。
-
editor.insertSpaces必须设为true，禁用 Tab 输入 -
editor.tabSize决定每级缩进宽度（推荐2或4，别混用） - 不要依赖
html.format.indentInnerHtml控制缩进层级——它只影响和子元素是否缩进，真正起作用的是editor.tabSize
哪些地方必须换行？哪些不能随意断行
块级元素（<header></header>、<section></section>、<div> 等）必须独占一行；子元素缩进一层；闭合标签与开始标签垂直对齐。内联元素（<code><span></span>、<strong></strong>）可紧凑写，除非内容过长影响阅读。
- 反例：
<p><strong>标题</strong>正文</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a> <p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>没问题；但<div class="card"> <h3>标题</h3> <p>长描述...</p> </div>应该拆成多行 -
<pre class="brush:php;toolbar:false;"></pre>内部缩进会被保留，但浏览器默认样式会让它“看不见”——必须加 CSS：white-space: pre-wrap+overflow-x: auto - 禁止把多个块级标签塞在同一行，比如
<header><nav></nav></header>，人眼无法快速识别嵌套关系
自闭合标签要不要加斜杠？<img> 还是 <img>
HTML5 不强制要求斜杠，但加更稳妥。VS Code 和 Prettier 默认输出带斜杠形式（<img src="x" alt="">），它明确表达“无内容”，避免和旧版 XHTML 混淆，也防止某些模板引擎误解析。
- 必须加斜杠的场景：使用 JSX 或 Vue SFC 时，
<input>是合法语法，<input>会报错 - 不加斜杠不是错误，但团队若用 Prettier，
html.format.endWithNewline和html.format.preserveNewLines会影响它是否被自动补上 - 所有属性值必须用双引号包裹：
class="sidebar"，不能写class='sidebar'或省略引号
最易被忽略的其实是 <main></main> 的唯一性和 <section></section> 的主题约束——它们不是缩进问题，但一旦嵌套错乱，缩进再标准也救不了语义坍塌。缩进是骨架，语义才是血肉；光调好 editor.tabSize 不等于 HTML 就规范了。
