1. HTML 基础

  2. 常用的元素

  3. 工具与规范

前言

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

$$warning

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

$$

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

$$demo

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

$$

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

比如,尽管 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
  • idname
  • data-*
  • srcfortypehref,value
  • titlealt
  • rolearia-*

布尔属性省略值

元素上存在布尔属性则值为 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>

参考文档

  1. Google HTML/CSS Style Guide
  2. Code Guide by @mdo
  3. HTML style guide | Adobe Commerce Developer Guide