HTML缩进是快速定位嵌套错误的关键防线，必须统一用2个空格而非Tab，子元素缩进一层且闭合标签与开始标签垂直对齐，配合Prettier和VS Code配置实现自动化。
HTML格式化不是“让代码看起来更漂亮”的装饰活，而是防止你和同事在改一个 div 时，误删了它包裹的 form 闭合标签——浏览器不报错，但表单就突然不提交了。
缩进错位比语法错误更难定位
HTML 不依赖换行或空格渲染，但人依赖缩进来识别嵌套关系。缩进混乱时，<section> 看起来像在 <header> 里，实际却漏写了闭合标签，或者多了一层没配对的 <div>。
- 统一用
2个空格缩进（不是 Tab），避免不同编辑器显示不一致 - 每个块级元素（如
<main>、<article>、<nav>）独占一行 - 子元素必须缩进一层，且闭合标签与开始标签垂直对齐（不是紧贴内容末尾）
- 反例：
<p>内容<strong>重点</strong></p>可接受；但<section><h2>标题</h2><ul>...</ul></section>写在同一行，就丧失结构可视性
语义化标签直接降低理解成本
看到 <div class="nav">，没人知道它是导航栏还是侧边广告；换成 <nav>，结构意图立刻明确，屏幕阅读器也能正确播报。
-
<main>全页只能出现一次，且必须包裹核心内容 -
<section>必须有主题，建议紧跟<h2>或更高级别标题 - 表单就用
<form>，按钮就用<button>，别用<div role="button">模拟 - 避免
<div class="wrapper"><div class="inner"><div class="content">这类无意义嵌套
类名和注释要帮人快速判断“这是什么”，而不是“它长什么样”
写 class="red-btn"，等按钮改成蓝色时，这个类名就成误导；加注释 <!-- .product-card --> 比写 <!-- 这里是商品卡片 --> 更简洁有效。
立即学习“前端免费学习笔记（深入）”；
- 类名用 kebab-case，表达用途：比如
search-submit、error-message，而非btn-1或yonghu - 大型容器起始和结束处加对称注释：
<!-- .sidebar -->和<!-- /.sidebar --> - 避免注释显而易见的内容，比如不要在
<header>上写<!-- 这是页头 --> - 注释只说明特殊布局逻辑或交互依赖，例如：
<!-- required for sticky-nav JS hook -->
最常被忽略的是：格式化不能靠眼睛盯出来。手动缩进、手动对齐、手动加空行，长期协作下必然失守。真正可靠的起点，是把 prettier 集成进编辑器并开启 editor.formatOnSave，再配合 html.format.indentInnerHtml: true 这类 VSCode 原生配置——人负责语义判断，工具负责机械执行。
