WEB前端开发规范.doc

《WEB前端开发规范.doc》由会员分享，可在线阅读，更多相关《WEB前端开发规范.doc（19页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、WEB前端开发规范WEB前端开发规范WEB前端开发规范目录1、规范目的2、基本准则3、文件规范4、文件规范5、html书写规范6、css书写规范7、JavaScript书写规范8、图片规范9、注释规范10、开发及测试工具约定11、其他规范12、CSSHack1规范目的为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,同是为网站有一个更好的前端架构，网站的发展及未来打好一个基础。本文档如有不对或者不合适的地方请提出来,基本准则符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度.文

2、件规范3.1、html,css,js,images文件均归档至约定的目录中;233.2、html文件命名:命名以中文命名，依实际模块命名，如果同一模块以_&title&_来组合命名,以方便添加功能时查找对应页面，团结里的相互理解。例如：我的好股网里的TAB命名大模块名称_小模块的titile.html我的好股网_关注的微博.html3.3、css文件命名:英文命名,后缀.css.初始化样式reset.css，其他样式依实际模块页面需求命名，共用样式一般以模块考虑来划分命名,如有改版修改的css文件可以采用&_时间日期例如：微博改版版块名称_时间日期.cssnew_blog_1212.css4.

3、4、Js文件命名:英文命名,后缀.js.共用common.js,其他依实际模块需求命名.5.5、图片命名:4html书写规范4.1、文档类型声明及编码:统一用;编码统一为。目的:统一性和网站提高开发合作效率。4.2、非特殊情况下样式文件必须外链至之间;非特殊情况下JavaScript文件必须外链至页面底部之前;目的:网站的优化。4.3、所有编码均遵循xhtml标准,标签&属性&属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合,包括br(),hr()等;属性值必须用双引号包括;目的:更加符合web标准(w3c),也有利于seo。4.4、充分利用无兼容性问题的html自身标签,比如spa

4、n,em,strong,optgroup,label,等等目的：减少代码量4.5、语义化html,如标题根据重要性用h*(同一页面只能有一个h1),段落标记用p,列表用ul,内联元素中不可嵌套块级元素;目的：减少代码量，也有利于seo4.5、尽可能减少div嵌套,如4.11、给区块代码及重要功能(比如循环)加上注释,方便后台程序员嵌套模版;4.12、特殊符号使用:尽可能使用代码替代:比如)&空格() 4.13、书写页面过程中,请考虑向后扩展性;5css书写规范5.1编码统一为utf-8;都用小写5.2class与id的使用:一般都使用class，特殊除外，因id的优先级比class的高5.3样

5、式命名推荐使用英文避免使用汉语拼音,尽量使用简易的单词组合;命名方式参照WEB前端开发CSS命名参考。命名方式采用驼峰命名法和划线命名法两种，提高可读性。例如：dropMenu、subNavMenu、drop-menu、sub_nav_menu。驼峰命名法用来区别不同的单词。划线命名法表明从属关系。如：“.timeList”和“.time_list”分别表示时间列表和时间部分下的列表。5.4css属性书写顺序,建议遵循布局定位属性自身属性文本属性其他属性.此条可根据自身习惯书写,但尽量保证同类属性写在一起.1.定位属性（比如：display,position,float,clear,visib

6、ility,table-layout等）2.自身属性（比如：width,height,margin,padding,border等）3.文本属性（比如：font,line-height,text-align,text-indent,vertical-align等）4.其他属性（比如：color,background,opacity,cursor,content,list-style,quotes等）5.5避免滥用自选择器。#testspan和#test.span尽量选择后者。采用继承属性还是新加class根据不同情况灵活运用。新加class便于扩展维护。继承属性示例：这儿是标题列表202*-0

7、9-15样式表：ul.listliposition:relativeul.listlispanposition:absolute;right:0即可实现日期居右显示5.6样式表中中文字体名,请务必转码成unicode码,以避免编码错误时乱码;5.7使用table标签时,请不要用width/height/cellspacing/cellpadding等table属性直接定义表现,应尽可能的利用table自身私有属性分离结构与表现,如thead,tr,th,td,tbody,tfoot,colgroup,scope;(cellspaing及cellpadding的css控制方法:tablebord

8、er:0;margin:0;border-collapse:collapse;tableth,tabletdpadding:0;,base.css文件中我会初始化表格样式)5.8尽量不使用兼容ie8,和代码*html写法。5.9用png图片做图片时,要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果,请参考文档IE6下png透明问题解决的最佳方案5.10兼容性属性的使用,比如text-shadow（文字阴影）、css3的相关属性在保证目前主流浏览器使用正常的情况下可以使用来对页面进行锦上添花式的设计。5.11减少使用影响性能的属性,比如position:absolut

