html格式化常见陷阱包括：与语义混淆导致辅助技术失效；因缩进、css或未转义内容破坏空白保留；误加闭合标签引发dom结构错乱；vs code中prettier与内置格式化冲突造成反复缩进。
HTML格式化标签本身不难，但错误往往藏在“看起来没问题”的地方——比如用<b></b>替代<strong></strong>不影响显示，却让屏幕阅读器忽略语义；<pre class="brush:php;toolbar:false;"></pre>里缩进错乱，复制出来全是多余空格；@@##@@加了，DOM结构当场崩掉。
为什么<strong></strong>和<b></b>不能混着用
它们渲染效果一样，但浏览器和辅助技术处理逻辑完全不同：<strong></strong>是语义标签，告诉屏幕阅读器“这里很重要”；<b></b>只是视觉加粗，无任何语义权重。
- 错误现象：用
<b></b>标关键词，SEO 工具提示“缺乏语义强调”，读屏软件跳过不读 - 使用场景：强调内容重要性（如警告、核心参数）必须用
<strong></strong>；仅需加粗样式（如品牌名、标题装饰）才考虑<b></b> - 兼容性影响：所有现代浏览器都支持二者，但 WCAG 2.1 明确要求关键信息使用
<strong></strong>而非<b></b>
<pre class="brush:php;toolbar:false;"></pre>里的换行和空格总不对劲
<pre class="brush:php;toolbar:false;"></pre>本意是保留原始空白，但实际中常被 CSS 覆盖、源码缩进干扰、或未转义内容破坏结构。
- 常见错误现象：
<pre class="brush:php;toolbar:false;">function foo() {\n return true;\n}</pre>在页面上显示为一行；或者复制代码时开头多出 4 个空格 - 实操建议：
<pre class="brush:php;toolbar:false;"></pre>标签本身必须顶到行首（不要缩进），内容从下一行开始写；若内容来自 JS 拼接，先用String.prototype.trimStart()去掉公共缩进 - 安全风险：直接把用户输入塞进
<pre class="brush:php;toolbar:false;"></pre>不转义，<script></script>会被执行；务必用textContent赋值，或服务端做 HTML 实体转义（→<code><）
<img>加/>或
<img>是 void 元素，在 HTML5 中禁止闭合。加斜杠或闭合标签不是“更严谨”，而是明确引入解析歧义。
- 错误现象：
<div> <img><p>文字</p> </div>在 Elements 面板里变成<div><img src="a"></div> <img src="a"><p>文字</p> - 根本原因：浏览器把
当作一个新开始标签，后续所有节点都被当成它的子元素，导致层级右移 - 实操建议：统一写成
<img>（不加/>也不加）；JSX 或模板字符串中尤其注意，别因自动补全或习惯误加
VS Code 保存就格式错乱？检查 Prettier 和内置格式化是否打架
VS Code 默认启用内置 HTML 格式化，一旦装了 Prettier 插件又没关掉它，两者会反复修改同一段代码，缩进越来越深、属性顺序来回颠倒。
- 验证方法：打开一个 HTML 文件，按
Shift+Alt+F手动格式化一次，再按一次——如果第二次有变化，说明冲突已发生 - 实操建议：在设置里搜
html.format.enable，设为false；只保留 Prettier，并开启editor.formatOnSave - 额外注意：
htmlWhitespaceSensitivity配置必须设为"css"，否则 inline 元素间的换行可能被误删，影响基于white-space的布局
真正容易被忽略的是：格式化工具不会告诉你 DOM 结构已经错了，它只会按规则“美化”一个错误的树。所以每次改完 HTML，一定要去 DevTools 的 Elements 面板里看一眼灰色斜体标签、缩进突兀断裂，或者直接运行document.body.innerHTML比对输出——这才是唯一靠谱的验证方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
