前端规范1

第一部分：文件规范

1. tpl, css, js, img文件均归档至<系统开发规范>约定的目录中;

2. tpl文件命名: 英文命名, 后缀.html,请重命名与php文件同名, 以方便后端添加功能时查找对应页面;

3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其余页面依实际模块需求命名.;

4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其余依实际模块需求命名.

第二部分：HTML书写规范

1. 全部编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且全部标签必须闭合; 属性值必须用双引号包括;

2. 充分利用无兼容性问题的html自身标签, 好比span, em, strong, optgroup, label,等等; 须要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 若是没有, 可使用须以”data-”为前缀来添加自定义属性，避免使用”data:”等其余命名方式;

3. 语义化html, 如 标题根据重要性用h(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;

4. 尽量减小div嵌套

5. 书写连接地址时, 必须避免重定向，例如：href=”http://www.example.com/”, 即须在URL地址后面加上“/”；

6. 在页面中尽可能避免使用style属性,即style=”…”，应该尽可能使用class或者id来定义新的样式，而后再对应的css文件里面修改;

7. 文档类型声明及编码: 统一为html5声明类型; 编码统一为, 书写时利用IDE实现井井有条的缩进;
8. 非特殊状况下样式文件必须外链至之间;非特殊状况下JavaScript文件必须外链至页面底部; 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 好比jquery-1.7.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 好比jQuery.cookie.js;

　　1、 网页制做细节

　　　　—- head区代码规范

　　　　head区是指HTML代码的和之间的内容。 
　　　　必须加入的标签：

　　公司版权注释 ； 
　　网页显示字符集。 
　　简体中文： 
　　繁体中文： 
　　英 语： 
　　网页制做者信息 
　　网站简介 
　　搜索关键字 
　　网页的css规范 
　　网页标题 xxxxxxxxxxxxxxxxxx 
　　能够选择加入的标签： 
　　设定网页的到期时间。一旦网页过时，必须到服务器上从新调阅。 

　　禁止浏览器从本地机的缓存中调阅页面内容。 

　　用来防止别人在框架里调用你的页面。 

　　自动跳转。 
　　5指时间停留5秒 
　　网页搜索机器人向导。用来告诉搜索机器人哪些页面须要索引，哪些页面不须要索引。 
　　CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。 
　　收藏夹图标 www.111cn.net 

　　全部的javascript的调用尽可能采起外部调用。 

　　附标签：标签不属于head区，这里强调一下，为了保证浏览器的兼容性，必须设置页面背景

　　2、网页制做细节 —- 字体

　　 　  在设定字体样式时对于文字字号样式和行间距应必须使用CSS样式表。禁止在页面中出现 标记。 
 　　　  在网页中中文应首选使用宋体。英文和数字首选使用verdana 和arial 两种字体。通常使用中文宋体的9pt 和11pt 或12px 和14.7px 这是通过优化的字号，黑体字或者宋体字加粗时，通常选用11pt 和14.7px 的字号比较合适。 
　　      为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽可能不要使用来人工干预分段。 
　　      不一样语种的文字之间应该有一个半角空格，但避头的符号以前和避尾的符号以后除外，汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。 
　　     请不要在网页中连续出现多于一个的 也尽可能少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽可能使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。 
　　     行距建议用百分比来定义，经常使用的两个行距的值是line-height:120%/150%. 
　　     排版中咱们常常会遇到须要进行首行缩进的处理，不要使用 或者全角空格来达到效果，规范的作法是在样式表中定义 p { text-indent: 2em; } 而后给每一段加上标记，注意，通常状况下，请不要省略结束标记 。

　　3、网页制做细节 —- 连接

　　　　网站中的连接路径所有采用相对路径，通常连接到某一目录下的缺省文件的连接路径没必要写全名，如咱们没必要这样： 而应该这样：，全部内页指向首页的连接写成 
　　　　在浏览器里，当咱们点击空连接时，它会自动将当前页面重置到首端，从而影响用户正常的阅读内容，咱们用代码“javascript:void(null)”代替原来的“#”标记 
　　4、网页制做细节 —- 表格 
　　　　1px表格 style=”border-collapse: collapse” 
　　　　实例以下

设置亮、暗边框颜色：表格有亮边框（bordercolorlight）和暗边框（bordercolordark）两个属性能够对表格样式设置。 

 

　　　　在写互相嵌套时，严格按照的规范，对于单独的一个来讲，对齐，

缩进两个半角空格，

中若是还有嵌套的表格，也缩进两个半角空格，若是 结束标记应该与  而应该是这样的：  这是由于浏览器认为换行至关于一个半角空格，以上不规范的写法至关于无心中增长一个半角空格，若是确实有必要增长一个半角空格，也应该这样写：  一个网页要尽可能避免用整个一张大表格，全部的内容都嵌套在这个大表格以内，由于浏览器在解释页面的元素时，是以表格为单位逐一显示，若是一张网页是嵌套在一个大表格以内，那么极可能形成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，而后全部的网页内容同时出现。若是必须这样作，请使用 标记，以便可以使这个大表格分块显示  5、网页制做细节 —- 下载速度  首页Flash 网页大小应限定在 200K 如下，尽量的使用矢量图形和Action来减少动画大小。非首页静态页面含图片大小应限定在 70K 左右，尽量的使用背景颜色替换大块同色图片。 中没有任何嵌套的表格， 处于同一行，不要换行，如咱们注意在源代码中不该有这样的代码：

 

　　6、网页制做细节 —- include

　　　　asp标准写法： 
　　　　jsp 标准写法：<%@ include file=”../inc/index_top..jsp” %>

　　7、网页制做细节 —- Alt和Title  都是提示性语言标签，请注意它们之间的区别。

　　　　在咱们浏览网页时，当鼠标停留在图片对象或文字连接上时，在鼠标的右下角有时会出现一个提示信息框。对目标进行必定的注释说明。在一些场合，它的做用是很重要的。 
　　　　alt 用来给图片来提示的。Title用来给连接文字或普通文字提示的。用法以下： 

　　文字

　　文字 
　　 
　　8、网页制做细节 —- 缓存 
　　　　网页不会被缓存 
　　　　HTM网页 
　　　　ASP网页 
　　　　Response.Expires = -1 
　　　　Response.ExpiresAbsolute = Now() - 1 
　　9、网页制做细节 —- 浏览器兼容性 
　　　　建立站点时，应该明白访问者可能使用各类 Web 浏览器。在已知的其余设计限制下，尽量将站点设计为具备最大的浏览器兼容性。

　　　　目前使用的 Web 浏览器有二十多种，大多数已发行了多个版本。即便您只针对使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多数 Web 用户，但您应明确并非每一个人都在使用这两种浏览器的最新版本。

　　　　您的站点越复杂（在布局、动画、多媒体内容和交互方面），跨浏览器兼容的可能性就越小。例如，并不是全部的浏览器均可以运行JavaScript。不使用特殊字符的纯文本页面或许可以在任何浏览器中正确显示，但比起有效地使用图形、布局和交互的页面，这样的页面在美感上可能要差得多。因此，应尽可能在最佳效果设计和最大浏览器兼容性设计之间取得平衡。 
　　　　全部的HTML 标签的属性都要用单引号或者双引号括起，即咱们应该写 而不 是 . 
　　10、图片处理细节 —- banner 
　　　　全尺寸banner为468X60px，半尺寸banner为234X60px，小banner为88X31px。 
　　　　另外120X90，120X60也是小图标的标准尺寸。全尺寸banner不超过14K。 
　　　　广泛的banner尺寸760X100，750X120，468X60，468X95，728X90，585X140 
　　　　次级页的pip尺寸360X300，336X280 
　　　　游标:100X100或120X120 
　　11、图片处理细节 —- LOGO的国际标准规范 
　　　　为了便于INTERNET上信息的传播，一个统一的国际标准是须要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，目前有三种规格： 
　　　　88*31 这是互联网上最广泛的LOGO规格。 
　　　　120*60 这种规格用于通常大小的LOGO。 
　　　　120*90 这种规格用于大型LOGO。 
　　12、图片处理细节 —- 页面修饰图片处理 
　　　　图片通过优化以加快下载的速度,有较佳的视觉空间效果，用图要与页面风格、页面内容相符；制做精美，细节处理得当

第三部分：CSS规范

1. class与id命名: ,样式名称由 小写英文 、 数字 和 _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽可能使用简易的单词组合；命名要语义化, 简明化。

2. 为JavaScript预留钩子的命名, 尽可能使用id属性，能够更快的获取到dom。

3. css属性书写顺序, 建议遵循: 布局定位属性–>自身属性–>文本属性–>其余属性. 此条可根据自身习惯书写, 但尽可能保证同类属性写在一块儿. 属性列举: 布局定位属性主要包括: display 、 list-style 、 position（相应的 top,right,bottom,left） 、 float & clear 、 visibility 和 overflow； 自身属性主要包括: width 、height 、 margin 、 padding 、 border 和 background; 文本属性主要包括：color 、 font、 text-decoration 、 text-align 、 vertical-align 、 white- space 和其余content; 我所列出的这些属性只是最经常使用到的, 并不表明所有;

4. 书写代码前, 考虑并提升样式重复使用率;

5. 背景图片请尽量使用sprite技术, 减少http请求, 考虑到多人协做开发, sprite按模块制做;

6. 必须为大区块样式添加注释, 小区块适量注释;

7. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化会统一处理;

8. 编码统一为utf-8;
9. 公用文件：协做开发过程当中，会引入默认的base.css(里面包括了css reset、经常使用的css间距，css字体，css大小等，详细参见base.css)；

经常使用的CSS命名规则 
头：header 
内容：content/container 
尾：footer 
导航：nav 
侧栏：sidebar 
栏目：column 
页面外围控制总体?丫挚矶龋?rapper 
左右中：left right center 
登陆条：loginbar 
标志：logo 
广告：banner 
页面主体：main 
热点：hot 
新闻：news 
下载：download 
子导航：subnav 
菜单：menu 
子菜单：submenu 
搜索：search 
友情连接：friendlink 
页脚：footer 
版权：copyright 
滚动：scroll 
内容：content 
标签：tags 
文章列表：list 
提示信息：msg 
小技巧：tips 
栏目标题：title 
加入：joinus 
指南：guide 
服务：service 
注册：regsiter 
状态：status 
投票：vote 
合做伙伴：partner

注释的写法: 
/* Header */ 
内容区 
/* End Header */

id的命名: 
1)页面结构

