前端开发设计规范文档Word格式文档下载.docx

1、1、3、HTML元素开发规范1、3、1、HTML元素书写规范1） 、代码的结构要保持完整性,单个标签必须要关闭,如:/div,等。2） 、子元素要比父元素缩进两个字符。3） 、body中的所有内容不能直接书写在/body标签中,需要在body中嵌入一层div,所有的元素需要写在改div中。4） 、除非必要,所有标签元素的样式都需要使用CSS文件来定义。5） 、img元素:所有展示用图片都要使用alt属性添加能简要描述图片的文字说明,如首页的广告图片等,必须具有width与height属性。6） 、所有Form都要指定action属性,但属性值需要则填写,不需要则留空,method属性统一使用P

2、OST;所有form表单都要在提交前对输入的数据前进行验证,验证使用jQuery validate插件,书写规范如下:7） 、所有不可更改的input元素都要设置readonly属性。8） 、按功能模块添加简单明了的注释,在功能模块的开始标明模块开始,结束时标明模块结束,注释单独占一行;模块之间留行间隔便于查瞧代码。9） 、已过时的元素标签使用CSS样式来代替,已过时的标签属性禁止使用,使用CSS样式定义来实现。1、3、2、HTML元素命名规范涉及到跟服务端交互的元素,元素命名应当与服务端程序中定义的对应变量名相同,或使用对象名、变量名的形式。页面上使用到的不涉及与服务端交互的HTML元素其i

3、d与name需统一,所有命名使用元素标签的缩写_后缀方式,后缀命名使用小驼峰命名法即第一个单词全部使用小写,其她单词首字母大写,常见元素命名规则如下表所示:text输入框txttxt_userNamebutton按钮btnbtn_checkselect下拉选择selsel_beginTimecheckbox多选项chkchk_departmentNumberdiv标记divdiv_resultsubmit提交按钮subsub_registerhidden隐藏值hdnhdn_userId二、WEB页面开发规范2、1、错误跳转页面的处理400、401、403、404、405、406、407、410

4、、412、414、500、501、502等错误代码使用其相应的统一页面,所有错误信息全部使用中文错误信息,标点符号使用中文半角符号。页面设计与项目功能相匹配,做到简洁友好。2、2、提示信息的处理成功提示信息可以使用弹窗或跳转统一成功页面的方式,成功页面的风格与网站总体风格相同,格式如下:成功:+提示信息+！。2、3、页面的返回 所有需要返回上一页的时候使用history、back（）;不使用history、go（-1）。2、4、提交前数据的判断验证1） 、所有由用户输入的数据在提交前都要进行验证。2） 、验证方式使用jQuery validate插件,需要验证的项:长度验证:默认长度为数据库中

5、数据的最大长度,中文占两个字符,英文占一个字符。为空验证:所有不允许为空的输入内容为空时不允许提交。其她验证:需要根据输入内容的不同设定合适的验证,如Email格式就是否正确,身份证号格式就是否正确等。3） 、验证后发现错误,需要提示明确的错误信息。错误提示信息样式:字体颜色#ff3366,文字前面加红色感叹号小图标。4） 、可输入表单需要具有输入内容的提示信息,可使用placeholder属性来定义或者自定义,颜色必须使用灰色,字体比网站使用字体小。2、5、删除操作所有涉及删除的操作,需要用户进行确认之后才能进行操作。2、6、页面中java代码的使用页面中不允许使用的方式嵌入java代码。2

6、、7、网站页面布局规范2、7、1、前台页面尺寸1） 、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面与内容决定,1024*768下,网页宽度保持在1002以内,不会出现水平滚动条,高度同样视版面内容决定。2） 、根据第一条原则,规定网页的尺寸为width=960px,height=600px。3） 、页面长度原则上不超过3屏（可根据实际情况设定）,宽度不超过1屏。4） 、全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px。5） 、每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K。2、

7、7、2、标准网页广告图标规格（参考）1） 、120*120,适用于产品或新闻照片展示。2） 、120*60,主要用于做LOGO使用。3） 、120*90,主要应用于产品演示或大型LOGO。4） 、125*125,适于表现照片效果的图像广告。5） 、234*60,适用于框架或左右形式主页的广告链接。6） 、392*72,主要用于有较多图片展示的广告条,用于页眉或页脚。7） 、468*60,应用最为广泛的广告条尺寸,用于页眉或页脚。8） 、88*31,主要用于网页链接,或网站小型LOGO。2、7、3、页面字体正文内容中文统一使用宋体（可根据需要设定）,大小为12px,标题使用14px加粗,不建议使

