前端工程代码规范（二）——HTML

总原则

缩进使用soft tab（4个空格）；
属性名全小写，用中划线做分隔符；
在属性上，使用双引号，而非单引号；
不要在自动闭合标签结尾处使用斜线。

<!DOCTYPE html>
<html>
    <head>
        <title>Page title</title>
    </head>
    <body>
        <img src="xxx/xxx.png" alt="Company">

        <input type="text" value="xxx">
    </body>
</html>

HTML5 doctype

在页面顶部，用doctype来启用标准模式，使得每个浏览器的展现都尽可能地保持一致。虽然doctype不区分大小写，但是按照惯例，doctype大写，写法见上例。

lang属性

根据html5规范

常用的值有zh，en等，更细分的则有zh-cn(中国大陆)、zh-tw(中国台湾)、zh-hk(中国香港)

<!DOCTYPE html>
<html lang="en-us">
    ...
</html>

字符编码与IE兼容模式

通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。
用 <meta>标签可以指定页面应该用什么版本的IE来渲染，不同doctype在不同浏览器下会触发不同的渲染模式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    </head>
    ...
</html>

引入CSS，JS

根据html5规范

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

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

<!-- External JS -->
<script src="xxx.js"></script>

<!-- In-document JS -->
<script>
    ...
</script>

boolean属性

boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要。

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

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

属性顺序（`推荐`）

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

class是为高可复用组件设计的，所以应处在第一位；
id更加具体且应该尽量少用，所以将它放在第二位。

<a class="..." id="..." data-modal="toggle" href="#">xxx</a>

<input class="form-control" type="text">

<img src="..." alt="...">

一些建议

尽量避免用js生成标签，这会使得内容变得更难维护，性能也更差；
在编写HTML代码时，需要尽量避免多余的父节点；
尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

目录索引

前端工程代码规范（一）——命名规则与工程约定
 前端工程代码规范（三）——CSS, SCSS
前端工程代码规范（四）——JS

micherwa