9、e|float;5.12必须为大区块样式添加注释,小区块适量注释;5.13代码缩进与格式:单行书写,统一使用tab进行缩进。;目的：css书写规范主要提高效率方便面想关人员的修改，提高网站的扩展性(根据网站情况不一样，要灵活应用)6JavaScript书写规范6.1文件编码统一为utf-8,书写过程过,每行代码结束必须有分号;要检查网上down下来的代码造成的代码污染(沉冗冲突，代码注入)等，有的可以firefox的一些扩展插件分析;6.2库引入:原则上仅引入jQuery库,若需引入第三方库,须与团队其他人员讨论决定;6.3命名语义化,尽可能利用英文单词或其缩写;6.4代码结构明了,加适量注释

10、.提高函数重用率;6.5注重与html分离,减小reflow,注重性能.目的：避免带来的问题及冲突，网站的优化。7图片规范7.1所有页面元素类图片均放入img文件夹,7.2图片格式仅限于gif|png|jpg;7.3命名全部用小写英文字母|数字|_的组合，其中不得包含汉字|空格|特殊字符；尽量用易懂的词汇,便于团队其他成员理解;另,命名分头尾两部分,用下划线隔开,比如ad_left01.gif|btn_submit.gif;7.4在保证视觉效果的情况下选择最小的图片格式与图片质量,以减少加载时间;7.5尽量避免使用半透明的png图片(若使用,请参考css规范相关说明);7.6运用cssspri

11、te技术集中小的背景图或图标,减小页面http请求,但注意,请务必在对应的spritepsd源图中划参考线,并保存至img目录下.8注释规范8.1html注释:注释格式,“-”只能在注释的始末位置,不可置入注释文字区域;8.2css注释:注释格式/*这儿是注释*/;8.3JavaScript注释,单行注释使用“/这儿是单行注释”,多行注释使用/*这儿有多行注释*/;9开发及测试工具约定9.1编码必须格式化,比如缩进;9.2测试工具:前期开发仅测试FireFox&IE6&IE7&IE8,后期优化时加入Opera 9.3建议测试顺序:FireFoxIE7IE8IE6OperaChrome,建议安装

12、firebug及IETabPlus插件.安装调试利器IETester10其他规范10.1开发过程中严格按分工完成页面,以提高css复用率,避免重复开发;10.2减小沉冗代码,书写所有人都可以看的懂的代码.简洁易懂是一种美德.为用户着想,为服务器着想.11CSSHack即便是完美的CSS也未必能在目前众多的终端浏览器中呈现一致的效果，所以，CSSHack在很多情况下都是必要的，建议先以对CSS标准支持得比较好的浏览器（比如“Firefox”或者“Chrome”）为主编辑CSS，最后再处理IE的兼容性单独为IE建立一个CSS文件（比如for-ie.css,fuck-ie.css,ie-hack.c

13、ss等），最后在HTML文件中，通过IE的条件注释按需引用。扩展阅读：web前端开发规范前端开发规范WEBWEBFrontDevelopmentStandard一概况1.1WEB标准二实现WEB标准2.1WEB前端开发工具2.2网站架构的流程2.3XHTML的编写代码规范2.4CSS相关规范2.5Javascript的编写代码规范三目录结构和命名规范3.1网站的目录结构和文件命名3.2XHTML元素的命名参考四附件附件1命名及注释规范附件2网页设计psd效果图制作要求附件3EricMeyer和YUI的cssreset以及通用、常用公共样式附件4css兼容一概况1.1WEB标准WEB标准不是一个

14、标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（EuropeanComputerManufacturersAssociation）的ECMAScript标准。我们来简单了解一下这些标准：1.11结构标准语言（1）XMLXML是TheExtensibleMarkupLa

