WEB前端开发规范

WEB前端开发规范

WEB前端开发规范

目录

1、规范目的2、基本准则3、文件规范4、文件规范

5、html书写规范6、css书写规范

7、JavaScript书写规范8、图片规范9、注释规范

10、开发及测试工具约定11、其他规范12、CSSHack1

规范目的

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

基本准则

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

3.1、html,css,js,images文件均归档至约定的目录中;

23

3.2、html文件命名:命名以中文命名，依实际模块命名，如果同一模块以_&title&_来组合命名,以方便添加功能时查找对应页面，团结里的相互理解。

例如：我的好股网里的TAB命名

大模块名称_小模块的titile.html我的好股网_关注的微博.html

3.3、css文件命名:英文命名,后缀.css.初始化样式reset.css，其他样式依实际模块页面需求命名，共用样式一般以模块考虑来划分命名,如有改版修改的css文件可以采用&_时间日期

例如：微博改版

版块名称_时间日期.cssnew_blog_1212.css

4.4、Js文件命名:英文命名,后缀.js.共用common.js,其他依实际模块需求命名.5.5、图片命名:4

html书写规范

4.1、文档类型声明及编码:统一用;编码统一为。目的:统一性和网站提高开发合作效率。

4.2、非特殊情况下样式文件必须外链至之间;非特殊情况下JavaScript文件必须外链至页面底部之前;目的:网站的优化。

4.3、所有编码均遵循xhtml标准,标签&属性&属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合,包括br(),hr()等;属性值必须用双引号包括;目的:更加符合web标准(w3c),也有利于seo。4.4、充分利用无兼容性问题的html自身标签,比如span,em,strong,optgroup,label,等等目的：减少代码量

4.5、语义化html,如标题根据重要性用h*(同一页面只能有一个h1),段落标记用p,列表用ul,内联元素中不可嵌套块级元素;目的：减少代码量，也有利于seo

4.5、尽可能减少div嵌套,如4.11、给区块代码及重要功能(比如循环)加上注释,方便后台程序员嵌套模版;

4.12、特殊符号使用:尽可能使用代码替代:比如)&空格()&()等等;4.13、书写页面过程中,请考虑向后扩展性;5

css书写规范

5.1编码统一为utf-8;都用小写

5.2class与id的使用:一般都使用class，特殊除外，因id的优先级比class的高5.3样式命名推荐使用英文避免使用汉语拼音,尽量使用简易的单词组合;命名方式参照《WEB前端开

发CSS命名参考》。命名方式采用驼峰命名法和划线命名法两种，提高可读性。例如：dropMenu、subNavMenu、drop-menu、sub_nav_menu。驼峰命名法用来区别不同的单词。划线命名法表明从属关系。如：“.timeList”和“.time_list”分别表示时间列表和时间部分下的列表。5.4css属性书写顺序,建议遵循布局定位属性>自身属性>文本属性>其他属性.此条可根据

自身习惯书写,但尽量保证同类属性写在一起.1.定位属性（比如：display,position,float,clear,visibility,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便于扩展维护。继承属性示例：这儿是标题列表201*-09-15样式表：ul.listli{position:relative}ul.listlispan{position: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控制方法:table{border:0;margin:0;border-collapse:collapse;}tableth,tabletd{padding:0;},base.css文件中我会初始化表格样式)5.8尽量不使用兼容ie8,和代码*html

写法。

5.9用png图片做图片时,要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效

果,请参考文档《IE6下png透明问题解决的最佳方案》

5.10兼容性属性的使用,比如text-shadow（文字阴影）、css3的相关属性在保证目前主流浏览器使

用正常的情况下可以使用来对页面进行锦上添花式的设计。

5.11减少使用影响性能的属性,比如position:absolute||float;5.12必须为大区块样式添加注释,小区块适量注释;5.13代码缩进与格式:单行书写,统一使用tab进行缩进。;

目的：css书写规范主要提高效率方便面想关人员的修改，提高网站的扩展性(根据网站情况不一样，要灵活应用)6

JavaScript书写规范

