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控制缩进层级——它只影响<html>和<body>子元素是否缩进，真正起作用的是editor.tabSize
哪些地方必须换行？哪些不能随意断行
块级元素（<header>、<section>、<div> 等）必须独占一行；子元素缩进一层；闭合标签与开始标签垂直对齐。内联元素（<span>、<strong>）可紧凑写，除非内容过长影响阅读。
- 反例：
<p><strong>标题</strong>正文</p>没问题；但<div class="card"><h3>标题</h3><p>长描述...</p></div>应该拆成多行 -
<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> 的唯一性和 <section> 的主题约束——它们不是缩进问题，但一旦嵌套错乱，缩进再标准也救不了语义坍塌。缩进是骨架，语义才是血肉；光调好 editor.tabSize 不等于 HTML 就规范了。
