一、Html规范

1 、 基本准则

符合web2.0标准,语义化html,结构、表现、行为三层分离,兼容性优良, 代码简洁明了有序,尽可能的减少服务器负载,快速的解析速度。

2、 正确使用块级元素和内联元素嵌套

h1、h2、h3、h4、h5、h6、P、dt标签不能包含div等块级元素,只能包含内联元素。li可以嵌套div,ul,ol等块级元素,内联元素中不可嵌套块级元素。

3、<ul><li> 无序列表:在文章列表、导航条,下拉列表、tab使用。

4、<ol><li> 有序列表:文章列表等根据需要使用。

5、<dl><dt> 表示术语或定义,用来定义列表是很不错的选择,懂得结合使用

<dl>

<dt>标题</dt>

<dd>内容1</dd>

<dd>内容2</dd>

</dl>

6、 加粗时,可以使用<strong>标签,粗体, 表示关键词强调的语义化,有助于SEO。

7、 不宜过多使用加粗标签<b>, 不建议使用<br/>,用margin进行控制。

8、 p标签定义段落,用来区分段落,有语义化的,文章正文使用p标签是理所当然的,

推荐在文章或者文本段落以外的地方尽量少用P标签,不宜用来大范围的布局。

9、 语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1)。

10、 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线

数字组成, 且所有标签必须闭合, 包括br (<br />), hr(<hr />)等; 属性值必须用双

引号包括;

11、 尽可能减少div多层嵌套。

12、 特殊符号使用: 尽可能使用代码替代: 比如 >(&gt;) 、 空格( &nbsp;) 等;

13、 html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去

置,如果没有,可以使用须以“data-”为前缀来添加自定义属性,避免

用”data:”等其他命名方式。

14、 书写链接时,为了避免重定向,例如:href=“http://www.333xin.com/”,即需在URL 地址后 面加上“/”;

15、 在html页面中尽量避免直接使用style属性给标签加样式,做到内容与表现分离。

16、 尽量避免使用table标签,能不用就尽量不使用,在特定需要场景可以使用,如果使用table标签时,请不要用width、height、cellspacing、cellpadding等table属性直接在table上定义表现,应尽可能的利用table自身私有属性分离结构与表现,如:thead、tr、th、td、tbody、foot;

而cellspaing及cellpadding的css控制方法如下:

table{border:0; margin:0; border-collapse:collapse;}

table th, table td{padding:0;}

17、 不要使用<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />和<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ >来达到 兼容ie8的目的。

18、 多余代码, 比如页面注释掉不需要的代码,应该坚决删除掉。

19、在img明确宽度和高度时,指定页面图片的尺寸(不要通过指定尺寸来缩放图片),对页面渲染速度有益。

20、充分利用无兼容性问题的html自身标签,比如span、strong、label等。

二、css规范

1、 能以背景形式呈现的图片, 尽量写入css样式中;

3、 背景图片请尽可能使用sprite技术,减小http请求,考虑到多人协作开发,sprite按模块制作。

4、 链接的样式请严格按照:a:link -> a:visited -> a:hover -> a:active(LVHA)的顺序写。

a:link 链接平常的状态

a:visited 链接被访问过之后

a:hover 鼠标放到链接上的时候

a:active 链接被按下的时候

5、 合并 margin、padding、border 的设置,尽量使用缩写法,比如margin:0 10px 0 10px;

6、 选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是

一定要避免覆盖全局样式设置。

7、 如果没有边框时,不要写成 border:0,应该写成 border:none;

8、 在保持代码解耦的前提下,尽量合并重复的样式,例如:

a { display:block }

span{ display:block }

合并:a,span { display:block }

9、 background、font 等可以缩写的属性,尽量使用缩写形式

background: color image repeat attachment position;

font: style weight size/lineHeight family;

10、不要直接为 html 标签添加 css 样式,比如