6.1文件编码统一为utf-8,书写过程过,每行代码结束必须有分号;要检查网上down下来的代码造

成的代码污染(沉冗冲突，代码注入)等，有的可以firefox的一些扩展插件分析;6.2库引入:原则上仅引入jQuery库,若需引入第三方库,须与团队其他人员讨论决定;6.3命名语义化,尽可能利用英文单词或其缩写;6.4代码结构明了,加适量注释.提高函数重用率;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运用csssprite技术集中小的背景图或图标,减小页面http请求,但注意,请务必在对应的

spritepsd源图中划参考线,并保存至img目录下.

8注释规范

8.1html注释:注释格式,“-”只能在注释的始末位置,不可置入注释文字区域;8.2css注释:注释格式/*这儿是注释*/;

8.3JavaScript注释,单行注释使用“//这儿是单行注释”,多行注释使用/*这儿有多行注释*/;

9开发及测试工具约定

9.1编码必须格式化,比如缩进;

9.2测试工具:前期开发仅测试FireFox&IE6&IE7&IE8,后期优化时加入Opera&Chrome;9.3建议测试顺序:FireFox>IE7>IE8>IE6>Opera>Chrome,建议安装firebug及IETab

Plus插件.安装调试利器IETester

10其他规范

10.1开发过程中严格按分工完成页面,以提高css复用率,避免重复开发;10.2减小沉冗代码,书写所有人都可以看的懂的代码.简洁易懂是一种美德.为用户着想,为服务

器着想.11CSSHack

即便是完美的CSS也未必能在目前众多的终端浏览器中呈现一致的效果，所以，CSSHack在很多情况下都是必要的，建议先以对CSS标准支持得比较好的浏览器（比如“Firefox”或者“Chrome”）为主编辑CSS，最后再处理IE的兼容性单独为IE建立一个CSS文件（比如for-ie.css,fuck-ie.css,ie-hack.css等），最后在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标准不是一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现

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

1.11结构标准语言

（1）XML

XML是TheExtensibleMarkupLanguage(可扩展标识语言)的简写。目前推荐遵循的是W3C于201*年10月6日发布的XML1.0，参（-XML-201*1006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。（2）XHTML

XHTML是TheExtensibleHyperTextMarkupLanguage可扩展标识语言的缩写。目前推荐遵循的是W3C于201*年1月26日推荐XML1.0。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在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）DOM

DOM是DocumentObjectModel文档对象模型的缩写，根据W3CDOM规范DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。(2)ECMAScript

ECMAScript是ECMA(EuropeanComputerManufacturersAssociation)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript262。

二、如何实现WEB标准

2.1WEB前端开发工具2.11制作软件

制作网页，我们可以用Dreamweaver和Frontpage等直接视图进行网页制作。而要实现Web标准，这些

软件或者工具都必须升级到最新版。如AdobeDreamweaverCS、MicrosoftExpressionweb,ApatanaStudio.使用最新的软件，更有助编写出严格标准的页面。同时在此，我们很应该明确，可视化网页制作会产生很多冗余的代码，不利于SEO优化及今后的维护，抛弃视图制作页面，改为纯手写HTML和CSS。培养良好的书写

代码习惯，对维护和修改会起到事半功倍的效果。

■ApatanaStudio(免费)■AdobeDreamweaverCS■MicrosoftExpressionWeb

2.12测试及调试软件

由于存在各种浏览器，所以我们制作出来的页面必须兼容各种浏览器。首先我们必须兼容最常见的几款浏览器：IE6、IE7、IE8、Firefox。当你的页面都支持以上4种浏览器，Opera、Safari、Chrome、360、遨游等其他浏览器基本上已经都没问题了。这里推荐几款辅助工具。

■IETester-集成IE5.5-IE9-debugbar.com/wiki/IETester/HomePage■IEDevelopertoolbar-微软出的IE下查看页面DOM结构的IE插件■Debugbar-和IEdevelopertoolbar差不多

■FirefoxFirebug插件-Firefox下的DOM查看插件

2.2网站架构的流程网站的架构流程必须按照步骤走，步骤大概分为4步

