WEB前端开发规范_第1页
WEB前端开发规范_第2页
WEB前端开发规范_第3页
WEB前端开发规范_第4页
WEB前端开发规范_第5页
已阅读5页，还剩1页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

WEB前端开发规范目录规范目的基本准则文件规范文件规范html书写规范css书写规范JavaScript书写规范图片规范注释规范开发及测试工具约定其他规范CSSHack

规范目的

为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,同是为网站有一个更好的前端架构，网站的发展及未来打好一个基础。本文档如有不对或者不合适的地方请提出来,

基本准则

符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度.文件规范

3.1、html,css,js,images文件均归档至<系统开发规范>约定的目录中;3.2、html文件命名:命名以中文命名，依实际模块命名，如果同一模块以_&title&_来组合命名,

以方便添加功能时查找对应页面，团结里的相互理解。例如：我的好股网里的TAB命名大模块名称_小模块的titile.html我的好股网_关注的微博.html3.3、

css文件命名:

英文命名,

后缀.css.

初始化样式reset.css，其他样式依实际模块页面需求命名，共用样式一般以模块考虑来划分命名,如有改版修改的css文件可以采用&_时间日期例如：微博改版版块名称_时间日期.cssnew_blog_1212.css4.4、Js文件命名:

英文命名,

后缀.js.

共用common.js,

其他依实际模块需求命名.5.5、图片命名:html书写规范4.1、文档类型声明及编码:统一用<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">;编码统一为<metacharset=”utf-8″/>。目的:统一性和网站提高开发合作效率。4.2、非特殊情况下样式文件必须外链至<head>…</head>之间;非特殊情况下JavaScript文件必须外链至页面底部</body>之前;目的:网站的优化。4.3、所有编码均遵循xhtml标准,标签&属性&属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合,包括br(<br/>),hr(<hr/>)等;属性值必须用双引号包括;目的:更加符合web标准(w3c),也有利于seo。4.4、充分利用无兼容性问题的html自身标签,比如span,em,strong,optgroup,label,等等目的：减少代码量4.5、语义化html,如标题根据重要性用h*(同一页面只能有一个h1),段落标记用p,列表用ul,内联元素中不可嵌套块级元素;目的：减少代码量，也有利于seo4.5、尽可能减少div嵌套,如<divclass=”box”><divclass=”welcome”>欢迎访问XXX,您的用户名是<divclass=”name”>用户名</div></div></div>完全可以用以下代码替代:<divclass=”box”><p>欢迎访问XXX,您的用户名是<span>用户名</span></p></div>;目的：减少代码量，也有利于seo4.6、引入JS库文件,文件名须包含库名称及版本号及是否为压缩版,比如jquery-1.4.1.min.js;引入插件,文件名格式为库名称+插件名称,比如jQuery.cookie.js;4.7、书写链接地址时,必须避免重定向，例如：href=”/”,即须在URL地址后面加上“/”；4.8、在页面中尽量避免使用style属性,即style=”…”除非考虑网站http请求，网站响应速度等因素比重情况具体分析;4.9、严格区分作为内容的图片和作为背景的图片。作为背景的图片采用Csssprite技术，放在一张大图里。Csssprite技术的优点是减少了http请求数，但使图片面向css的backround-position增加了耦合度，也增加了维护成本。如果图片有修改，不要删除已添加的图片，在空白处新增修改后的图片，减少修改风险。

下图为腾讯的Csssprite背景图。

4.10、图片必须加上alt属性;给重要的元素和截断的元素加上title;目的:有利于seo，搜索引擎的爬虫。4.11、给区块代码及重要功能(比如循环)加上注释,方便后台程序员嵌套模版;4.12、特殊符号使用:尽可能使用代码替代:比如<(<)&>(>)&空格()&»(»)等等;4.13、书写页面过程中,请考虑向后扩展性;

css书写规范

编码统一为utf-8;都用小写class与id的使用:一般都使用class，特殊除外，因id的优先级比class的高样式命名推荐使用英文避免使用汉语拼音,尽量使用简易的单词组合;命名方式参照《WEB前端开发CSS命名参考》。命名方式采用驼峰命名法和划线命名法两种，提高可读性。例如：dropMenu、subNavMenu、drop-menu、sub_nav_menu。驼峰命名法用来区别不同的单词。划线命名法表明从属关系。如：“.timeList”和“.time_list”分别表示时间列表和时间部分下的列表。 定位属性（比如：display,position,float,clear,visibility,table-layout等）自身属性（比如：width,height,margin,padding,border等）文本属性（比如：font,line-height,text-align,text-indent,vertical-align等）其他属性（比如：color,background,opacity,cursor,content,list-style,quotes等）css属性书写顺序,建议遵循布局定位属性–>自身属性–>文本属性–>其他属性.此条可根据自身习惯书写,但尽量保证同类属性写在一起.

