前端开发设计规范文档.docx
《前端开发设计规范文档.docx》由会员分享,可在线阅读,更多相关《前端开发设计规范文档.docx(31页珍藏版)》请在咨信网上搜索。
1、前端开发设计规范文档272020年4月19日文档仅供参考前端开发设计规范 目录前端开发设计规范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、网站页面布局规范52.7.1、前台页面尺寸52.7.2、标准网页广告图标规格(参考)62.7.3、页面字体62.7.4、字体颜色7三、ja
2、vaScript开发规范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样式定义规范124.3.4、css样式常用id的命名134.3.5、css样式
3、常用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、页面文件命名规范命名格式为:项目名缩写_所属功能_所属功能子项_. .jsp/html,文件命名下划线不能超过三个,命名尽量使用简短的能明确表明
4、文件用途的英文或者英文简写。1.2、页面head部分书写规范1) 、JSP页面:需要在页面的最开始部分增加以下语句:2) 、HTML页面:需要在页面的最开始部分增加以下语句:3) 、HTML5页面:页面添加编码格式可简写为:4) 、响应式的网页添加如下语句: 5) 、title元素:一般网页必须添加title元素,若为框架页面,则能够不写。title统一使用中文,title内容要简洁明了,不能超过20个字。6) 、外部js的引用:页面加载时需要用到的js文件写在head中,引用时不用写language属性,HTML5能够省略type属性,如。7) 、外部CSS文件的引用:必须使用link方式引
5、入,HTML5能够省略type属性,CSS文件引入要放在js文件前。1.3、HTML元素开发规范1.3.1、HTML元素书写规范1) 、代码的结构要保持完整性,单个标签必须要关闭,如:,等。2) 、子元素要比父元素缩进两个字符。3) 、body中的所有内容不能直接书写在标签中,需要在body中嵌入一层div,所有的元素需要写在改div中。4) 、除非必要,所有标签元素的样式都需要使用CSS文件来定义。5) 、img元素:所有展示用图片都要使用alt属性添加能简要描述图片的文字说明,如首页的广告图片等,必须具有width和height属性。6) 、所有Form都要指定action属性,但属性值需
6、要则填写,不需要则留空,method属性统一使用POST;所有form表单都要在提交前对输入的数据前进行验证,验证使用jQuery validate插件,书写规范如下:7) 、所有不可更改的input元素都要设置readonly属性。8) 、按功能模块添加简单明了的注释,在功能模块的开始标明模块开始,结束时标明模块结束,注释单独占一行;模块之间留行间隔便于查看代码。9) 、已过时的元素标签使用CSS样式来代替,已过时的标签属性禁止使用,使用CSS样式定义来实现。1.3.2、HTML元素命名规范涉及到跟服务端交互的元素,元素命名应当与服务端程序中定义的对应变量名相同,或使用对象名.变量名的形式。
7、页面上使用到的不涉及与服务端交互的HTML元素其id和name需统一,所有命名使用元素标签的缩写_后缀方式,后缀命名使用小驼峰命名法即第一个单词全部使用小写,其它单词首字母大写,常见元素命名规则如下表所示:HTML元素缩写示例text输入框txttxt_userNamebutton按钮btnbtn_checkselect下拉选择selsel_beginTimecheckbox多选项chkchk_departmentNumberdiv标记divdiv_resultsubmit提交按钮subsub_registerhidden隐藏值hdnhdn_userId二、WEB页面开发规范2.1、错误跳转页
8、面的处理400、401、403、404、405、406、407、410、412、414、500、501、502等错误代码使用其相应的统一页面,所有错误信息全部使用中文错误信息,标点符号使用中文半角符号。页面设计与项目功能相匹配,做到简洁友好。2.2、提示信息的处理成功提示信息能够使用弹窗或跳转统一成功页面的方式,成功页面的风格与网站总体风格相同,格式如下:成功:+提示信息+!。2.3、页面的返回 所有需要返回上一页的时候使用history.back();不使用history.go(-1)。2.4、提交前数据的判断验证1) 、所有由用户输入的数据在提交前都要进行验证。2) 、验证方式使用jQue
9、ry validate插件,需要验证的项:长度验证:默认长度为数据库中数据的最大长度,中文占两个字符,英文占一个字符。为空验证:所有不允许为空的输入内容为空时不允许提交。其它验证:需要根据输入内容的不同设定合适的验证,如Email格式是否正确,身份证号格式是否正确等。3) 、验证后发现错误,需要提示明确的错误信息。错误提示信息样式:字体颜色#ff3366,文字前面加红色感叹号小图标。4) 、可输入表单需要具有输入内容的提示信息,可使用placeholder属性来定义或者自定义,颜色必须使用灰色,字体比网站使用字体小。2.5、删除操作所有涉及删除的操作,需要用户进行确认之后才能进行操作。2.6、
10、页面中java代码的使用页面中不允许使用的方式嵌入java代码。2.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) 、每个非首页静
11、态页面含图片字节不超过60K,全尺寸banner不超过14K。2.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、页面字体正文内容中文统一使用宋
12、体(可根据需要设定),大小为12px,标题使用14px加粗,不建议使用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
13、书写规范1) 、javaScript代码都需要写在javaScript文件中,在页面中进行调用,调用代码除页面加载时需要用到的外全都写在页面最低端。2) 、如验证用javaScript代码等,每个页面不同且比较短的,能够写在页面的最底端,从最后一个外部javaScript引入命令后开始。3) 、脚本变量开发规范:变量的使用尽量缩小到小的作用域。如循环使用。4) 、尽量避免使用全局变量。5) 、每一句语句都要以分号“;”结束。6) 、函数程序体缩进四个空格,Tab键为4个空格,以Tab键作为缩进单位。7) 、函数名与“(”之间不应该有空格,“)”与“”之间加空格。8) 、函数体之间应当加空行。9
14、) 、如果代码本身是清楚的,则只需要在函数定义前,添加简单注释说明该函数的作用,若代码本身比较复杂,可在个别语句后添加简洁明了的注释。3.2.2、javaScript命名规范1) 、常量以及全局变量名必须全部使用大写字母。2) 、不要再命名中使用“$”和“”等特殊字符,不要把“_”作为变量名的第一个字符和最后一个字符。3) 、变量名必须使用其类型的缩写字符串开始。各种类型的缩写字符串如下: 变量类型缩写变量类型缩写整型变量int长整型变量lng浮点型变量flt双精度变量dbl对象变量obj字符串变量strDate类型变量dtm数组ary临时变量tmp4) 、变量名必须采用有意义的单词命名,如:
15、strUserName、lngArrayIndex,以及不要出现数字编号命名,如:value1,value25) 、如果变量名过长能够使用单词缩写,除了被广泛了解的单词缩写以外,所有使用单词缩写的变量名必须在定义时给出注释,如: 6) 、参数变量命名必须加前缀:p_。7) 、function命名规范:使用动词+名词的方式,而且命名需要明确指出其作用,动词前缀必须是同函数功能相关的完整动词,如getUserId(),用来取用户Id。8) 、所有命名使用小驼峰命名法:第一个单词全部使用小写,其它单词首字母大写,如:myClassName。四、css样式规范4.1、css样式文件命名规范4.1.1、
16、通用样式文件命名规范:1) 、整个项目通用的css布局样式文件命名为:layout.css。如:经过于整个网站中使用的div、h1、img等的定义文件。2) 、对引用的开源css样式重定义的文件命名为:开源的css样式文件名-reset.css如:bootstrap.css为引用的css样式文件,现在对它的.btn重新定义样式内容,这类样式的文件名命名为:开源的css样式文件名-reset.css。一个项目建议最多使用一个css框架。3) 、外部引用的字体css样式文件命名为:font-加引用的字体名字.css,若有多个字体引用则使用:font-style.css。4) 、自定义的响应式布局样
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 前端 开发 设计规范 文档
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【精***】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【精***】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。