缩进与格式

缩进与格式的重要性

代码缩进与格式直接影响可读性与维护性。良好的缩进习惯能让团队协作更高效，减少因格式混乱导致的错误。HTML作为标记语言，虽然没有严格的缩进要求，但一致的格式规范对大型项目至关重要。

基础缩进规则

HTML文档应使用2个空格作为标准缩进单位。制表符(tab)在不同编辑器中显示宽度可能不同，因此不推荐使用。每个嵌套层级增加一级缩进：

<div>
  <ul>
    <li>项目一</li>
    <li>项目二</li>
  </ul>
</div>

自闭合标签不需要额外缩进，保持与父元素对齐：

<img src="image.jpg" alt="示例图片">

多属性元素的格式

当元素包含多个属性时，每个属性独占一行并缩进一级：

<input
  type="text"
  id="username"
  name="user_name"
  required
  maxlength="20"
>

布尔属性(如disabled、required等)可以省略值，保持简洁格式：

<button disabled>不可点击</button>

长内容的格式化处理

对于包含长文本或复杂内容的元素，建议将内容换行并缩进：

<p>
  这是一段非常长的文本内容，为了保持代码的可读性，
  我们将其分成多行书写，同时保持正确的缩进层级。
  这样在后续维护时能更清晰地看到DOM结构。
</p>

模板语言的缩进规范

在使用Vue、React等模板语法时，需保持与HTML一致的缩进原则：

function Component() {
  return (
    <div className="container">
      <Header />
      <main>
        <Article
          title="示例文章"
          content="..."
        />
      </main>
    </div>
  )
}

特殊情况的处理

某些元素如<pre>和<code>需要保留原始格式，此时不应强制缩进：

<pre><code>function test() {
  console.log('保留原始缩进');
}</code></pre>

表格元素可以适当放宽缩进要求以提高可读性：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

工具自动化处理

推荐使用Prettier、ESLint等工具自动格式化代码。配置示例(.prettierrc)：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "htmlWhitespaceSensitivity": "css"
}

编辑器配置应开启"format on save"功能，确保每次保存时自动应用格式规则。

团队协作中的格式统一

在团队项目中，应在根目录添加.editorconfig文件：

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

对于混合技术栈项目，需要特别注意HTML与嵌入式脚本的缩进协调：

<script>
  // JavaScript代码保持与HTML相同的缩进规则
  function init() {
    console.log('初始化');
  }
</script>

历史代码的格式处理

处理遗留代码时，应逐步重构而非一次性修改全部格式。可以：

1. 先为文件添加格式化规则注释
2. 在修改具体功能时顺便修复周边格式
3. 使用工具批量格式化前做好版本控制

<!-- prettier-ignore -->
<div class="old-style">
<p>这段代码暂时保持原样</p>  </div>

可访问性相关的格式考虑

正确的缩进有助于屏幕阅读器解析内容结构。特别是ARIA属性的排列：

<nav aria-label="主菜单">
  <ul>
    <li>
      <a
        href="#home"
        aria-current="page"
      >
        首页
      </a>
    </li>
  </ul>
</nav>