定位属性（比如：display,position,float,clear,visibility,table-layout等）自身属性（比如：width,height,margin,padding,border等）文本属性（比如：font,line-height,text-align,text-indent,vertical-align等）其他属性（比如：color,background,opacity,cursor,content,list-style,quotes等）继承属性示例：<ulclass=”list”><li>这儿是标题列表<span>2010-09-15</span></ul>

样式表：ul.listli{position:relative}ul.listlispan{position:absolute;right:0}

继承属性示例：<ulclass=”list”><li>这儿是标题列表<span>2010-09-15</span></ul>

样式表：ul.listli{position:relative}ul.listlispan{position:absolute;right:0}

即可实现日期居右显示样式表中中文字体名,请务必转码成unicode码,以避免编码错误时乱码;使用table标签时,请不要用width/height/cellspacing/cellpadding等table属性直接定义表现,应尽可能的利用table自身私有属性分离结构与表现,如thead,tr,th,td,tbody,tfoot,colgroup,scope;(cellspaing及cellpadding的css控制方法:table{border:0;margin:0;border-collapse:collapse;}tableth,tabletd{padding:0;},base.css文件中我会初始化表格样式)尽量不使用<metahttp-equiv=”X-UA-Compatible”content=”IE=7″/>兼容ie8,和代码*html写法。用png图片做图片时,要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果,请参考文档《IE6下png透明问题解决的最佳方案》兼容性属性的使用,比如text-shadow（文字阴影）、css3的相关属性在保证目前主流浏览器使用正常的情况下可以使用来对页面进行锦上添花式的设计。减少使用影响性能的属性,比如position:absolute||float;必须为大区块样式添加注释,小区块适量注释;代码缩进与格式:单行书写,统一使用tab进行缩进。;目的：css书写规范主要提高效率方便面想关人员的修改，提高网站的扩展性(根据网站情况不一样，要灵活应用)JavaScript书写规范文件编码统一为utf-8,书写过程过,每行代码结束必须有分号;要检查网上down下来的代码造成的代码污染(沉冗冲突，代码注入…)等，有的可以firefox的一些扩展插件分析;库引入:原则上仅引入jQuery库,若需引入第三方库,须与团队其他人员讨论决定;命名语义化,尽可能利用英文单词或其缩写;代码结构明了,加适量注释.提高函数重用率;注重与html分离,减小reflow,注重性能.目的：避免带来的问题及冲突，网站的优化。图片规范

所有页面元素类图片均放入img文件夹,图片格式仅限于gif||png||jpg;命名全部用小写英文字母||数字||_的组合，其中不得包含汉字||空格||特殊字符；尽量用易懂的词汇,便于团队其他成员理解;另,命名分头尾两部分,用下划线隔开,比如ad_left01.gif||btn_submit.gif;在保证视觉效果的情况下选择最小的图片格式与图片质量,以减少加载时间;尽量避免使用半透明的png图片(若使用,请参考css规范相关说明);运用csssprite技术集中小的背景图或图标,减小页面http请求,但注意,请务必在对应的spritepsd源图中划参考线,并保存至img目录下.

注释规范

html注释:注释格式<!--这儿是注释-->,“-”只能在注释的始末位置,不可置入注释文字区域;css注释:注释格式/*这儿是注释*/;JavaScript注释,单行注释使用“//这儿是单行注释”,多行注释使用/*这儿有多行注释*/;

开发及测试工具约定

编码必须格式化,比如缩进;测试工具:前期开发仅测试FireFox&IE6&IE7&IE8,后期优化时加入Opera&Chrome;建议测试顺序:FireFox–>IE7–>IE8–>IE6–>Opera–>Chrome,建议安装firebug及IETabPlus插件.安装调试利器IETester

其他规范

开发过程中严格按分工完成页面,以提高css复用率,避免重复开发;减小沉冗代码,书写所有人都可以看的

人人文库> 全部分类> 应用文书 > 作业报告

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论