vs code默认html格式化效果差，需禁用内置格式化器、安装prettier并配置.prettierrc和settings.json才能实现可靠一键格式化。
HTML标签本身没有“对齐”功能，所谓排版对齐，本质是靠缩进、换行、属性顺序和CSS共同作用的结果。手动敲空格或用 强行对齐，只会让代码越来越难维护。
HTML原生格式化器怎么处理缩进和换行
VS Code等编辑器内置的HTML格式化器（如html.format.indentInnerHtml）默认会对嵌套标签自动缩进，但前提是结构合法、标签闭合完整。一旦漏写或把<td>直接放在<code><table>下，格式化器就可能放弃缩进，甚至把整段挤成一行。
<ul><li>启用<code>"html.format.indentInnerHtml": true后，<div>里的<code><p></p>、<span></span>会自动缩进一层
"html.format.wrapLineLength": 120能防止单行过长，但不会拆分长属性——得靠手动分行或Prettier插件html-validate或浏览器开发者工具的“Elements”面板检查是否报Unclosed element
表单元素
不是HTML没对齐，而是浏览器默认把<label></label>按文字基线对齐，而<input type="text">按baseline对齐，但它们的line-height和vertical-align实际值不同。单纯给input加margin-top是治标不治本。
- 统一设
vertical-align: middle在所有表单控件上（input、select、button） - 用
display: flex包裹每组label + input，比float或inline-block更可靠 - 避免在
form上设line-height，它会透传到子元素，干扰对齐基准
表格列宽不一致导致整体错位怎么办
HTML表格渲染时，只要某一行<tr>里<code><td>数量和其他行不一致，浏览器就会自动补“幽灵单元格”，视觉上看似对齐，实际DOM结构已乱。这种错位无法用CSS修复，必须从源头修正。
<ul><li>每行<code><td>或<code><th>数量必须严格一致；可用编辑器正则搜索<code><tr>[^粗略统计
<li>用<code><colgroup></colgroup>配合<col style="width: 15%">控制列宽，比给每个td加width更稳定
border-collapse: collapse必须显式声明，否则border双线会让列宽计算失效
真正影响排版对齐的，从来不是某个HTML标签的写法，而是结构合法性、CSS继承链和编辑器配置三者是否咬合。一个漏掉的line-height，能让整页表单上下浮动。这些细节不在文档首页，却天天在真实项目里卡住进度。
HTML表格渲染时，只要某一行<tr>里<code><td>数量和其他行不一致，浏览器就会自动补“幽灵单元格”，视觉上看似对齐，实际DOM结构已乱。这种错位无法用CSS修复，必须从源头修正。
<ul><li>每行<code><td>或<code><th>数量必须严格一致；可用编辑器正则搜索<code><tr>[^粗略统计
<li>用<code><colgroup></colgroup>配合<col style="width: 15%">控制列宽，比给每个td加width更稳定
border-collapse: collapse必须显式声明，否则border双线会让列宽计算失效真正影响排版对齐的，从来不是某个HTML标签的写法，而是结构合法性、CSS继承链和编辑器配置三者是否咬合。一个漏掉的，可能让整个列表缩进崩塌；一段没重置的line-height，能让整页表单上下浮动。这些细节不在文档首页，却天天在真实项目里卡住进度。
