pre是唯一原生保留缩进和换行的html标签，但仅忠实渲染源码中的空格、换行符和制表符，不解析标签、不自动美化结构，也不负责语义标记；需配合code标签、等宽字体、white-space: pre-wrap及html转义才能正确展示代码。
pre 是唯一一个浏览器原生保留缩进和换行的 HTML 标签，但它不负责“格式化”其他标签——所谓“HTML格式化标签”本身是个常见误解。HTML 没有专门用于代码排版或自动缩进的语义标签；缩进是开发者的书写习惯或工具行为，不是 HTML 规范的一部分。
为什么pre不能当“格式化工具”用
你可能试过把一段 HTML 代码塞进 <pre class="brush:php;toolbar:false;"></pre> 里，结果渲染出来还是扁平的、字体变小、横向溢出——这不是 bug，是预期行为：pre 只保留原始空格和换行，但不会解析里面的标签，更不会自动美化结构。
- 浏览器默认对
pre应用font-size: small和margin，导致视觉上“缩得看不清” - 没加 CSS 的话，
<div><p>文本</p></div>在pre里就是纯文本，不执行任何 DOM 渲染 - 真正要展示可读的 HTML 片段，得配合
white-space: pre-wrap+overflow-x: auto+ 手动转义尖括号（</>）
vscode 保存时自动缩进靠哪几个配置生效
VS Code 不会“猜”你想要什么缩进，它只响应明确启用的规则。以下三项缺一不可：
-
"html.format.enable": true—— 关闭就等于禁用整个 HTML 格式化服务 -
"editor.insertSpaces": true—— 强制按 Tab 键也插入空格，避免混入\t -
"editor.tabSize": 2或4—— 这才是最终决定缩进宽度的字段，不是html.format.*下的任何选项
顺带一提："html.format.indentInnerHtml": true 必须开，否则 和 会顶到最左边，违背常规嵌套直觉。
prettier 格式化 HTML 时容易踩的坑
Prettier 默认把内联 <script></script> 和 <style></style> 当作普通文本压成一行，这不是疏忽，是设计使然——它不解析 JS/CSS 语法。
- 正确做法：抽离为外部文件，用
<script src="main.js"></script> - 临时方案：在标签上加
/* prettier-ignore */注释 -
htmlWhitespaceSensitivity推荐设"css"，设"strict"会导致预期内的空行被删，尤其伤pre和文本节点附近的布局
真正难的不是配齐这些开关，而是让所有人——包括刚入职的同事、外包、甚至你自己三个月后的回溯——打开任意一个 .html 文件，都能立刻看清层级、快速定位漏闭合的 <div>。缩进规则一旦松动，第一个崩掉的不是样式，是协作信任。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
