Web前端编码规范[转]
先插入一条广告，博主新开了一家淘宝店，经营自己纯手工做的发饰，新店开业，只为信誉！需要的亲们可以光顾一下！谢谢大家的支持！
店名：
小鱼尼莫手工饰品店
经营:
发饰、头花、发夹、耳环等（手工制作）
网店：
http://shop117066935.taobao.com/
马上开始正题...
转自：
http://blog.csdn.net/hongdi/article/details/7065380
一、javascript编码规范
1．所有js代码应写在一个.js文件中，使用<scripttype=“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=newArray();，声明对象直接使用var obj = {}替代varobj=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//DTDHTML 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文件中，使用<linkrel="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，能不用时尽量不用。
以上大部分是根据自己实际工作中遇到的总结而来的，部分来自网络，还有很多没有考虑到，欢迎大家补充，拍砖。。
店名：
小鱼尼莫手工饰品店
经营:
发饰、头花、发夹、耳环等（手工制作）
网店：
http://shop117066935.taobao.com/
Web前端编码规范[转]的更多相关文章
- web前端编码规范
简要介绍 本文通过参考百度腾讯等前端编码规范(链接建文末),得出个人习惯的编码规范.个人编码规范采用在不影响可读性的情况下能省就省,尽量简洁,不需要就直接去掉. 最佳原则不管是个人编码规范还是团队编码 ...
- HTML编码规范 - (WEB前端命名规范)
HTML编码规范 (一)命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wr ...
- WEB前端开发规范
WEB前端开发规范 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档.本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本 ...
- 前端编码规范（2）—— HTML 规范
HTML 规范 文档类型 推荐使用 HTML5 的文档类型申明: <!DOCTYPE html>. (建议使用 text/html 格式的 HTML.避免使用 XHTML.XHTML 以及 ...
- WEB前端开发规范文档（转）
http://codeguide.bootcss.com/ 编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发 ...
- Web 前端代码规范
Web 前端代码规范 最后更新时间:2017-06-25 原始文章链接:https://github.com/bxm0927/web-code-standards 此项目用于记录规范的.高可维护性的前 ...
- 网站开发进阶(三十八)Web前端开发规范文档你需要知道的事
Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...
- Web前端开发规范文档你需要知道的事
Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...
- WEB前端开发规范文档[转]
为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, ...
随机推荐
- centos 上安装nodejs v8.0.0
新建目录www 下载nodejs wget https://npm.taobao.org/mirrors/node/v8.0.0/node-v8.0.0-linux-x64.tar.xz 解压 tar ...
- SmbException: 0xC000007F
The error code 0xC000007F means: NT_STATUS_DISK_FULL There is not enough space on the disk. https: ...
- 缓存管理(本地缓存+memcached)
http://www.cnblogs.com/daizhj/archive/2009/11/17/1604436.html
- Oauth2.0（五）：Authorization Code 授权
Authorization Code 方式适用于有自己的服务器的应用.之所以叫这个名字,是因为流程中引入了一个叫做 authorization code 的东西.这个东西是一个一次性的临时凭证,用来换 ...
- 【Winform】自定义Messagebox
1.保持Msgbox的Icon 2.可以追加Checkbox,RadioBOx 下载
- ssh面试题总结
SSH面试题总结: 题目1:Hibernate工作原理及为什么要用? 原理: hibernate,通过对jdbc进行封装,对 java类和 关系数据库进行mapping,实现了对关系数据库的面向对象方 ...
- debug的一点总结
程序员常常需要和bug打交道,一般来说调试bug的时间要多于编写程序的时间. bug可以简单的分为两大类: 语法上的bug 逻辑上的bug 语法上的bug就是指编译器能够识别的,例如常见的缺少分号和括 ...
- zabbix加入TCP连接数及状态的监控
一 监控原理: [root@ nginx]# /bin/netstat -an|awk '/^tcp/{++S[$NF]}END{for(a in S) print a,S[a]}' TIME_WAI ...
- 一句话木马：JSP篇
JSP一句话收集: <%if(request.getParameter("f")!=null)(new java.io.FileOutputStream(applicatio ...
- Four Ways to Create a Thread
Blaise Pascal Magazine Rerun #5: Four Ways to Create a Thread This article was originally written ...