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前端开发规范文档[转]
为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, ...
随机推荐
- 基于.NET平台常用的框架
分布式缓存框架: Microsoft Velocity:微软自家分布式缓存服务框架. Memcahed:一套分布式的高速缓存系统,目前被许多网站使用以提升网站的访问速度. Redis:是一个高性能的K ...
- mysql中,创建表的时候指定if not exists参数的作用?
需求说明: 在创建表的时候,如果指定if not exists语句,有什么作用,在此做个实验,并且官方手册, 理解下这个参数的作用. 操作过程: 1.创建测试表test01 mysql> cre ...
- Dubbo -- 系统学习 笔记 -- 示例 -- 启动时检查
示例 想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式 启动时检查 Dubbo缺省会在启动时检查依赖的服务是否可用,不可用时会抛出异常,阻止Spring初始化完成,以便上线时,能及早发 ...
- SpringMVC -- 梗概--源码--壹--跳转
1.配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version=&qu ...
- NetBpm 配置篇（2）
转载注明出处:http://www.cnblogs.com/anbylau2130/p/3877353.html 上一篇中介绍了Netbpm在IIS和CassiniWebServer服务器的安装 通过 ...
- 线程同步 – lock和Monitor
在多线程代码中,多个线程可能会访问一些公共的资源(变量.方法逻辑等等),这些公共资源称为临界区(共享区):临界区的资源是不安全,所以需要通过线程同步对多个访问临界区的线程进行控制. 同样,有些时候我们 ...
- Unique ID Generate Notes
Unique ID generation in distributed systems http://www.slideshare.net/davegardnerisme/unique-id-gene ...
- 【Python】paddlepaddle docker python2.7 centos运行
PS E:\AI\BlockMining> docker cp .\LearnPaddle-master\ 30acd98dbc60:\rootPS E:\AI\BlockMining> ...
- selenium之 chromedriver与chrome版本映射表(更新至v2.31)
转自:http://blog.csdn.net/huilan_same/article/details/51896672 chromedriver版本 支持的Chrome版本 v2.31 v58-60 ...
- javascript使用jQuery加载CSV文件+ajax关闭异步
<script src="jquery-3.3.1.min.js"></script>定义一个csv函数// 关闭异步,否则cesium初始化的时候,csv ...