前端开发设计标准规范文档.doc
《前端开发设计标准规范文档.doc》由会员分享,可在线阅读,更多相关《前端开发设计标准规范文档.doc(27页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、#*前端开发设计规范目目录录前端开发设计规范.1一、HTML 使用规范.11.1、页面文件命名规范.11.2、页面 head 部分书写规范.11.3、HTML 元素开发规范.21.3.1、HTML 元素书写规范.21.3.2、HTML 元素命名规范.3二、WEB 页面开发规范.42.1、错误跳转页面的处理.42.2、提示信息的处理.42.3、页面的返回.42.4、提交前数据的判断验证.42.5、删除操作.52.6、页面中 java 代码的使用.52.7、网站页面布局规范.5#*2.7.1、前台页面尺寸.52.7.2、标准网页广告图标规格(参考).62.7.3、页面字体.62.7.4、字体颜色.
2、7三、javaScript 开发规范.73.1、javaScript 文件命名规范: .73.2、javaScript 开发规范.73.2.1、javaScript 书写规范.73.2.2、javaScript 命名规范.8四、css 样式规范.94.1、css 样式文件命名规范.94.1.1、通用样式文件命名规范:.94.1.2、业务类样式文件命名规范.104.1.3、css 样式文件命名须知 .104.2、css 样式文件存放目录规范.104.3、css 样式定义规范.114.3.1、css 样式内容顶部注释规范.114.3.2、css 样式内容注释规范 .114.3.3、css 样式定义
3、规范.124.3.4、css 样式常用 id 的命名.13#*4.3.5、css 样式常用 class 的命名.144.4、css 样式书写规范.154.4.1、css 样式排版规范.154.4.2、css 样式书写风格规范 .154.4.3、css 样式属性定义顺序规范.164.4.4、css 样式其他规范.164.4.5、css 样式 Hack 的使用.174.4.6、字体定义规范.184.4.7、css 样式检测.184.4.8、注意事项.184.5、css 样式引用规范.194.6、媒体内容命名规范.19五、项目文件存放规范.19六、前端开发规则.20#*一、HTML 使用规范1.1、
4、页面文件命名规范命名格式为:项目名缩写_所属功能_所属功能子项_. .jsp/html,文件命名下划线不能超过三个,命名尽量使用简短的能明确表明文件用途的英文或者英文简写。1.2、页面 head 部分书写规范1)、JSP 页面:需要在页面的最开始部分增加以下语句:2)、HTML 页面:需要在页面的最开始部分增加以下语句:3)、HTML5 页面:页面添加编码格式可简写为:4)、响应式的网页添加如下语句: 5)、title 元素:一般网页必须添加 title 元素,若为框架页面,则可以不写。title 统#*一使用中文,title 内容要简洁明了,不能超过 20 个字。6)、外部 js 的引用:页
5、面加载时需要用到的 js 文件写在 head 中,引用时不用写language 属性,HTML5 可以省略 type 属性,如。7)、外部 CSS 文件的引用:必须使用 link 方式引入,HTML5 可以省略 type 属性,CSS 文件引入要放在 js 文件前。1.3、HTML 元素开发规范1.3.1、HTML 元素书写规范1)、代码的结构要保持完整性,单个标签必须要关闭,如:,等。2)、子元素要比父元素缩进两个字符。3)、body 中的所有内容不能直接书写在标签中,需要在 body中嵌入一层 div,所有的元素需要写在改 div 中。4)、除非必要,所有标签元素的样式都需要使用 CSS
6、文件来定义。#*5)、img 元素:所有展示用图片都要使用 alt 属性添加能简要描述图片的文字说明,如首页的广告图片等,必须具有 width 和 height 属性。6)、所有 Form 都要指定 action 属性,但属性值需要则填写,不需要则留空,method 属性统一使用 POST;所有 form 表单都要在提交前对输入的数据前进行验证,验证使用 jQuery validate 插件,书写规范如下:7)、所有不可更改的 input 元素都要设置 readonly 属性。8)、按功能模块添加简单明了的注释,在功能模块的开始标明模块开始,结束时标明模块结束,注释单独占一行;模块之间留行间隔
7、便于查看代码。9)、已过时的元素标签使用 CSS 样式来代替,已过时的标签属性禁止使用,使用CSS 样式定义来实现。#*1.3.2、HTML 元素命名规范涉及到跟服务端交互的元素,元素命名应当与服务端程序中定义的对应变量名相同,或使用对象名.变量名的形式。页面上使用到的不涉及与服务端交互的 HTML 元素其 id 和 name 需统一,所有命名使用元素标签的缩写_后缀方式,后缀命名使用小驼峰命名法即第一个单词全部使用小写,其他单词首字母大写,常见元素命名规则如下表所示:HTMLHTML 元素元素缩写缩写示例示例text 输入框txttxt_userName button 按钮btnbtn_ch
8、eck select 下拉选择selsel_beginTime checkbox 多选项chkchk_departmentNumber div 标记divdiv_result submit 提交按钮subsub_register hidden 隐藏值hdnhdn_userId二、WEB 页面开发规范2.1、错误跳转页面的处理400、401、403、404、405、406、407、410、412、414、500、501、502 等错误代码使用其相应的统一页面,所有错误信息全部使用中文错误信息,标点符号使用中文半角符号。页面设计与项目功能相匹配,做到简洁友好。#*2.2、提示信息的处理成功提示信息
9、可以使用弹窗或跳转统一成功页面的方式,成功页面的风格与网站总体风格相同,格式如下:“成功:“+提示信息+“!“。2.3、页面的返回 所有需要返回上一页的时候使用 history.back();不使用 history.go(-1)。2.4、提交前数据的判断验证1)、所有由用户输入的数据在提交前都要进行验证。2)、验证方式使用 jQuery validate 插件,需要验证的项:长度验证:默认长度为数据库中数据的最大长度,中文占两个字符,英文占一个字符。为空验证:所有不允许为空的输入内容为空时不允许提交。其他验证:需要根据输入内容的不同设定合适的验证,如 Email 格式是否正确,身份证号格式是否
10、正确等。3)、验证后发现错误,需要提示明确的错误信息。错误提示信息样式:字体颜色#ff3366,文字前面加红色感叹号小图标。#*4)、可输入表单需要具有输入内容的提示信息,可使用 placeholder 属性来定义或者自定义,颜色必须使用灰色,字体比网站使用字体小。2.5、删除操作所有涉及删除的操作,需要用户进行确认之后才能进行操作。2.6、页面中 java 代码的使用页面中不允许使用的方式嵌入 java 代码。2.7、网站页面布局规范2.7.1、前台页面尺寸1)、800*600 下,网页宽度保持在 778 以内,就不会出现水平滚动条,高度则视版面和内容决定,1024*768 下,网页宽度保持
11、在 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.2、标准网页广告图标规格(参考)1)、120*120,适用于产品或新闻照片展示。 2)、120*60,主要用于做 LOGO 使用。3)、
12、120*90,主要应用于产品演示或大型 LOGO。4)、125*125,适于表现照片效果的图像广告。5)、234*60,适用于框架或左右形式主页的广告链接。6)、392*72,主要用于有较多图片展示的广告条,用于页眉或页脚。7)、468*60,应用最为广泛的广告条尺寸,用于页眉或页脚。8)、88*31,主要用于网页链接,或网站小型 LOGO。2.7.3、页面字体正文内容中文统一使用宋体(可根据需要设定) ,大小为 12px,标题使用 14px 加粗,不建议使用 13px 字,英文字体使用 Arial 和 Helvetica/Univers。#*2.7.4、字体颜色1)、正文使用灰黑色#3333
13、33。2)、超链接可以使用蓝色#1f376d 或#425c9e,也可以根据整体页面布局进行调整,整个网站的文字超链接样式要统一。三、javaScript 开发规范3.1、javaScript 文件命名规范:1)、可通用的 javaScript 文件:项目名称缩写-文件作用.js。2)、其他 javaScript 文件:所属功能-文件作用.js。3.2、javaScript 开发规范3.2.1、javaScript 书写规范1)、javaScript 代码都需要写在 javaScript 文件中,在页面中进行调用,调用代码除页面加载时需要用到的外全都写在页面最低端。2)、如验证用 javaScr
14、ipt 代码等,每个页面不同且比较短的,可以写在页面的最底端,从最后一个外部 javaScript 引入命令后开始。3)、脚本变量开发规范:变量的使用尽量缩小到小的作用域。如循环使用。#*4)、尽量避免使用全局变量。5)、每一句语句都要以分号“;”结束。6)、函数程序体缩进四个空格,Tab 键为 4 个空格,以 Tab 键作为缩进单位。7)、函数名与“(”之间不应该有空格, “) ”与“”之间加空格。8)、函数体之间应当加空行。9)、如果代码本身是清楚的,则只需要在函数定义前,添加简单注释说明该函数的作用,若代码本身比较复杂,可在个别语句后添加简洁明了的注释。3.2.2、javaScript
15、命名规范1)、常量以及全局变量名必须全部使用大写字母。2)、不要再命名中使用“$”和“”等特殊字符,不要把“_”作为变量名的第一个字符和最后一个字符。3)、变量名必须使用其类型的缩写字符串开始。各种类型的缩写字符串如下: 变量类型缩写变量类型缩写整型变量int长整型变量lng浮点型变量flt双精度变量dbl对象变量obj字符串变量str#*Date 类型变量dtm数组ary临时变量tmp4)、变量名必须采用有意义的单词命名,如:strUserName、lngArrayIndex,以及不要出现数字编号命名,如:value1,value25)、如果变量名过长可以使用单词缩写,除了被广泛了解的单词缩
16、写以外,所有使用单词缩写的变量名必须在定义时给出注释,如:6)、参数变量命名必须加前缀:p_。7)、function 命名规范:使用动词+名词的方式,并且命名需要明确指出其作用,动词前缀必须是同函数功能相关的完整动词,如 getUserId() ,用来取用户Id。8)、所有命名使用小驼峰命名法:第一个单词全部使用小写,其他单词首字母大写,如:myClassName。#*四、css 样式规范4.1、css 样式文件命名规范4.1.1、通用样式文件命名规范:1)、整个项目通用的 css 布局样式文件命名为:layout.css。如:通过于整个网站中使用的 div、h1、img 等的定义文件。2)、
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 前端 开发 设计 标准规范 文档
限制150内