html标签无对齐语义，源码缩进仅提升可读性；格式化异常多因语法错误；表格内容错位源于css的text-align/vertical-align缺失；sub/sup错位需用transform或unicode上标解决。
HTML标签本身没有“对齐”语义，所谓“标签对齐”实际是指源码缩进结构的视觉对齐，目的是提升可读性与协作效率。直接用浏览器渲染或CSS去“对齐标签”是无效且误解方向的。
VS Code 里按 Shift+Alt+F 格式化后标签还是歪的？
这通常不是格式化失败，而是原始 HTML 存在结构性问题：比如未闭合的 <div>、错位的 <code>、或 <script></script> 块内混写了未转义的 字符。Prettier 等工具遇到语法错误会退回到“尽力而为”模式，缩进逻辑中断，导致子元素突然左移或错层。
<ul>
<li>先用 W3C Validator（<code>https://validator.w3.org）粘贴代码，确认无 Start tag X seen but an element of the same type was already open 类报错
<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea> 或内联 <script></script> 中写了未编码的 <div> —— 这些区域不参与 HTML 解析，但会干扰格式化器的层级判断
<li>禁用其他格式化插件（如 Beautify），只留 Prettier，并在 VS Code 设置中确认 <code>"editor.formatOnSave": true 和 "prettier.parser": "html"
table 标签里 内容看起来没对齐，其实是 CSS 没设对
表格单元格内容“看起来没对齐”，90% 情况下和 HTML 标签缩进无关，而是 text-align 和 vertical-align 缺失或冲突。浏览器默认 <td> 的 <code>text-align: left、vertical-align: middle，但一旦父级 <table> 或 <code><tr> 上有全局样式覆盖，就会失效。
<ul>
<li>不要用过时的 <code>align="center" 或 valign="top" 属性，它们已被 HTML5 废弃，且优先级低于 CSS
统一在 CSS 中控制：td, th { text-align: center; vertical-align: top; }，避免单个单元格写 style 覆盖
若某列需右对齐数字、左对齐文字，给该列加 class：<td class="num">123</td>，再写 .num { text-align: right; }
sub/sup 标签在行内“飘起来”或“沉下去”，不是标签问题
<sub></sub> 和 <sup></sup> 是语义标签，不是排版工具。浏览器对其垂直偏移的计算依赖字体度量，不同字体（如 system-ui vs monospace）下 vertical-align: sub 的像素值完全不同，混排时必然错位。
- 强制重置：
sub, sup { vertical-align: baseline; font-size: 0.75em; }
- 需要精确位置时，改用
transform: translateY(-0.25em) 替代 top/bottom，兼容性更稳
- 化学式如
H<sub>2</sub>O 若仍不准，优先考虑 Unicode 上标字符（H₂O），比 CSS 微调更可靠
真正难的不是让标签“看起来对齐”，而是分清哪些该由编辑器处理（源码缩进）、哪些必须靠 CSS 控制（渲染后布局）、哪些干脆不该用 HTML 标签解决（如数学公式）。混淆这三层，越调越乱。
表格单元格内容“看起来没对齐”，90% 情况下和 HTML 标签缩进无关，而是 text-align 和 vertical-align 缺失或冲突。浏览器默认 <td> 的 <code>text-align: left、vertical-align: middle，但一旦父级 <table> 或 <code><tr> 上有全局样式覆盖，就会失效。
<ul>
<li>不要用过时的 <code>align="center" 或 valign="top" 属性，它们已被 HTML5 废弃，且优先级低于 CSS
td, th { text-align: center; vertical-align: top; }，避免单个单元格写 style 覆盖<td class="num">123</td>，再写 .num { text-align: right; }
sub/sup 标签在行内“飘起来”或“沉下去”，不是标签问题
<sub></sub> 和 <sup></sup> 是语义标签，不是排版工具。浏览器对其垂直偏移的计算依赖字体度量，不同字体（如 system-ui vs monospace）下 vertical-align: sub 的像素值完全不同，混排时必然错位。
- 强制重置：
sub, sup { vertical-align: baseline; font-size: 0.75em; } - 需要精确位置时，改用
transform: translateY(-0.25em)替代top/bottom，兼容性更稳 - 化学式如
H<sub>2</sub>O若仍不准，优先考虑 Unicode 上标字符（H₂O），比 CSS 微调更可靠
真正难的不是让标签“看起来对齐”，而是分清哪些该由编辑器处理（源码缩进）、哪些必须靠 CSS 控制（渲染后布局）、哪些干脆不该用 HTML 标签解决（如数学公式）。混淆这三层，越调越乱。
