HTML缩进核心是快速定位嵌套错误，必须统一用2或4个空格而非Tab，通过VS Code配置、Pretterr等工具固化规则，确保全项目一致以避免布局崩溃和协作错位。
HTML 缩进不是“好不好看”的问题，而是“能不能快速定位标签嵌套错误”的关键防线。 混乱缩进的 HTML 文件，哪怕语法完全合法，也会让 <div> 漏闭合、<li> 错位、<script> 被意外包裹在 <p> 里——这些错误浏览器不报错，但页面会莫名其妙崩掉布局或交互失效。
VS Code 里按 Shift+Alt+F 没反应？先检查这三件事
这不是快捷键失效，而是编辑器没识别出这是 HTML 文件，或者格式化服务没启用：
- 确认文件后缀是
.html或.htm；如果用.txt或无后缀，VS Code 默认当纯文本处理，不触发 HTML 格式化 - 右键编辑区 → “格式化文档”，若提示“没有可用的格式化程序”，说明没装 Prettier 或未设为默认 HTML 格式化工具
- 打开设置搜索
format on save，勾选它；再搜html format enable，确保是true
为什么推荐 2 个空格而不是 4 个？
这不是审美偏好，而是真实协作场景下的权衡结果：
- 嵌套深时（比如
<section>→<article>→<header>→<nav>→<ul>→<li>），4 空格会让第 6 层缩进达 24 字符，迫使横向滚动，尤其在小屏笔记本或分屏开发时明显拖慢扫描速度 - 2 空格在保持层级可辨性的同时，把整行宽度控制在 120 字符内更轻松，避免因换行破坏语义结构（如把
<a href="...">拆成两行） - 注意：某些团队规范强制要求 4 空格（如部分国企/银行前端规范），此时必须统一，而非争论对错——关键是“全项目一致”
prettier --write 批量格式化后，<script> 和 <style> 代码被压成一行？
这是 Prettier 的默认行为：它只格式化 HTML 结构，不解析内部 JS/CSS。一旦你把逻辑代码写在内联标签里，就会被当作纯文本压缩处理：
立即学习“前端免费学习笔记（深入）”；
- 正确做法是把脚本和样式抽离到外部文件：
<script src="main.js"></script>，再用 ESLint + Stylelint 单独管 JS/CSS - 如果非得内联，可在
<script>标签上加注释禁用 Prettier：<script> /* prettier-ignore */ console.log('...'); </script> - 配置项
htmlWhitespaceSensitivity: "strict"能缓解部分换行丢失，但无法解决内联代码逻辑混乱问题
真正容易被忽略的，是缩进规则和语义标签的配合：比如 <ul> 下直接写 <p> 是合法 HTML，但缩进再整齐也掩盖不了结构错误；缩进只是帮你更快发现这类问题，而不是替代语义校验。