1.设计稿的分析2.切图3.编写html和css4.编写JavaScript脚本

2.21设计稿的分析

1.能分清设计稿中的公共与私有的部分

从最基本的开始，分清公共部分如头尾、菜单、导航、大框架和每个独立页面所用到的部分等。2.在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式），在分清公共和私有部分后，分析最简单的实现方法，如哪些部分是可以平铺的，哪些是可以重复被使用的等等。3.在2的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式），在分清公共和私有部分后，能准确的给出各部分的实现方案，如“焦点图”的实现方法有几种种，选择哪种方法更合适项目？图片应该如何切？

4.在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式），在给出的方案中考虑是否可扩展、如何重复使用、将哪一类的图合并可以最大化页面的性能。这里还要注意有些模块的内容可能是动态的，当内容改变后如何兼容。

5.在4的基础上，考虑整站的结构分布（包括文件分布、目录结构）

考虑上面方案的综合效率，如维护所需要的成本、页面打开速度、带宽成本、服务器开销等等(当然这是配合后台程序员一起讨论)。

2.22切图

1.切成所需要的图片

最基本的，将需要的图切出来，这时候会需要PS或fireworks切出自己需要的图。

2.在1的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型），压缩输出的图片，在不影响画面质量的前提下，尽可能的减少文件字节数。这个工作很重要，优化一张图片所带来的效果可能比优化很多的代码所带来的效果要明显得多。

3.在2的基础上，规划切出来的图片（包括文件分布）规划切出来的图片，哪些图应该被合并，存放于哪个目录等等。

4.在3的基础上，考虑整体的性能（包括合并图片、压缩文件大小）,同样是综合整体的性能、效率。2.23HTML和CSS的编写

1.还原设计稿视觉效果

还原设计稿，是页面制作最基本的要求，不管设计稿是否符合自己的审美观，做为页面重构工作者，还原设计稿是一项职业素质。通过标准验证是检验我们输出的质量很重要的一个方法。虽然最终的页面不一定可以通过验证，但我们所输出的静态页面大部分是可以做到通过验证的，除非有特殊的需求。

2.在1的基础上，实现多浏览器的兼容

兼容多浏览器，要实现多浏览器的兼容，少不要了解下各浏览器的习性。3.在2的基础上，标签语义化

标签语义化，是WEB标准的核心内容，只有做好了语义化，才能说得上做到了WEB标准。虽然在国内没有统一的标准，不过一些基本的语义标签的使用还是可以定下的，如段落、列表、表格等等。

4.在3的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用），做好了上面3点，只能说单一的页面做好了，下面得考虑两个以上的页面了。模块化就是为了更好的提高复用，减少重复开发所带来的浪费。模块化也是被越来越多的人所关注，可以说是发展的一个趋势，随着大家对HTML和CSS掌握越多，如何更好的发挥它们也成了提高工作效率的重点，其中模块化就是很好的一种方式。

5.在4的基础上，考虑到扩展性、复用性和可维护性

做好了模块化，并不一定就是最优化的，如果考虑上扩展性、复用性和可维护方面的内容，模块化有时反而会不利于这几个方面，如何平衡这几方面，是一个更高的要求。

2.24JavaScript脚本的编写

因为公司拥有自己的js效果库，大多的效果可以不必到网上自己去找，直接到国信展示平台中找到相应的效果，在运用到自己的页面上即可。

1.在公司的展示平台中抽取相应的效果的js文件。

2.在1的基础上，把效果运用到自己的页面中，还原设计稿视觉效果。3.在2的基础上，实现多浏览器的兼容以及js相互之间的兼容。

2.3XHTML的编写代码规范在开始设计XHTML页面以前，我们必须先了解有关XHTML的代码规范，养成良好的书写习惯。在上一篇文章中我们也看到标签不同于HTML中的的写法，下面我们详细介绍一下XHTML代码的书写规范。2.31XHTML页面报头规范

■每个页面采用统一文档类型

■页面所有超链接引用弹出新窗口（可选/可不选）