8、用13px字,英文字体使用Arial与Helvetica/Univers。2、7、4、字体颜色1） 、正文使用灰黑色#333333。2） 、超链接可以使用蓝色#1f376d或#425c9e,也可以根据整体页面布局进行调整,整个网站的文字超链接样式要统一。三、javaScript开发规范3、1、javaScript文件命名规范:1） 、可通用的javaScript文件:项目名称缩写-文件作用、js。2） 、其她javaScript文件:所属功能-文件作用、js。3、2、javaScript开发规范3、2、1、javaScript书写规范1） 、javaScript代码都需要写在javaScrip

9、t文件中,在页面中进行调用,调用代码除页面加载时需要用到的外全都写在页面最低端。2） 、如验证用javaScript代码等,每个页面不同且比较短的,可以写在页面的最底端,从最后一个外部javaScript引入命令后开始。3） 、脚本变量开发规范:变量的使用尽量缩小到小的作用域。如循环使用。4） 、尽量避免使用全局变量。5） 、每一句语句都要以分号“;”结束。6） 、函数程序体缩进四个空格,Tab键为4个空格,以Tab键作为缩进单位。7） 、函数名与“（”之间不应该有空格,“）”与“”之间加空格。8） 、函数体之间应当加空行。9） 、如果代码本身就是清楚的,则只需要在函数定义前,添加简单注释说明

10、该函数的作用,若代码本身比较复杂,可在个别语句后添加简洁明了的注释。3、2、2、javaScript命名规范1） 、常量以及全局变量名必须全部使用大写字母。2） 、不要再命名中使用“$”与“”等特殊字符,不要把“_”作为变量名的第一个字符与最后一个字符。3） 、变量名必须使用其类型的缩写字符串开始。各种类型的缩写字符串如下:整型变量int长整型变量lng浮点型变量flt双精度变量dbl对象变量obj字符串变量strDate类型变量dtm数组ary临时变量tmp4） 、变量名必须采用有意义的单词命名,如:strUserName、lngArrayIndex,以及不要出现数字编号命名,如:value

11、1,value25） 、如果变量名过长可以使用单词缩写,除了被广泛了解的单词缩写以外,所有使用单词缩写的变量名必须在定义时给出注释,如:6） 、参数变量命名必须加前缀:p_。7） 、function命名规范:使用动词+名词的方式,并且命名需要明确指出其作用,动词前缀必须就是同函数功能相关的完整动词,如getUserId（）,用来取用户Id。8） 、所有命名使用小驼峰命名法:第一个单词全部使用小写,其她单词首字母大写,如:myClassName。四、css样式规范4、1、css样式文件命名规范4、1、1、通用样式文件命名规范:1） 、整个项目通用的css布局样式文件命名为:layout、css。

12、如:通过于整个网站中使用的div、h1、img等的定义文件。2） 、对引用的开源css样式重定义的文件命名为:开源的css样式文件名-reset、cssbootstrap、css为引用的css样式文件,现在对它的、btn重新定义样式内容,这类样式的文件名命名为:开源的css样式文件名-reset、css。一个项目建议最多使用一个css框架。3） 、外部引用的字体css样式文件命名为:font-加引用的字体名字、css,若有多个字体引用则使用:font-style、css。4） 、自定义的响应式布局样式命名为:项目名称缩写responsive、css。5） 、跨项目通用功能定义的css样式文件命

13、名为:实现的功能、css。6） 、为IE浏览器做兼容处理的样式命名为:ie-版本号、css。4、1、2、业务类样式文件命名规范自定义的样式统一定义在一个文件内,文件命名为:项目名称-style、css。4、1、3、css样式文件命名须知1） 、以上所有的css样式文件命名必须就是小写字母,不允许中文、大写字母及其她特殊字符等。如果有样式版本共存或更新需要保留老版本样式,请在样式文件名后面加上“-版本号”,最新版本样式文件除外,同样版本号只允许就是数字或小写字母。2） 、以上css文件命名制定的规范只适用普遍的情况,特殊情况下请开发人员根据实际情况自行命名,但必须遵行1）的规定。4、2、css样式文件存放目录规范项目文件存放目录将在后面说明,此处只针对css样式文件存放规定。1） 、字体样式文件存放文件夹:/font/,包括字体的源文件。2） 、引用的样式保持原来的目录结构,如果有多个引用的样式则按功能新建文件夹来分别存放。3） 、其她样式文件不用单独新建文件夹。4、3、css样式定义规范4、3、1、css样式内容顶部注释规范1） 、请使用utf-8编码。2） 、申明css定义的内容概述或目的,申明编写的人员、更新日期。3） 、请谨慎使用import url（）引入其她css样式文件。4、