HTML、HTML5开发规范

HTML规范

使用小写元素名

HTML5 元素名可以使用大写和小写字母。

应该使用小写字母：

混合了大小写的风格是非常糟糕的。
开发人员通常使用小写 (类似 XHTML)。
小写风格看起来更加清爽。
小写字母容易编写。

<!-- 错误 -->
<SECTION>
  <p>这是一个段落。</p>
</SECTION>
<!-- 错误 -->
<Section>
  <p>这是一个段落。</p>
</SECTION>
<!-- 正确 -->
<section>
  <p>这是一个段落。</p>
</section>

关闭所有 HTML 元素

在 HTML5 中, 你不一定要关闭所有元素 (例如

元素)，但我们应该每个元素都要添加关闭标签。

<!-- 错误 -->
<section>
  <p>这是一个段落。
  <p>这是一个段落。
</section>
<!-- 正确 -->
<section>
  <p>这是一个段落。</p>
  <p>这是一个段落。</p>
</section>

关闭空的 HTML 元素

在 HTML5 中, 空的 HTML 元素也不一定要关闭，

我们可以这么写：

<!-- 错误 -->
<meta charset="utf-8">

应该始终这么写：

<!-- 正确 -->
<meta charset="utf-8" />

使用小写属性名

HTML5 属性名允许使用大写和小写字母。

应该始终使用小写字母属性名：

<!-- 错误 -->
<div CLASS="test">
<!-- 正确 -->
<div class="test">

属性值使用引号包裹

HTML5 属性值可以不用引号。

属性值应该始终使用引号：

如果属性值含有空格需要使用引号。
混合风格不推荐的，建议统一风格。
属性值使用引号易于阅读。

<!-- 错误 -->
<div class=test container>
<!-- 正确 -->
<div class="test container">

图片的alt属性

图片使用使用 alt 属性。在图片不能显示时，它能替代图片显示。

<!-- 推荐 -->
<img decoding="async" src="html5.gif" alt="HTML5">

定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

空格和等号

等号前后可以使用空格。

但是实际开发中不应该这么做

<!-- 错误 -->
<link rel = "stylesheet" href = "styles.css">
<!-- 正确 -->
<link rel="stylesheet" href="styles.css">

避免一行代码过长

使用 HTML 编辑器，左右滚动代码是不方便的。

每行代码尽量少于 80 个字符。（可在编辑器配置）

空行和缩进

不要无缘无故添加空行。

为每个逻辑功能块添加空行，这样更易于阅读。

缩进使用两个空格，不建议使用 TAB。

比较短的代码间不要使用不必要的空行和缩进。

<!-- 不推荐 -->
<body>

  <h1>主标题</h1>

  <h2>子标题</h2>

  <p>
    段落段落段落段落段落段落段落段落段落
    段落段落段落段落段落段落段落段落段落
    段落段落段落段落段落段落段落段落段落
  </p>

</body>

<!-- 推荐 -->
<body>

<h1>主标题</h1>

<h2>子标题</h2>
<p>段落段落段落段落段落段落段落段落段落。
段落段落段落段落段落段落段落段落段落。
段落段落段落段落段落段落段落段落段落。</p>

</body>

标签语义化

现在开发基本是SPA单页面应用，但是并不代表语义化标签就无用武之地。使用语义化标签对于后期的维护，能减少理解成本，快速理解页面结构，是非常有必要的，不应该整个页面都是div + span。

我的博客只写前端博文，点击我去看更多喜欢的前端博文，欢迎大家一起讨论学习！【https://blog.csdn.net/qq_29101285?spm=1011.2266.3001.5343】

标签