前端开发设计标准规范文档.doc

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、页

2、面字体 .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、3.2、css 样式内容注释规范 .114.3.3、css 样式定义规范 .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、媒体内容

4、命名规范 .19五、项目文件存放规范 .19六、前端开发规则 .20#*一、HTML 使用规范1.1、页面文件命名规范命名格式为：项目名缩写_所属功能_所属功能子项_. .jsp/html，文件命名下划线不能超过三个，命名尽量使用简短的能明确表明文件用途的英文或者英文简写。1.2、页面 head 部分书写规范1) 、JSP 页面：需要在页面的最开始部分增加以下语句：2) 、HTML 页面：需要在页面的最开始部分增加以下语句：3) 、HTML5 页面：页面添加编码格式可简写为：4) 、响应式的网页添加如下语句： 5) 、title 元素：一般网页必须添加 title 元素，若为框架页面，则可以不

5、写。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 中的所有内容不能直接书写在标签中，

6、需要在 body中嵌入一层 div，所有的元素需要写在改 div 中。4) 、除非必要，所有标签元素的样式都需要使用 CSS 文件来定义。#*5) 、img 元素：所有展示用图片都要使用 alt 属性添加能简要描述图片的文字说明，如首页的广告图片等，必须具有 width 和 height 属性。6) 、所有 Form 都要指定 action 属性，但属性值需要则填写，不需要则留空，method 属性统一使用 POST；所有 form 表单都要在提交前对输入的数据前进行验证，验证使用 jQuery validate 插件，书写规范如下：7) 、所有不可更改的 input 元素都要设置 reado

7、nly 属性。8) 、按功能模块添加简单明了的注释，在功能模块的开始标明模块开始，结束时标明模块结束，注释单独占一行；模块之间留行间隔便于查看代码。9) 、已过时的元素标签使用 CSS 样式来代替，已过时的标签属性禁止使用，使用CSS 样式定义来实现。#*1.3.2、HTML 元素命名规范涉及到跟服务端交互的元素，元素命名应当与服务端程序中定义的对应变量名相同，或使用对象名.变量名的形式。页面上使用到的不涉及与服务端交互的 HTML 元素其 id 和 name 需统一，所有命名使用元素标签的缩写_后缀方式,后缀命名使用小驼峰命名法即第一个单词全部使用小写，其他单词首字母大写，常见元素命名规则如

8、下表所示：HTML元素 缩写 示例text 输入框 txt txt_userNamebutton 按钮 btn btn_checkselect 下拉选择 sel sel_beginTimecheckbox 多选项 chk chk_departmentNumberdiv 标记 div div_resultsubmit 提交按钮 sub sub_registerhidden 隐藏值 hdn hdn_userId二、WEB 页面开发规范2.1、错误跳转页面的处理400、401、403、404、405、406、407、410、412、414 、500 、501、502 等错误代码使用其相应的统一页面，

9、所有错误信息全部使用中文错误信息，标点符号使用中文半角符号。页面设计与项目功能相匹配，做到简洁友好。#*2.2、提示信息的处理成功提示信息可以使用弹窗或跳转统一成功页面的方式，成功页面的风格与网站总体风格相同，格式如下：“成功：“+ 提示信息+“ ！“。2.3、页面的返回 所有需要返回上一页的时候使用 history.back();不使用 history.go(-1)。2.4、提交前数据的判断验证1) 、所有由用户输入的数据在提交前都要进行验证。2) 、验证方式使用 jQuery validate 插件，需要验证的项：长度验证：默认长度为数据库中数据的最大长度，中文占两个字符，英文占一个字符。

10、为空验证：所有不允许为空的输入内容为空时不允许提交。其他验证：需要根据输入内容的不同设定合适的验证，如 Email 格式是否正确，身份证号格式是否正确等。3) 、验证后发现错误，需要提示明确的错误信息。错误提示信息样式：字体颜色#ff3366，文字前面加红色感叹号小图标。#*4) 、可输入表单需要具有输入内容的提示信息，可使用 placeholder 属性来定义或者自定义，颜色必须使用灰色，字体比网站使用字体小。2.5、删除操作所有涉及删除的操作，需要用户进行确认之后才能进行操作。2.6、页面中 java 代码的使用页面中不允许使用的方式嵌入 java 代码。2.7、网站页面布局规范2.7.1

11、、前台页面尺寸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

12、不超过 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、页面字体正文内容中文统一使用宋体（可根据需要设定） ，大小为 12px，标题使用 14px 加粗，不建议使用 13px 字，英文字体使用 Arial 和 Helvetica/Univers。