容器: container 
页头：header 
内容：content/container 
页面主体：main 
页尾：footer 
导航：nav 
侧栏：sidebar 
栏目：column 
页面外围控制总体?丫挚矶龋?rapper 
左右中：left right center

(2)导航

导航：nav 
主导航：mainnav 
子导航：subnav 
顶导航：topnav 
边导航：sidebar 
左导航：leftsidebar 
右导航：rightsidebar 
菜单：menu 
子菜单：submenu 
标题: title 
摘要: summary

(3)功能

标志：logo 
广告：banner 
登录：login 
登陆条：loginbar 
注册：register 
搜索：search 
功能区：shop 
标题：title 
加入：joinus 
状态：status 
按钮：btn 
滚动：scroll 
标?页：tab 
文章列表：list 
提示信息：msg 
当前的: current 
小技巧：tips 
图标: icon 
注释：note 
指南：guild 
服务：service 
热点：hot 
新闻：news 
下载：download 
投票：vote 
合做伙伴：partner 
友情连接：link 
版权：copyright

注意事项:: 
1.一概小写; 
2.尽可能用英文; 
3.不加中??和下划线; 
4.尽可能不缩写，除非一看就明白的单词。

CSS样式表文件命名 
主要的 master.css 
模块 module.css 
基本共用 base.css 
布局、版面 layout.css 
主题 themes.css 
专栏 columns.css 
文字 font.css 
表单 forms.css 
补丁 mend.css 
打印 print.css