15、nguage(可扩展标识语言)的简写。目前推荐遵循的是W3C于202*年10月6日发布的XML1.0，参（-XML-202*1006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。（2）XHTMLXHTML是TheExtensibleHyperTextMarkupLanguage可扩展标识语言的缩写。目前推荐遵循的是W3C于202*年1月26日推荐XML1.0。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML

16、还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。1.12表现标准语言CSS是CascadingStyleSheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。1.13行为标准（1）DOMDOM是DocumentObjectModel文档对象模型的缩写，根据W3CDOM规范DOM是一种与

17、浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。(2)ECMAScriptECMAScript是ECMA(EuropeanComputerManufacturersAssociation)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript262。二、如何实现WEB标准2.1WEB前端开发工具2.11制作软件制作网页，我们可以用Dreamweaver和Fron

18、tpage等直接视图进行网页制作。而要实现Web标准，这些软件或者工具都必须升级到最新版。如AdobeDreamweaverCS、MicrosoftExpressionweb,ApatanaStudio.使用最新的软件，更有助编写出严格标准的页面。同时在此，我们很应该明确，可视化网页制作会产生很多冗余的代码，不利于SEO优化及今后的维护，抛弃视图制作页面，改为纯手写HTML和CSS。培养良好的书写代码习惯，对维护和修改会起到事半功倍的效果。ApatanaStudio(免费)AdobeDreamweaverCSMicrosoftExpressionWeb2.12测试及调试软件由于存在各种浏览器，

19、所以我们制作出来的页面必须兼容各种浏览器。首先我们必须兼容最常见的几款浏览器：IE6、IE7、IE8、Firefox。当你的页面都支持以上4种浏览器，Opera、Safari、Chrome、360、遨游等其他浏览器基本上已经都没问题了。这里推荐几款辅助工具。IETester-集成IE5.5-IE9- 任何（&），都必须编码为： 任何（），不是标签的一部分，都必须被编码为： 2.38图片标签必须要有ALT属性为了使浏览者在图片未显示的情况下依然可以了解要表现的意义，XHTML规定没一个图片标签都要有alt标签。如只起修饰作用没有任何意义的图片也要设置alt属性，属性值为空。2.39不能在注释中使

20、用两个以上的破折号“-”在注释中的内容中，不能出现两个或两个以上破折号“-”，只能出现在注释的开头和结束，在内容中它们不再有效。如：是错误的写法，其中的“-”可以用空格或等号“=”替代。正确的写法是，或。单位都按闭包形式出现content以上的所提的不规则写法虽然不会对网页的显示造成影响，但在进行W3C效验的时候却会出很多莫名其妙的问题。为了使代码更加规范，易于阅读和维护，为转向XML做准备，养成良好的书写规范还是很有必要的。2.4CSS相关规范2.41选择DOCTYPE同样CSS在不同声明中的页面所起的效果也许会不一致。XHTML1.0提供了三种DTD声明可供选择：过渡的(Transitio

21、nal):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性。完整代码如下：框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML1.0Transitional)是目前理想选择。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。2.42指定语言及字符集为文档指定语言：

22、为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，常用的语言定义：标准的XML文档语言定义：针对老版本的浏览器的语言定义：为提高字符集，建议采用“utf-8”，另外除了代码的编码使用utf-8，页面保存的格式也应用utf-8否则在某些编辑器下会出现乱码的情况。关于UTF-8字符处理在Web开发中的应用的可以参考IBM的文档：-lo-utf8/index.html2.43调用样式的方法比较大家知道页面要使用外部css文件的方式有两种：一种是引用(link)：；另一种是导入(import)：importurl(a.css);；两者引用的方式在页面上的展现

23、效果却是一样的，但是两者又有着很重大的区别：就是页面的性能问题！建议使用link方式调用样式。另外，请不要在html页面内书写css样式。除非页面是单一独立的。2.44编写样式的习惯我们要养成手写CSS的习惯，在调式的时候可更快更有效的实现效果。注意的是使用reset将默认的css重置，推荐使用（EricMeyer和YUI）的cssreset(详见附件1)适当写好相关注释/*forindex*/*forheader*/尽量使用类选择符(.class)、适当的使用ID选择符（#element）、包含选择符(#elementspan)、选择符分组(#element,.class,span)将常用的

