HTML格式化常见陷阱包括：<strong>与<b>语义混淆导致辅助技术失效；<pre>因缩进、CSS或未转义内容破坏空白保留；<img>误加闭合标签引发DOM结构错乱；VS Code中Prettier与内置格式化冲突造成反复缩进。
HTML格式化标签本身不难，但错误往往藏在“看起来没问题”的地方——比如用<b>替代<strong>不影响显示，却让屏幕阅读器忽略语义；<pre>里缩进错乱，复制出来全是多余空格；<img>加了</img>，DOM结构当场崩掉。
为什么<strong>和<b>不能混着用
它们渲染效果一样，但浏览器和辅助技术处理逻辑完全不同：<strong>是语义标签，告诉屏幕阅读器“这里很重要”；<b>只是视觉加粗，无任何语义权重。
- 错误现象：用
<b>标关键词，SEO 工具提示“缺乏语义强调”，读屏软件跳过不读 - 使用场景：强调内容重要性（如警告、核心参数）必须用
<strong>；仅需加粗样式（如品牌名、标题装饰）才考虑<b> - 兼容性影响：所有现代浏览器都支持二者，但 WCAG 2.1 明确要求关键信息使用
<strong>而非<b>
<pre>里的换行和空格总不对劲
<pre>本意是保留原始空白，但实际中常被 CSS 覆盖、源码缩进干扰、或未转义内容破坏结构。
- 常见错误现象：
<pre>function foo() {\n return true;\n}</pre>在页面上显示为一行；或者复制代码时开头多出 4 个空格 - 实操建议：
<pre>标签本身必须顶到行首（不要缩进），内容从下一行开始写；若内容来自 JS 拼接，先用String.prototype.trimStart()去掉公共缩进 - 安全风险：直接把用户输入塞进
<pre>不转义，<script>会被执行；务必用textContent赋值，或服务端做 HTML 实体转义（<→）
<img>加/>或</img>会触发 DOM 修复
<img>是 void 元素，在 HTML5 中禁止闭合。加斜杠或闭合标签不是“更严谨”，而是明确引入解析歧义。
立即学习“前端免费学习笔记（深入）”；
- 错误现象：
<div><img src="a"></img><p>文字</p></div>在 Elements 面板里变成<div><img src="a"></div><img><p>文字</p> - 根本原因：浏览器把
</img>当作一个新开始标签，后续所有节点都被当成它的子元素，导致层级右移 - 实操建议：统一写成
<img src="x" alt="描述">（不加/>也不加</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比对输出——这才是唯一靠谱的验证方式。