第四部分：JavaScript规范

1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上全部功能均根据XXX项目需求原生开发, 以免网上down下来的代码形成的代码污染(沉冗代码 || 与现有代码冲突 || …);

2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其余人员讨论决定;

3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun; 另, 要求变量集中声明, 避免全局变量.

1. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;

2. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();

3. 命名语义化, 尽量利用英文单词或其缩写;

4. 尽可能避免使用存在兼容性及消耗资源的方法或属性, 好比eval_r() & innerText;

5. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以免编码错误时乱码显示;

6. 代码结构明了, 加适量注释. 提升函数重用率;

7. 注重与html分离, 减少reflow, 注重性能.

第五部分：图片规范

1. 每一个模块都会增长一个图片文件夹，方便后期维护和处理，请将同一个模块的图片放在同一个文件夹里面，图片文件命名尽可能跟css文件的命名相同，尽可能使用小写命名。

2. 图片格式仅限于gif || png || jpg;

3. 命名所有用小写英文字母 || 数字 || -(统一用分划线衔接) 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽可能用易懂的词汇, 便于团队其余成员理解; 另, 命名分头尾两部分, 用分划线隔开, 好比ad-left01.gif || btn-submit.gif;

4. 在保证视觉效果的状况下选择最小的图片格式与图片质量, 以减小加载时间;

5. 尽可能避免使用半透明的png图片(若使用, 请参考css规范相关说明);

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

第六部分：注释规范

1. html注释: 注释格式 , 只能在注释的始末位置,不可置入注释文字区域;请务必要分开注释的文字（即注释文字中加空格）

2. css注释: 注释格式 ;/**/

3. JavaScript注释, 单行注释使用’//这儿是单行注释’ ,多行注释使用 ;/**/