H5规范总结
1.文档类型：文档类型声明位于html文档的第一行，可以使用小写。（doctype：确保浏览器正确渲染内容，如果不加会导致部分css无法渲染）；
2.元素名：元素名可以使用大写和小写字母，推荐使用小写字母；
3.闭合所有html元素：空的html元素不一定要关闭；
4.属性名：html5属性名允许使用大写和小写字母，推荐使用小写属性名；
5.属性值：属性值可以不用引号，推荐使用引号；
6.图片属性：图片通常使用alt属性，图片不能显示时能代替图片显示；
定义好图片尺寸，在加载时可以预留指定空间，减少闪烁；
7.空格和等号：等号前后可以使用空格，推荐少用空格；
8.避免一行代码过长：每行代码尽量少于80个字符；
9.空行和缩进：不能无缘无故添加空行；
为每个逻辑功能块添加空行，这样更易于阅读；
缩进用两个空格，不建议用TAB；
比较短的代码间不要使用不必要的空行和缩进；
10.<html>、<body>：可以省略标签，不推荐省略；
11.<head>：可以省略标签，默认情况下浏览器会自动添加<head>标签，不推荐省略；
12.元数据：<title>元素必须的，标题名描述页面的主题，可以让搜索引擎更快了解你的主题；
13.html注释：<!-- --> 长评论第一个字符缩进两个更易阅读；
14.样式表：用简洁的语法格式，type属性不是必须的，短的规则可以写成一行，长的规则可以写多行；
将左花括号与选择器放在同一行；
左花括号与选择器间添加以空格；
使用两个空格来缩进；
冒号与属性之间添加一空格；
逗号和符号之后使用一个空格；
每个属性与值结尾都要使用符号；
只要属性值包含空格时才使用引号；
右花括号放在新的一行；
每行最多80字符；
15.在html中载入javascript：简洁语法载入外部脚本文件（type属性不是必须的）；
16.使用javescript访问html元素：糟糕的html格式可能会导致javescript执行错误；
17.小写文件名：大多数web服务器对大小写敏感（如apache，unix）；
其他web服务器对大小写不敏感（如microsoft，iis）；
18.文件扩展名：html文件后缀可以是.html（或.htm）；
css文件后缀是.css；
javascript文件后缀是.js；
19..htm和.html区别：扩展名文件本质上是没有区别的，浏览器和web服务器都会把他们当作html文件来处理。区别在于
.htm应用在早期dos系统，系统现在或者只有三个字符；
在unix系统中后缀没有特别限制，一般用.html；
如果一个url没有指定文件名，服务器会返回默认文件名，通常默认文件名是index.html，index.htm，default.html，default.htm；
20.在标准文档流里面，块级元素具有以下特点：
总是在新行上开始，占据一整行；
高度，行高以及外边距和内边距都可控制；
宽带始终是与浏览器宽度一样，与内容无关；
它可以容纳内联元素和其他块元素；
行内元素的特点：
和其他元素都在一行上；
高，行高及外边距和内边距部分可改变；
宽度只与内容有关；
行内元素只能容纳文本或者其他行内元素；
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用
21.标签：
自闭合（self-closing）标签，无需闭合（例如：img input br hr等）；
可选的闭合标签（closing tag），需闭合（例如：</li>或</body>）;
尽量减少标签的数量；
22.Class与ID
Class应以功能或内容命名，不以表现形式命名；
Class与id单词字母小写，多个单词组成时，采用分划线（-）分隔；
使用唯一的id作为javascript hook，同时避免创建无样式信息的class；
23.属性顺序：
html属性应该按照特定的顺序出现以保证易读性：
Id class name data-xxx src ,for,type,href title，alt aria-xxx，role
24.引号：
属性的定义，统一使用双引号。
25.嵌套：
a不允许嵌套div这种约束属于语义嵌套约束。
严格嵌套约束，比如a不允许嵌套a。
严格嵌套约束在所有浏览器下都不被允许。语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样；
26.语义嵌套约束：
<li>用于<ul>或<ol>下；
<dd>,<dt>用于<dl>下；
<thead>,<tbody>,<tfoot>,<tr>,<td>用于<table>下；
27.严格嵌套约束：
Inline-level元素，仅可以包含文本或其它inline-level元素；
<a>里不可以嵌套交互式元素<a>、<button>、<select>等；
<p>里不可以嵌套块级元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。
28.布尔值属性：
Html5规范中disabled、checked、selected等属性不用设置值；
Css代码规范
1.代码组织
以组件为单位组织代码段；
制定一致的注释规范；
组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
如果使用了多个css文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动；
2.class和id
使用语义化，通用的命名方式；
使用连字符-作为id，class名称界定符，不要驼峰命名法和下划线；
避免选择器嵌套层级过多，尽量少于3级；
避免选择器和class，id叠加使用；
避免元素选择器叠加class，id使用。
元素选择器和id，class混合使用违反关注分离原则，如果html标签修改了，就要在去修改css代码，不利于后期维护。
3.声明块格式：
选择器分组时，保持独立的选择器占用一行；
4.声明顺序：
Positioning（定位），box model（盒模型），typographic（排字），visual（图像）；
5.引号使用：
Url（），属性选择符，属性值使用双引号；
6.媒体查询的位置：
将媒体查询放在尽可能相关规则附近，容易被遗忘；
7.不要使用@import：
与<link>相比，@import要慢很多，不光增加额外的请求数，还会导致不可预料的问题；
替代方法：使用多个元素；通过sass或less类似的css预处理器将多个css文件编译为一个。其他css文件合并工具；
8.链接的样式顺序：
a：link->a:visited->a:hover->a:active(爱恨原则lvha)；
9.无需添加浏览器厂商前缀；
10.性能优化：
慎重选择高消耗的样式：
Box-shadows、border-radius、transparency、transforms、css filters（性能杀手）；
避免过分重排：
当发生重排时，浏览器需要重新计算布局位置与大小；
正确使用display属性：
Display属性会影响页面的渲染，合理使用
Display：inline后不应该在使用width、height、margin、padding以及float；
Display：inline-block后不应该在使用float；
Display：block后不应该在使用vertical-align；
Display：table-*后不应该在使用margin或者float；
不滥用float
Float在渲染时计算量比较大，尽量减少使用；
动画性能优化：
浏览器的渲染刷新频率是60fps，在网页当中，频率如果达到50-60fps的动画会相当流畅；
如果基于javascript的动画，尽量使用requestAnimationFrame，避免使用setTimeout，setInterval；
避免通过类似jQuery animate（）-style改变每帧的样式，使用css声明动画会得到更好的浏览器优化；
使用translate取代absolute定位就会得到更好的fps，动画会更顺畅；
多利用硬件能力，通过3D变形开启GPU加速：
3D变形会消耗更多的内存和功耗；
提升css选择器性能：
避免使用通用选择器；
避免使用标签或class选择器限制id选择器；
避免使用标签限制class选择器；
避免使用多层标签选择器，使用class选择器替换，减少css查找；
避免使用子选择器；
使用继承；
javascript代码规范
1.变量名：推荐使用驼峰法来命名，数字不能放首位；
2.空格与运算符：通常运算符前后需要添加空格；
3.代码缩进：通常使用4个空格符号来缩进代码块，不推荐使用TAB键来缩进，不同编辑器TAB键的解析不一样；
4.语句规则：简单语句，一条语句通常以分号作为结束符；复杂语句，将左花括号放在第一行的结尾。
左花括号前添加一空格。
将右花括号独立放在一行。
不要以分号结束一个复杂的声明；
5.对象规则：将左花括号与类名放在同一行。
冒号与属性值间有个空格。
字符串使用双引号，数字不需要。
最后一个属性值对后面不要添加逗号。
将由花括号独立放在一行，并以分号作为结束符号。
短的对象代码可以直接写成一行；
6.每行代码字符小于80；
7.命名规则：变量和函数为驼峰法；
全局变量为大写；
常量为大写；
变量命名通常使用这几种规则：hyp-hens，camelCase，或under_scores；
Html和css的横杠（-）字符，通常在javascript中被认为是减法，不允许使用；
帕斯卡拼写法（PascalCase），驼峰法，变量名不要以$作为开始标记，会与很多javascript库冲突；
8.html载入外部javascript文件：糟糕的html格式可能会导致javascript执行错误，html和javascript尽量使用相同的命名规则；
9.文件扩展名：html文件后缀是.html或.htm；
Css文件后缀是.css；
Javascript文件后缀是.js；
10.使用小写文件名：大多数web服务器对大小写敏感（如apache，unix）；
其他web服务器对大小写不敏感（如microsoft，iis）；
保持统一风格，建议使用小写文件名；
11.不要在array上使用for-in循环：
For-in循环只用于object/map/hash的遍历，对array用for-in循环有时会出错，因为它并不是从0到length-1进行遍历，而是所有出现在对象及其原型链的键值；
12.二元和三元操作符：
操作符始终写在前一行，以免分号的隐式插入产生预想不到的问题；
13.性能优化：
避免不必要的DOM操作；
浏览器遍历DOM元素代价是昂贵的，最简单的优化方案是，当一个元素出现多次时，将它保存在一个变量中，就避免多次查询dom树了；
缓存数组长度：
通过存储数组的长度，可以有效避免每次循环重新计算；
异步加载第三方内容：
当无法保证嵌入第三方内容可以正常工作时，考虑用异步加载这些代码，避免阻塞整个页面加载；
避免使用jQuery实现动画：
禁止使用slideUp/Down（）fadeIn、fadeOut（）等方法；
尽量不使用animate（）方法；
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