■统一使用utf-8编码■html页面中统一加入IE向下兼容代码

X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与content="IE=7"在无论页面是否包含指令，都像是使用了WindowsInternetExplorer7的标准模式。而

content="IE=EmulateIE7"模式遵循指令。对于多数网站来说，它是首选的兼容性模式。为了避免制作出的页面在IE8下面出现错误，建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码：

■TITLE与META

■ICO的引用/收藏夹图标

2.32所有的标签都必须使用结束标记

在XHTML中如果出现开始标签，就必须有相对应的结束标签。如：，等如果使用单体标签，则必须用“/”斜线来结束。如：，等。

2.33所有标签和属性名称都必须小写

在XHTML中标签和属性名称大写或大小写混杂是不被允许的。

如：在HTML中是没错的，但在XHTML中必须写成：。div是标签元素，class是属性名称都必须小写，而Abc是属性值，在XHTML中属性值是不被限制的。但为了不易出错，建议全部小写如：onMouseOver也必须写成：onmouseover。某些开发工具自动生成的。

2.34属性值必须使用双引号括起来

在HTML中可以写成，但XHTML规定必须写成：。

2.35不允许使用属性简写

尤其是在表单元素中，以前HTML允许写成如：、等，但XHTML规定所有属性必须被赋值。正确的写法是：、。

2.36所有标签都必须合理嵌套

XHTML书写结构的要求是非常严谨的，因此所有的嵌套都必须按顺序，即最先出现的标签，最后结束。正确的写法是：XHTML代码规范。

2.37不是标签一部分的特殊符号都用编码表示出现在内容中的特殊符号都需要用编码形式表现出来

■任何（），不是标签的一部分，都必须被编码为：>■任何（&），都必须编码为：&

■任何（"），不是标签的一部分，都必须被编码为："

2.38图片标签必须要有ALT属性

为了使浏览者在图片未显示的情况下依然可以了解要表现的意义，XHTML规定没一个图片标签都要有alt标签。如只起修饰作用没有任何意义的图片也要设置alt属性，属性值为空。2.39不能在注释中使用两个以上的破折号“--”

■在注释中的内容中，不能出现两个或两个以上破折号“--”，只能出现在注释的开头和结束，在内容中

它们不再有效。如：是错误的写法，其中的“--”可以用空格或等号“==”替代。正确的写法是，或。

■单位都按闭包形式出现

content

以上的所提的不规则写法虽然不会对网页的显示造成影响，但在进行W3C效验的时候却会出很多莫名

其妙的问题。为了使代码更加规范，易于阅读和维护，为转向XML做准备，养成良好的书写规范还是很有必要的。

2.4CSS相关规范2.41选择DOCTYPE

同样CSS在不同声明中的页面所起的效果也许会不一致。XHTML1.0提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：

严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性。完整代码如下：

框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：

理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML1.0Transitional)是目前理想选择。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

2.42指定语言及字符集

为文档指定语言：

为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，常用的语言定义：标准的XML文档语言定义：

针对老版本的浏览器的语言定义：

为提高字符集，建议采用“utf-8”，另外除了代码的编码使用utf-8，页面保存的格式也应用utf-8否则在某些编辑器下会出现乱码的情况。关于UTF-8字符处理在Web开发中的应用的可以参考IBM的文档：-lo-utf8/index.html

2.43调用样式的方法比较

大家知道页面要使用外部css文件的方式有两种：

一种是引用(link)：；

另一种是导入(@import)：@importurl(’a.css’);；

两者引用的方式在页面上的展现效果却是一样的，但是两者又有着很重大的区别：就是页面的性能问题！建议使用link方式调用样式。另外，请不要在html页面内书写css样式。除非页面是单一独立的。

2.44编写样式的习惯

我们要养成手写CSS的习惯，在调式的时候可更快更有效的实现效果。注意的是

■使用reset将默认的css重置，推荐使用（EricMeyer和YUI）的cssreset(详见附件1)■适当写好相关注释/*forindex*//*forheader*/

■尽量使用类选择符(.class)、适当的使用ID选择符（#element）、包含选择符(#elementspan)、选择符分

