11. HTML 代码规范与格式

本节目标：掌握 HTML 的基本书写规范，养成好习惯，写出整洁易读的代码。

代码不仅是给机器执行的，也是给人看的。规范的代码更容易维护。

标签全部小写

虽然 HTML 标签不区分大小写，但约定俗成都用小写：

<!-- 推荐 -->
<div class="container">
  <p>内容</p>
</div>

<!-- 不推荐 -->
<DIV CLASS="container">
  <P>内容</P>
</DIV>

属性值用双引号

<!-- 推荐 -->
<a href="https://example.com" title="示例">链接</a>

<!-- 不推荐 -->
<a href='https://example.com' title=示例>链接</a>

虽然不加引号在某些情况下也能工作，但加双引号是最安全的做法。属性值里有空格或特殊字符时，不加引号会出问题。

正确缩进

用缩进来体现层级关系，通常每级缩进 2 个空格：

<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p>主要内容</p>
  </main>
</body>

Tip

VS Code 里按 Shift + Alt + F 可以自动格式化 HTML 代码。

正确嵌套

标签必须按顺序关闭，不能交叉：

<!-- 推荐 -->
<p>这是<strong>加粗</strong>的文字</p>

<!-- 错误 -->
<p>这是<strong>加粗</p></strong>

想象俄罗斯套娃：先打开的后关闭，后打开的先关闭。

空元素的写法

空元素（void element）没有内容也没有结束标签：

<!-- 推荐 -->
<br>
<img src="photo.jpg" alt="照片">
<hr>
<input type="text">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">

<!-- 也可以这样写（XHTML 风格），但没必要 -->
<br />

常见的空元素清单：

area、base、br、col、embed、hr、img、input、link、meta、param、source、track、wbr

布尔属性可以省略值

有些属性是布尔类型的，写了就代表”开启”：

<!-- 推荐 -->
<input type="text" disabled>
<button disabled>点击</button>
<select multiple>

<!-- 也可以这样写 -->
<input type="text" disabled="disabled">

省略可选的标签

HTML 有一些可选的省略规则，但为了可读性，建议都写上：

<!-- 允许省略，但不推荐 -->
<body>
  <p>段落一
  <p>段落二
</body>

<!-- 推荐：完整写法 -->
<body>
  <p>段落一</p>
  <p>段落二</p>
</body>

语义优先

能用语义标签的地方，就不要全用 <div>：

<!-- 不推荐：全是 div -->
<div class="header">
  <div class="nav">
    <div class="nav-item">首页</div>
  </div>
</div>

<!-- 推荐：语义化 -->
<header>
  <nav>
    <a href="/">首页</a>
  </nav>
</header>

小结

标签小写，属性值用双引号
缩进体现层级，每级 2 空格
正确嵌套，不能交叉
空元素不写结束标签
布尔属性可以省略值
语义标签优先于 div

下一节是模块一的回顾与测验。