# HTML编码规范

黄金定律：永远遵循同一套编码规范，管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。

# 语法

用两个空格代替制表符（tab）--这是唯一能保证在所有环境下获得一致展现的方法
嵌套元素应当缩进一次（即两个空格）
对于属性的定义，确保全部使用双引号，绝不要使用单引号
在自闭和（self-closing）元素的尾部添加斜线--HTML5规范中明确说明这是可选的
不要省略可选的结束标签（closing tag），例如：</li>, </body>

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10

# HTML5 DOCTYPE

为每个HTML页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

1
2
3
4
5

# 语言属性

根据HTML5规范：强烈建议为html根元素指定lang属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。这里列出了语言代码表 (opens new window)

<html lang="zh-CN">
  <!-- ... -->
</html>

1
2
3

# IE兼容模式

IE支持通过特定的<meta>标签来确定绘制当前页面所应采用的IE版本。除非有强烈的特殊需求，否则最好是设置为edge mode，从而通知IE采用其所支持的最新的模式

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

# 字符编码

通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在HTML中使用字符实体标记，从而全部与文档编码一致（一般采用UTF-8编码）

<head>
  <meta charset="UTF-8">
</head>

1
2
3

# 引入CSS和Javascript文件

根据HTML5规范，在引入CSS和Javascript文件时一般不需要制定type属性，因为text/css和text/javascript分别是它们的默认值

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

1
2
3
4
5
6
7
8
9
10

!> 实用为王：尽量遵循HTML标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度

# 属性顺序

HTML属性应当按照以下给出的顺序一次排列，确保代码的易读性
- class
- id, name
- data-*
- src, for, type, href
- title, alt
- aria-*, role
class用于标识高度可复用组件，因为应该排在首位。id用于标识具体组件，应当谨慎使用（例如：页面内的书签）因此排在第二位

# 布尔（Boolean）型属性

布尔型属性可以在声明时不赋值。XTHML规范要求为其赋值，但是HTML规范不需要
- 元素的布尔型属性如果有值，就是true，如果没有值，就是false
如果一定要为其赋值的话，请参考WhatWG规范
- 如果属性存在，其值必须是空字符串或[...]属性的规范名称，并且不要在收尾添加空白符
简单来说，就是不用赋值

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

1
2
3
4
5
6
7

# 减少标签的数量

编写HTML代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现，如：

<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

1
2
3
4
5
6
7

# Javascript 生成的标签

通过Javascript生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免