前言

浏览器对于 HTML 有很大的容错性，甚至元素缺少结束标签都能正常显示，比如以下的代码。

$$warning

在日常开发中这种写法应该是严格禁止的。

<ul>
    <li>苹果
    <li>西瓜
</ul>

$$demo

可以，很多时候我们应该遵守一套严格的代码格式规范。

比如，尽管 HTML 不规定缩进的空格数，使用几个空格都行。但我们还是应该制定一个标准， 4个（或两个）空格作为缩进。这样可以使得我们的代码规格统一，增加可读性。

特别是在团队当中，多人协作开发一个项目时，更应该统一代码的格式。

代码规范

以下的代码规范是经常参阅多个前端团队（谷歌、Adobe、百度等）公开的代码规范后总结出来的，建议按照以下代码规范约束自己的代码。

缩进 4 个空格

使用 4 个空格作为缩进，不要使用制表符。

<!-- 不推荐 -->
<div>
 <p>你好</p>
</div>

<!-- 推荐 -->
<div>
    <p>你好</p>
</div>

小写命名

所有元素名、属性都以小写字母命名，如果是多个单词组合则用连字符 - 连接。

<!-- 不推荐 -->
<CustomElement>自定义标签</CustomElement>
<!-- 推荐 -->
<custom-element>自定义标签</custom-element>

双引号

始终使用双引号包裹属性值，而不是单引号或不使用引号。

<!-- 不推荐 -->
<input type="text" name=title />
<input type="text" name='title' />

<!-- 推荐 -->
<input type="text" name="title" />

空元素闭合

所有的空元素都必须闭合。

<!-- 不推荐 -->
<input type="text">

<!-- 推荐 -->
<input type="text" />

不省略闭合

尽管在 HTML 中可以省略部分元素的闭合标签，但还是不推荐省略。

<!-- 不推荐 -->
<ul>
    <li>苹果
    <li>西瓜
</ul>

<!-- 推荐 -->
<ul>
    <li>苹果</li>
    <li>西瓜</li>
</ul>

单行长度 120 字符以内

每行的代码最大长度为 120 个字符，在起始标签、结束标签、属性名处换行。

属性顺序

元素的属性尽量按照以下顺序排列。

class
id, name
data-*
src, for, type, href,value
title, alt
role, aria-*

布尔属性省略值

元素上存在布尔属性则值为 true ，否则为 false ，不允许设置值。

<!-- 不推荐 -->
<input type="text" disabled="true" />

<!-- 推荐 -->
<input type="text" disabled />

标注文件类型

明确使用 HTML5 的文档类型，即在文档首行添加 <!DOCTYPE html> 。

<!-- 推荐 -->
<!DOCTYPE html>

语义化的元素

使用有着明确语义的元素，而不是一些通用的元素。

<!-- 不推荐 -->
<div>
    这是一篇文章。。。
</div>
<!-- 推荐 -->
<article>
    这是一篇文章。。。
</article>

声明字符编码

显式声明当前页面文件所用的字符编码可以避免出现乱码，推荐代码文件使用应用率最高的 utf-8 编码。

<!-- 推荐 -->
<head>
    <meta charset="utf-8">
</head>

语言属性

设置 html 元素的 lang 属性有助于帮助浏览器识别当前文档的主体语言，帮助翻译工具或阅读工具工作。

<!-- 推荐 -->
<html lang="en">
    <!-- ... -->
</html>

前言