前端开发设计规目录前端开发设计规 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三、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样式定义规 124.3.4、css样式常用id的命名 134.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、页面文件命名规命名格式为：项目名缩写_所属功能_所属功能子项_... .jsp/html…，文件命名下划线不能超过三个，命名尽量使用简短的能明确说明文件用途的英文或者英文简写。
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方式引入，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属性，但属性值需要则填写，不需要则留空，method属性统一使用POST；所有form表单都要在提交前对输入的数据前进行验证，验证使用jQuery validate插件，书写规如下：7) 、所有不可更改的input元素都要设置readonly属性8) 、按功能模块添加简单明了的注释，在功能模块的开始标明模块开始，完毕时标明模块完毕，注释单独占一行；模块之间留行间隔便于查看代码9) 、已过时的元素标签使用CSS样式来代替，已过时的标签属性禁止使用，使用CSS样式定义来实现1.3.2、HTML元素命名规涉与到跟服务端交互的元素，元素命名应当与服务端程序中定义的对应变量名相同，或使用对象名.变量名的形式页面上使用到的不涉与与服务端交互的HTML元素其id和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、412、414、500、501、502等错误代码使用其相应的统一页面，所有错误信息全部使用中文错误信息，标点符号使用中文半角符号。
页面设计与项目功能相匹配，做到简洁友好2.2、提示信息的处理成功提示信息可以使用弹窗或跳转统一成功页面的方式，成功页面的风格与总体风格相同，格式如下："成功："+提示信息+"！"2.3、页面的返回所有需要返回上一页的时候使用history.back();不使用history.go(-1)2.4、提交前数据的判断验证1) 、所有由用户输入的数据在提交前都要进行验证2) 、验证方式使用jQuery validate插件，需要验证的项：长度验证：默认长度为数据库中数据的最大长度，中文占两个字符，英文占一个字符为空验证：所有不允许为空的输入容为空时不允许提交其他验证：需要根据输入容的不同设定适宜的验证，如Email格式是否正确，号格式是否正确等3) 、验证后发现错误，需要提示明确的错误信息错误提示信息样式：字体颜色#ff3366，文字前面加红色感叹号小图标4) 、可输入表单需要具有输入容的提示信息，可使用placeholder属性来定义或者自定义，颜色必须使用灰色，字体比使用字体小2.5、删除操作所有涉与删除的操作，需要用户进行确认之后才能进行操作2.6、页面中java代码的使用页面中不允许使用<% %>的方式嵌入java代码。
2.7、页面布局规2.7.1、前台页面尺寸1) 、800*600下，网页宽度保持在778以，就不会出现水平滚动条，高度则视版面和容决定，1024*768下，网页宽度保持在1002以，不会出现水平滚动条，高度同样视版面容决定2) 、根据第一条原则，规定网页的尺寸为width=960px,height=600px3) 、页面长度原则上不超过3屏（可根据实际情况设定），宽度不超过1屏4) 、全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px5) 、每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K2.7.2、标准网页广告图标规格（参考）1) 、120*120，适用于产品或新闻照片展示 2) 、120*60，主要用于做LOGO使用3) 、120*90，主要应用于产品演示或大型LOGO4) 、125*125，适于表现照片效果的图像广告5) 、234*60，适用于框架或左右形式主页的广告6) 、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚7) 、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚8) 、88*31，主要用于网页，或小型LOGO。
2.7.3、页面字体正文容中文统一使用宋体（可根据需要设定），大小为12px，标题使用14px加粗，不建议使用13px字，英文字体使用Arial和Helvetica/Univers2.7.4、字体颜色1) 、正文使用灰黑色#3333332) 、超可以使用蓝色#1f376d或#425c9e，也可以根据整体页面布局进行调整，整个的文字超样式要统一三、javaScript开发规3.1、javaScript文件命名规：1) 、可通用的javaScript文件：项目名称缩写-文件作用.js2) 、其他javaScript文件：所属功能-文件作用.js3.2、javaScript开发规3.2.1、javaScript书写规1) 、javaScript代码都需要写在javaScript文件中，在页面中进行调用，调用代码除页面加载时需要用到的外全都写在页面最低端2) 、如验证用javaScript代码等，每个页面不同且比较短的，可以写在页面的最底端，从最后一个外部javaScript引入命令后开始3) 、脚本变量开发规：变量的使用尽量缩小到小的作用域如循环使用4) 、尽量避免使用全局变量5) 、每一句语句都要以分号“；”完毕。
6) 、函数程序体缩进四个空格，Tab键为4个空格，以Tab键作为缩进单位7) 、函数名与“（”之间不应该有空格，“）”与“{”之间加空格8) 、函数体之间应当加空行9) 、如果代码本身是清楚的，则只需要在函数定义前，添加简单注释说明该函数的作用，若代码本身比较复杂，可在个别语句后添加简洁明了的注释3.2.2、javaScript命名规1) 、常量以与全局变量名必须全部使用大写字母2) 、不要再命名中使用“$”和“\”等特殊字符，不要把“_”作为变量名的第一个字符和最后一个字符3) 、变量名必须使用其类型的缩写字符串开始各种类型的缩写字符串如下： 整型变量int长整型变量lng浮点型变量flt双精度变量dbl对象变量obj字符串变量strDate类型变量dtm数组ary临时变量tmp4) 、变量名必须采用有意义的单词命名，如：strUserName、lngArrayIndex，以与不要出现数字编号命名，如：value1，value2…5) 、如果变量名过长可以使用单词缩写，除了被广泛了解的单词缩写以外，所有使用单词缩写的变量名必须在定义时给出注释，如：6) 、参数变量命名必须加前缀：p_。
7) 、function命名规：使用动词+名词的方式，并且命名需要明确指出其作用，动词前缀必须是同函数功能相关的完整动词，如getUserId（），用来取用户Id8) 、所有命名使用小驼峰命名法：第一个单词全部使用小写，其他单词首字母大写，如：myClassName四、css样式规4.1、css样式文件命名规4.1.1、通用样式文件命名规：1) 、整个项目通用的css布局样式文件命名为：layout.css如：通过于整个中使用的div、h1、img等的定义文件2) 、对引用的开源css。