HTML缩进推荐两个空格，关键在于全项目统一；pre标签需用CSS控制空白符并转义HTML字符；innerHTML会丢失缩进；Prettier对非标准HTML有格式化限制。
HTML代码缩进用两个空格还是四个？
两个空格是当前主流选择，尤其在团队协作和现代前端工程中。它比四个空格更紧凑，长嵌套结构不容易折行，也和 js/json 的缩进习惯对齐。但关键不是数字本身，而是全项目统一——混用会导致 git diff 里全是缩进变更，徒增噪音。
- VS Code 默认是四个空格，需手动改：
"editor.tabSize": 2（写在settings.json） - 用 Prettier 格式化时，
tabWidth: 2是推荐配置，且要搭配useTabs: false - 别信“HTML 应该用 tab”，浏览器不认 tab 的语义，而团队里有人用 tab、有人用空格，diff 和合并冲突会立刻变多
pre 标签里的代码怎么保持原格式又不破坏页面布局？
<pre class="brush:php;toolbar:false;"></pre> 本身只保留换行和空格，但默认会继承全局字体、边距，还可能横向溢出。它不是万能的代码容器，直接塞进去常导致文字挤成一团或撑破容器。
- 必须加
white-space: pre-wrap或pre-line，否则连续空格会被合并，缩进全丢 - 给
<pre class="brush:php;toolbar:false;"></pre>包一层<div class="code-block">，再设 <code>overflow-x: auto，防止宽代码横滚条被切掉 - 别在
<pre class="brush:php;toolbar:false;"></pre>里直接写 HTML 标签（比如<div>），得先转义：用 <code><div>，否则浏览器会真解析用 innerHTML 插入带格式的 HTML 字符串，缩进会消失吗？
会，而且无法避免。
innerHTML解析后只保留 DOM 结构，所有原始缩进、换行、多余空格都被丢弃。你看到的“格式”只是浏览器开发者工具的美化渲染，不是真实存在的空白字符。- 想保留可读性，只能靠外部工具：用
highlight.js或Prism.js渲染后，它们会把缩进转成<span></span>包裹 - 服务端返回的 HTML 字符串如果含缩进，到前端后仍会被解析器抹平——这不是 bug，是 HTML 规范行为
- 调试时别依赖
console.log(el.innerHTML)看缩进，改用el.outerHTML更接近实际解析结果
Prettier 对 HTML 格式化有哪些隐性限制？
Prettier 不处理自定义标签或非标准属性的换行逻辑，也**不会修复缺失的闭合标签**。它假设你写的是合法 HTML5，一旦有
<my-component></my-component>或v-if这类模板语法，格式化就容易错位甚至报错。- Vue/Svelte 项目里，Prettier 默认不识别
<template></template>块内的缩进规则，需装@prettier/plugin-vue - 遇到
Parse Error: Unexpected token ，大概率是 Prettier 把 JSX 或模板字符串当纯 HTML 解析了 - 它强制把属性写在同一行，哪怕超长；想换行得关掉
htmlWhitespaceSensitivity: "ignore"并配printWidth
- 想保留可读性，只能靠外部工具：用
