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()方法;