组(#element,.class,span)

■将常用的布局方法和常用颜色等写成全局类选择符■将部分页面可复用的部分分离出来

■CSShack：针对不同的浏览器写不同的CSScode的过程。

CSShack的原理：由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。浏览器优先级别：FF

■每个属性占一行，而不要将全部属性写在一行。

■属性较多的时候可以按照a-z的顺序排列，方便修改的时候更快找到所需的属性和避免多写。■公共及通用样式规范化及提取(详见附件3)

2.5Javascript的编写代码规范Javascript是ECMAscript的一种，Web2.0的出现给JavaScript带来了重生。XHTML和JavaScript的有效结合，可以大大提升网站用户的体验感。为了更有效的编写JavaScript，缩短开发周期，出现了各种各样的JavaScript框架。下面介绍一下各种库和编写JavaScript的规范。

2.51选择适合自己用的JavaScript框架（库）

目前比较流行的JavaScript库有：

■Jquery

■Prototype

■script.aculo.us

■Dojo■Yui-ext■MooTools■SpryFramework

框架的数目非常多，我们可以参考以下规则进行选择：

项目需求。“这个Web站点或者Web应用，是否需要AJAX，健壮的事件处理？是否需要特效库？”框架直接提供的功能的总量，以及使用框架需要的经验同样需要考虑。

对浏览器的支持,就是js相互之间的兼容。

开发团队对框架的支持力度。有一个核心开发团队来维护的框架是最好的。这样Bug报告和问题会有更快的响应速度，而且测试会更加严格，会更好地遵守开发指导方针。

框架的成熟度。“框架的成熟度是最能说明其寿命的指标，同时也是框架的坚实基础。一个成熟的框架不会是beta版的”一个兴旺的社区，以及提供Subversion或CVS代码库，也是成熟标志。

公开更新和发布的频率。长时间的延迟和臃肿的发行版，都是你在将来得不到框架的有效支持的明确信号。反之，过多的公开版本意味着不稳定，或者项目不够专注。”文档质量。文档是一个重要的区分指标。强健的文档包括API、书籍、教程和博客，包括每个方法和属性的例子也是很有帮助的。

存在一个活跃的社区。

基准测试。基准测试可以帮助我们对于框架的性能方面得到概括的认识。基准测试还说明了框架采用

了某些质量保证方面的最佳实践。

框架的可扩展性支持插件对于任何JavaScript框架来说都绝对是加分的。API风格。“简洁和连贯性(chainability)是两个非常重要的特征”

而目前VS201*、Aptana等几大Web开发软件都内置了jquery或prototype框架，所以我们可以选择jquery或prototype来做框架。这2个框架各有各的好处，最终看个人比较精通哪个框架。

2.52JavaScript的编写规范

■不要在页面包含不必要的javascript代码，尽可能将其外部化。

JavaScript代码不应该嵌入在HTML文件里，除非那些代码是一个单独的会话特有的。HTML里的JavaScript代码大大增加了页面的大小，并且很难通过缓存和压缩来缓解。

■尽可能使用语义化名称来表达函数方法，并且写上相应的注释。

代码质量在软件质量中占很大比例。在软件生命周期里，一个程序会被许多人接手。如果一个程序可以很好的表达自己的结构和特性，则在不久的将来修改它时就会减少程序崩溃的可能。当js代码量大的时候，注释会起了很大的重用，所以请不要忽视注释。

■减少冗余代码，将可共用的部分独立出来实现重用。页面要实现用户体验效果，尽量把函数写得通用，

在不同的页面之间可以重复使用。

■代码的缩进和换行

代码不要全写在一行，每一条语句应该用分号结束并换行。适当的使用缩进，让代码容易看。

■应遵循javascript的编程规范，避免出现不必要的错误。可参考：

-cb12196/index.html

三．目录结构和命名规范

我们单独一节来说明网站目录结构和命名规范的目的是让我们重视。因为无论你的XHTML、CSS、Javascript写得多熟练多好，而网站的目录结构和其命名是让人和搜索引擎读不懂的，那么网站就没有真正做到标准化而且整个网站的后期扩展和维护的成本和代价会很大。还有一点需重视就是xhmtlcssjs的代码注意缩进，

并保持格式整齐的并且提供注释，保证可阅性。同时为后期编写程序提供良好的开发条件。

首先网站的目录结构和文件命名清晰、XHTML里面的元素命名清晰会给SEO带来好处。例如文件的命名，如果使用全拼，那么Google是自动识别拼音进行排名的。关于SEO相关的知识(请参阅公司SEO相关文档)，就不在这里一一阐述了。接下来介绍目录结构和命名规范。

3.1网站的目录结构和文件命名以下是一个大概的目录结构示例图

3.11目录结构

目录结构主要分为四类，需要注意的是，所有命名必须为小写英文，不能大写或中文。

■categorys(目录)

目录的命名尽可能使用英文或者全拼表达目录内的页面作用（语义化），需要注意的是不要使用中文词组简拼（eg:目录-->ml）。简拼容易出现重复、或者目录结构复杂的时候容易出现混乱，给后期维护带来很大的麻烦。

■css

css的目录命名可以为style、css、skin等，如果网站的目录结构不是很复杂的，尽量把css统一放在跟目录。这样可以方便后期的维护操作。如果网站的目录结构很复杂，层次超过3层以上的，可以在对应的层设置目录页面结构的css。

■js

js的目录命名一般用js或scripts，这样一看就知道里面是放js脚本。同样js的目录结构也是和css一样。

■images

images根据网站规模来调整放图片的目录，一般根目录设置的images是存放整站共用的图片（包括图片图标背景等），而各二级三级目录里面也可以设置相应的images目录存放当前级的图片。根据具体的目录规范，做到前后台协商一致！当页面在引用css或者js的时候，大型的门户站点一般会在引用加上版本号或者日期。如：

这样的做法是为了维护的时候可以更清晰知道所引用的脚本或样式是什么时候什么版本的。3.12html命名

html应遵循页面的内容或用途（SEO）进行命名。不能使用中文词组的简拼进行命名。当使用英文或者中文词组全拼的时候，同样会给SEO带来好处。另外需注意的是，整个网站的html后缀要统一，避免同时出现html、htm两种不同的后缀。

3.13css命名

css可以按照内容和功能进行命名。

■css功能性质一般指：reset.css（重置默认的样式-属性选择符）、global.css(全局使用的类选择符)、

common.css(部分页面可共同使用的类选择符)等各种按功能分类的css。一般还可以将连接、段落、颜色等样式分离出来。

■布局页面一般指:style.css(全站的整体框架布局)-----index.css(首页的布局)、reg.css(注册页面的布局)。■样式命名采用小写英文字母、数字、中扛线的组合，其中不得包含汉字、空格和特殊字符；多个单词

应采用中扛线分割。

■样式名称字符不要超过20个,少用拼音写样式，使用限定词诸如（R(ight),L(eft),T(op),B(ottom),M(iddle)，

要把限定词放在最后,后缀限定词建议采用缩写形式，从而减少名称长度；

■根据样式的性质和功能，将样式分为以下几种：

reset.css（重置默认的样式-属性选择符）global.css(全局使用的类选择符)

common.css等各种按功能分类的css，各个功能模块页面的样式，视具体情况添加或修改。

3.14js命名

js命名规范也和css的命名规范差不多，但是分前后台两种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_+js文件名如焦点图效果js：front_focus.js

3.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这类的命名，会给前端开发带来不便，更不用说后期维护了。

友情提示：本文中关于《WEB前端开发规范》给出的范例仅供您参考拓展思维使用，WEB前端开发规范：该篇文章建议您自主创作。

来源：网络整理 免责声明：本文仅限学习分享，如产生版权问题，请联系我们及时删除。

《WEB前端开发规范》由互联网用户整理提供,转载分享请保留原作者信息,谢谢!
链接地址：http://www.bsmz.net/gongwen/585492.html

• 上一篇：web前端框架比较分析
• 下一篇：Web前端开发设计规范