Web前端编码规范
一、javascript编码规范
1．所有js代码应写在一个.js文件中，使用<script type=“text/javascript” src=“xxx.js”></script>引入，不在html文件中直接写js代码
2．<script>标签的language属性已废弃，不要再使用
3．所有变量使用前必须声明，声明变量需要使用var关键字，否则默认声明的为全局变量，变量名应为英文字母，数字，下划线“_”，美元符号“$”组成，变量名第一个字符不能是数字。
4．变量名统一使用小写字母，多个单词时使用驼峰式命名，即后面的单词首字母大写
如：userName = “xxx”;。
5．常量名应全为大写，单词与单词之间使用下划线“_”连接，如：PAGE_SIZE=“20”;。
6．代码中不要直接使用数字，而是事先将数字保存至一个变量或常量中，这样更便于理解，如：var RELOAD_DELAY=“3000”。
7．每行语句结束时必须使用分号“;”结束，这样能提高解析的速度，同时能避免代码压缩时出错。
8．一行语句的字符数不能太长，一般不超过80个字符，多出的应该换行显示。
9．函数命名一般以模块名如：“news_”加上功能描述，如：news_showDetail();
10．声明数组直接使用var newArray = []; 替代var newArray=new Array();，声明对象直接使用var obj = {}替代var obj=new Object();;
11．代码缩进，统一缩进四个空格，不要使用软件自带的Tab键，因为每个软件的Tab键的缩进可能会不一致，如果需要使用，应将软件的Tab键设置为四个空格
12．代码书写格式
if(….){
... …
}else{
... …
}
function fun(){
… …
}
其它建议
13．注释，分为行注释和块注释，根据需要选择。代码中应该合理使用注释，一般较复杂的功能性函数都需要注释说明作用及用途，以便阅读和维护。
14．自定义类首字母大写，与javascript内置对象保持一致。
15．不要使用document.all来判断IE浏览器，应使用其它替代，如：window.attachEvent。
16．尽量不要使用eval()函数，因为eval()涉及安全问题，如代码注入。
17．所有对象的最后一项不要加逗号“,”,避免IE6中不识别出错。
18．编码完后可以使用检查工具检查代码：JSLint (http://www.jslint.com/)
二．HTML编码规范
1．所有HTML页面必须包含<!DOCTYPE>，并放在文件第一行，
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2．代码书写严格参照xhtml规范，标签必须全是小写，所有标签都要关闭，即有开始和结束标签，包括单个的标签<br>等。
<div>…</div> 标签成对出现
单个的标签应该使用“/”自关闭，“/”前必须有一个空格。如：
<hr />
<br />
<input typte=“text” />
<img src=“xxx.jpg” alt=“xxx” />
<link rel="stylesheet" type="text/css" href="xxx.css" />
3．属性全都使用小写，所有属性需要有属性值，属性值必须使用引号（一般为双引号）括起，没有属性值的应该像这样写：disabled=“disabled”。
4．一个标记必须占用一行。不得出现两个标记在同一行的情况(同一标记的关闭标记除外)，
错误写法：
<tr><td>text</td></tr>
正确写法：
<tr>
<td>text</td>
<tr>
5．不得出现交叉包含的语句，如：
<p><font>…..</p></font>
6．图片都要加alt属性，alt的值最好与图片相关的，如果没有的话也要写上空的alt=“”。
<img src=“images/icon_help.jpg” alt=“help” />
7．文件名后缀应统一是html，而不使用htm。
8．标签缩进统一为四个空格，使用Tab键需要设置软件的Tab键缩进4个空格。
9．语义化标签，尽量使用html含样式标签替代div,span,p等无意义的标签，使用h1-h6作页面的标题，使用ul，ol，dl作列表。
原始写法：
<div class=“list”>
<div>item1</div>
<div>item2</div>
<div>item3</div>
</div>
改进写法：（这时就算将全部的css去掉也能显示成列表布局）
<ul class=“list”>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
10．标签的命名，多个单词使用中划线分隔，因为中划线会将长ID拆分为独立的单词，而下划线则将长ID显示成一个单词，中划线利于搜索引擎搜索。
11．不使用已经废弃的标签，如<center>等。
12．尽量不要使用colspan，rowspan两个属性，会引起兼容性问题。
13．页面中尽量少使用table，使用div，span等标签替代，使结构与样式分离。
三．CSS编码规范
1．所有的css代码都写到一个css文件中，使用<link rel="stylesheet" type="text/css" href="xxx.css" />引入到页面中。
2．书写格式，当属性值超过1个时，应当把每个属性值独占一行。如下所示：
.header {width:1000px;}
.header {
width:1000px;
height:100px;
border:1px solid #9c9c9c;
}
3．使用简写
如：
font-style:italic;
font-weight:bold;
font-size:14px;
line-height:18px;
简写成：
font:italic bold 14px/18px;
4．命名应该有意义，尽量不要使用缩写，除非一看就明白或特别长的单词。
5．使用驼峰式命名方式，如：productDetail
6．A标签伪类书写要严格按照a:link，a:visited，a:hover，a:active的顺序，否则在某些浏览器中会失效。
提示：在CSS定义中，a:hover必须被置于a:link和a:visited之后，才是有效的。
提示：在CSS定义中，a:active必须被置于a:hover之后，才是有效的。
7．设置颜色时统一使用十六进制的颜色单位，使用color:#FF0000替代color:red。
8．全部使用小写，所有属性值都应该用引号括起来，属性值有单位的全部要加上单位。
9．格式化标签的默认样式，如：body，h1-h6，p，ul，li等(因为每个浏览器对html标签样式解析是不一致的，需要将所有浏览器统一)
10．body元素要设置background-color属性，比如当body背景色使用白色时，虽然默认是白色，但还是应该显式的声明background-color: “#ffffff”;这样可以避免用户将默认值修改后引起兼容性问题。
11．CSS Hack是当某个浏览器或版本中的实际表现与需要的样式不一致时的补救方法，出现这种问题的原因可能是浏览器对某个样式不支持，也有可能是自身的css代码不标准，CSS Hack只是一种补救方法，出现问题时，应该先检查自己的代码是符合标准。再考虑使用Hack，能不用时尽量不用。
以上大部分是根据自己实际工作中遇到的总结而来的，部分来自网络，还有很多没有考虑到，欢迎大家补充，拍砖。。