24、布局方法和常用颜色等写成全局类选择符将部分页面可复用的部分分离出来CSShack：针对不同的浏览器写不同的CSScode的过程。CSShack的原理：由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。浏览器优先级别：FFml）。简拼容易出现重复、或者目录结构复杂的时候容易出现混乱，给后期维护带来很大的麻烦。csscss的目录命名可以为style、css、skin等，如果网站的目录结构不是很复杂的，尽量把css统一放在跟目录。这样可以方便后期的维护操作。如果网站的目录结构很复杂，层次超过3层以上的，可以在对应的层设

25、置目录页面结构的css。jsjs的目录命名一般用js或scripts，这样一看就知道里面是放js脚本。同样js的目录结构也是和css一样。imagesimages根据网站规模来调整放图片的目录，一般根目录设置的images是存放整站共用的图片（包括图片图标背景等），而各二级三级目录里面也可以设置相应的images目录存放当前级的图片。根据具体的目录规范，做到前后台协商一致！当页面在引用css或者js的时候，大型的门户站点一般会在引用加上版本号或者日期。如：这样的做法是为了维护的时候可以更清晰知道所引用的脚本或样式是什么时候什么版本的。3.12html命名html应遵循页面的内容或用途（SEO）

26、进行命名。不能使用中文词组的简拼进行命名。当使用英文或者中文词组全拼的时候，同样会给SEO带来好处。另外需注意的是，整个网站的html后缀要统一，避免同时出现html、htm两种不同的后缀。3.13css命名css可以按照内容和功能进行命名。css功能性质一般指：reset.css（重置默认的样式-属性选择符）、global.css(全局使用的类选择符)、common.css(部分页面可共同使用的类选择符)等各种按功能分类的css。一般还可以将连接、段落、颜色等样式分离出来。布局页面一般指:style.css(全站的整体框架布局)-index.css(首页的布局)、reg.css(注册页面的布

27、局)。样式命名采用小写英文字母、数字、中扛线的组合，其中不得包含汉字、空格和特殊字符；多个单词应采用中扛线分割。样式名称字符不要超过20个,少用拼音写样式，使用限定词诸如（R(ight),L(eft),T(op),B(ottom),M(iddle)，要把限定词放在最后,后缀限定词建议采用缩写形式，从而减少名称长度；根据样式的性质和功能，将样式分为以下几种：reset.css（重置默认的样式-属性选择符）global.css(全局使用的类选择符)common.css等各种按功能分类的css，各个功能模块页面的样式，视具体情况添加或修改。3.14js命名js命名规范也和css的命名规范差不多，但是

28、分前后台两种js文件，根据前后不用，使用不用的后缀区分。功能性质js功能性质一般指:jquery.js(js库或框架)、global.js(全局使用的脚本)、common.js(部分页面需要用的脚本)针对页面针对某个目录的页面：js_toggle_reg.js,前面的js是为了统一所有针对页面而定出来的。可以根据个人的情况把js改成自己所定义的单词。实际命名规范：1、js库或框架文件，如jquery.js，就引用自身的命名。2、与后台交互功能的js文件，命名规则就是:back_+js文件名如验证js：back_submitcheck.js3、前端页面效果的js文件，命名规则就是:front_+

29、js文件名如焦点图效果js：front_focus.js3.15图片的命名首先我们这里需要注意的是，切图的时候，可以去参考一些大型的网站如yahoo等的切图的方法。一般熟练css布局的都会将许多的小图标，背景图片集合到一张图，通过css来控制到具体的元素使用哪个图标或背景。另外目前国外和国内高标准的网站，一般都采用png图使用，但是我们公司根据异步的要求，必须用jpg的图片。图片根据图片的所处的页面位置名称作用来命名。图片的命名规范化更有利于css的编写。可以举几个例子:index_header_navtab_bg.jpg-字面理解到图片是index页面headher中导航TAB的背景products_content_title_icon.gif-字面理解为products页面content中标题的iconindex_header_banner_pic.png-字面理解为index页面header的banner图片只有当图片的名称语义化了，在你写css或者页面需用到图片的时候，可以更快速的找到所需的。如果只是随便的取01.jpg、bg.jpg这类的命名，会给前端开发带来不便，更不用说后期维护了。第 19 页 共 19 页