div {

width: 100px;

12、尽量少用 hack,能不hack 就尽量不用 hack,为了兼容必须需要时就使用。

13、尽量少用!important。

14、为了 SEO 和页面可用性,请使用 text-indent 来隐藏文本内容。

15、不要在 html 中加入标签来清理浮劢,通过在浮动元素的父元素上添加.clearfix 来

清除浮动

.clearfix:dfter{content:”.”; display:block;height:0;visibility:hidden;clear:both;}

.clearfix{zoom:1}

16、字体名称最好映射成对应的英文名,例如:黑体(SimHei) 宋体(SimSun) 微软雅黑(Microsoft Yahei);

17、css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写,但尽量保证同类属性写在一起。属性列举:

布局定位属性主要包括: float、clear、position、top、right、bottom、left、display、visibility、overflow等;

自身属性主要包括:width、height、margin、padding、background、border;

文本属性主要包括:font、color、text-align、vertical-align、text-decoration、text-indent、white-space等;

其他属性包括:list-style、cursor、 z-index、zoom等。

18、不需要重复定义可继承的值,CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义,除非是为了更变当前元素样式不使用父元素的属性值,但是要注意,浏览器可能用一些默认值覆盖你的定义。

19、尽量避免使用css表达式,css表达式仅在ie浏览器下才起作用,微软已在ie8后不推荐使用,在特定场景确实需要时使用,推荐少用。

20、 用png图片做图片时,要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果,请为ie6单独定义背景:

_background:none;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);

2、css命名规则书写规范

1、CSS 样式文件中的所有的代码都应该小写, 如果是 16 进制(#AABBCC)表示颜色,则颜色取值应该大写。如果可以,颜色尽量用三位字符表示,比如:#333333; 可以这样写#333;

2、css规则命名中,推荐采用小写字母加中划线的方式和驼峰式写法,不允许使用大写字母。

3、命名尽可能地使用有语义的更简明的英文单词进行组合,能不用中文就尽量不使用中文。

4、命名注意缩写,不宜过长,但是也不能盲目缩写。

5、避免 class 跟 id 重名。

6、id 用于标识模块或页面的某一个父容器区域,名称必须唯一。

7、尽可能提高css代码模块的复用性和通用性。

8、规则名称中,颜色(red)和left\right,不要直接用来命名,

.red{color:red} , .left {width:500px;} (不推荐)

可以使用 .error-news{color:red}, .ff3300{color:#ff3300} ,

.content-left{ width:500px;}(正确推荐)

9、文件命名

common.css 通用的

base.css 基本共用的

layout.css 布局,版面

themes.css 主题

columns.css 专栏

font.css 文字

forms.css 表单

module.css 模块

三、javascript规范

1、 js每行代码结束时必须有分号;

2、 引用js库文件,文件须包含库名称及版本号,以及是否为压缩版,比如jquery.1.81.min.js;引用插件,文件名为库名+插件名称,比如jquery.cookie.js。

3、变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如myName;

4、 避免全局变量.

5、函数命名: 首字母小写驼峰式命名. 如myName ();

6、命名语义化, 尽可能利用英文单词或其缩写;

7、页面引用js文件和js代码放在html代码的最底部。

四、图片使用类规范

1、 图片格式仅限于gif || png || jpg;

2、 如果背景图片有动画,则保存成 gif, 如果没有动画,也没有半透明效果,则保存成 png-8。

3、 如果有半透明效果,则保存成 png-24,但尽量避免使用半透明的png图片。

4、 重要图片必须加上alt属性,给重要的元素和截断的元素加上title。

5、命名全部用小写英文字母 || 数字 || _ 的组合,尽量用易懂的词汇,便于团队其他成员理解,命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif。

6、在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间。

7、运用css sprite技术集中小的背景图或图标, 减小页面http请求。

五、注释规范

1、 html注释: 注释格式 <!–这儿是注释–>, ’–’只能在注释的始末位置,不可置入注释文字区域;

2、 css注释:

单行注释: /*中文说明*/;

有修改者模块注释/* module: module by ysw 2013-05-30 */

3、 JavaScript注释,

1.1、单行注释使用 //这儿是单行注释。

1.2、多行注释使用 /* 这儿有多行注释 */。