总体规范
1.文档目录结构
//TODO (ToDo:待办事项,备忘录)
2.分离
结构（HTML）、表现（CSS）、行为分离（JavaScript）
将结构与表现、行为分离，保证它们之间的最小耦合，这对前期开发和后期维护都至关重要。
3.文件命名
CSS模块文件，其文件名必须与模块名一致；假定有这样一个模块：
.m-detail { sRules; }
.m-detail-hd { sRules; }
.m-detail-bd { sRules; }
.m-detail-ft { sRules; }
那么该模块的文件名应该为：m-detail.css
CSS页面文件，其文件名必须与HTML文件名一致；假定有一个HTML页面叫 product.html，那么其相对应的CSS页面文件名应该为：product.css
假定现在有一个 product.html，里面有2个模块：
<section class="m-list">
<section class="m-info">
那么开发人员能快速找到与该页面相关的3个直接CSS文件，包括：product.css, m-list.css, m-info.css
4.缩进
将你的编辑器按照下面的配置进行设置，以避免常见的代码不一致和差异：
用四个空格代替制表符（soft-tab 即用空格代表 tab 符）。 保存文件时，删除尾部的空白符。 设置文件编码为 UTF-8。 在文件结尾添加一个空白行。
推荐使用sublime text来进行前端脚本的编写。
可以在Preferences -> Setting - User 中加入以下配置:
"tab_size": 4,
"translate_tabs_to_spaces": true
此时，按tab键即可敲出四个空格。
5.编码
以 UTF-8 无 BOM 编码作为文件格式；
在HTML中文档中用
<meta charset="utf-8" />来指定编码；为每个CSS文档显示的定义编码，在文档首行定义
@charset "utf-8";
在 Sass 中，如果文档中出现中文，却未显示定义编码，将会编译出错，为了统一各种写法，且提前规避错误几率，统一要求每个CSS文档都需要定义编码
6.小写
所有的HTML标签必须小写；
所有的HTML属性必须小写；
所有的样式名及规则必须小写。
7.注释
好的命名与代码组织优于注释。如果你为代码添加了注释，在对代码进行改动的时候记得更新它。
8.待办事项
用 TODO 标示待办事项和正在开发的条目
<!-- TODO: 图文混排 -->
<div class="g-imgtext">
<img src="1.png" alt="" />
...
/* TODO: 图文混排 comm: g-imgtext */
.g-imgtext { sRules; }
9.省略嵌入式资源协议头
省略图像、媒体文件、样式表和脚本等URL协议头部声明 ( http: , https: )。如果不是这两个声明的URL则不省略。
省略协议声明，使URL成相对地址，防止内容混淆问题和导致小文件重复下载（这个主要是指http和https交杂的场景中）。
不推荐：
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
推荐：
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
不推荐：
.example {
background: url(http://www.google.com/images/example);
}
推荐：
.example {
background: url(//www.google.com/images/example);
}
注：省略协议头在IE7-8下会有一点小问题，外部CSS文件（link和@import）会被下载两遍，所以该条目的约定看具体项目。
HTML
语法
用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号。
不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
不要省略可选的结束标签（closing tag）（例如， 或 ）。
<!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>
HTML5 doctype
为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
<!DOCTYPE html>
<html>
<head>
</head>
</html>
语言属性
根据 HTML5 规范：
强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。
<html lang="zh-CN">
<!-- ... -->
</html>
IE 兼容模式
IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge/">
字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。
<head>
<meta charset="UTF-8">
</head>
引入 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>
属性顺序
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
class
id, name
data-*
src, for, type, href
title, alt
aria-*, role
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。
<a class="..." id="..." data-modal="toggle" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">
布尔（boolean）型属性
布尔型属性不用赋值。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
减少标签的数量
编写 HTML 代码时，尽量避免多余的父元素。
<!-- Not so great -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
图像
图像压缩
所有图片必须经过一定的压缩和优化才能发布
背景图
使用PNG格式而不是GIF格式，因为PNG格式色彩更丰富，还能提供更好的压缩比；
前景图
内容图片建议使用JPG，可以拥有更好地显示效果；装饰性图片使用PNG。
Sprite
CSS Sprite是一种将数个图片合成为一张大图的技术（既可以是背景图也可以是前景图），然后通过偏移来进行图像位置选取；CSS Sprite可以减少http请求。
