前端开发设计规范
目录
前端开发设计规范 ..................................................................................................................................... 1
一、HTML 使用规范 ................................................................................................................................ 1
1.1、页面文件命名规范 . ................................................................................................................. 1
1.2、页面head 部分书写规范 ....................................................................................................... 1
1.3、HTML 元素开发规范 ............................................................................................................. 2
1.3.1、HTML 元素书写规范 . ................................................................................................ 2
1.3.2、HTML 元素命名规范 . ................................................................................................ 3
二、WEB 页面开发规范 . ......................................................................................................................... 4
2.1、错误跳转页面的处理 ............................................................................................................. 4
2.2、提示信息的处理 ...................................................................................................................... 4
2.3、页面的返回 . ............................................................................................................................... 4
2.4、提交前数据的判断验证 . ........................................................................................................ 4
2.5、删除操作 .................................................................................................................................... 5
2.6、页面中java 代码的使用 . ........................................................................................................ 5
2.7、网站页面布局规范 . ................................................................................................................. 5
2.7.1、前台页面尺寸 . .............................................................................................................. 5
2.7.2、标准网页广告图标规格（参考） . ......................................................................... 6
2.7.3、页面字体 . ....................................................................................................................... 6
2.7.4、字体颜色 . ....................................................................................................................... 7
三、javaScript 开发规范 . ........................................................................................................................... 7
3.1、javaScript 文件命名规范： .................................................................................................... 7
3.2、javaScript 开发规范 . ................................................................................................................. 7
3.2.1、javaScript 书写规范...................................................................................................... 7
3.2.2、javaScript 命名规范...................................................................................................... 8
四、css 样式规范 . ....................................................................................................................................... 9
4.1、css 样式文件命名规范 ........................................................................................................... 9
4.1.1、通用样式文件命名规范： . ....................................................................................... 9
4.1.2、业务类样式文件命名规范 . ..................................................................................... 10
4.1.3、css 样式文件命名须知 ............................................................................................. 10
4.2、css 样式文件存放目录规范 ................................................................................................ 10
4.3、css 样式定义规范 . .................................................................................................................. 11
4.3.1、css 样式内容顶部注释规范 . ................................................................................... 11
4.3.2、css 样式内容注释规范 ............................................................................................. 11
4.3.3、css 样式定义规范 ...................................................................................................... 12
4.3.4、css 样式常用id 的命名 . ........................................................................................... 13
4.3.5、css 样式常用class 的命名 ....................................................................................... 14
4.4、css 样式书写规范 . .................................................................................................................. 15
4.4.1、css 样式排版规范 ...................................................................................................... 15
4.4.2、css 样式书写风格规范 ............................................................................................. 15
4.4.3、css 样式属性定义顺序规范 . ................................................................................... 16
4.4.4、css 样式其他规范 ...................................................................................................... 16
4.4.5、css 样式 Hack 的使用 .............................................................................................. 17
4.4.6、字体定义规范 . ............................................................................................................ 18
4.4.7、css 样式检测 ............................................................................................................... 18
4.4.8、注意事项 . ..................................................................................................................... 18
4.5、css 样式引用规范 . .................................................................................................................. 19
4.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 属性，如。
1
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插件，书写规范如下：
2
7) 、所有不可更改的input 元素都要设置readonly 属性。
8) 、按功能模块添加简单明了的注释，在功能模块的开始标明模块开始，结束时标明
模块结束，注释单独占一行；模块之间留行间隔便于查看代码。
9) 、已过时的元素标签使用CSS 样式来代替，已过时的标签属性禁止使用，使用CSS
样式定义来实现。
1.3.2、HTML 元素命名规范
涉及到跟服务端交互的元素，元素命名应当与服务端程序中定义的对应变量名相同，或使用对象名. 变量名的形式。
页面上使用到的不涉及与服务端交互的HTML 元素其id 和name 需统一，所有命名使用元素标签的缩写_后缀方式, 后缀命名使用小驼峰命名法即第一个单词全部使用小写，其他单词首字母大写，常见元素命名规则如下表所示：
3
二、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) 、所有由用户输入的数据在提交前都要进行验证。
4
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以内，不会出现水平滚动条，高
5
度同样视版面内容决定。
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) 、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。
6
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 代码都需要写在javaScript 文件中，在页面中进行调用，调用代码
除页面加载时需要用到的外全都写在页面最低端。
2) 、如验证用javaScript 代码等，每个页面不同且比较短的，可以写在页面的最底
端，从最后一个外部javaScript 引入命令后开始。
3) 、脚本变量开发规范：变量的使用尽量缩小到小的作用域。如循环使用。
4) 、尽量避免使用全局变量。
7
5) 、每一句语句都要以分号“；”结束。
6) 、函数程序体缩进四个空格，Tab 键为4个空格，以Tab 键作为缩进单位。 7) 、函数名与“（”之间不应该有空格，“）”与“{”之间加空格。 8) 、函数体之间应当加空行。
9) 、如果代码本身是清楚的，则只需要在函数定义前，添加简单注释说明该函数的作
用，若代码本身比较复杂，可在个别语句后添加简洁明了的注释。
3.2.2、javaScript 命名规范
1) 、常量以及全局变量名必须全部使用大写字母。
2) 、不要再命名中使用“$”和“\”等特殊字符，不要把“_”作为变量名的第一个
字符和最后一个字符。
3) 、变量名必须使用其类型的缩写字符串开始。各种类型的缩写字符串如下：
4) 、变量名必须采用有意义的单词命名，如：strUserName 、lngArrayIndex ，以及不
要出现数字编号命名，如：value1，value2…
5) 、如果变量名过长可以使用单词缩写，除了被广泛了解的单词缩写以外，所有使用
单词缩写的变量名必须在定义时给出注释，如：
8
6) 、参数变量命名必须加前缀：p_。
7) 、function 命名规范：使用动词+名词的方式，并且命名需要明确指出其作用，动
词前缀必须是同函数功能相关的完整动词，如getUserId （），用来取用户Id 。 8) 、所有命名使用小驼峰命名法：第一个单词全部使用小写，其他单词首字母大写，
如：myClassName 。
四、css 样式规范
4.1、css 样式文件命名规范
4.1.1、通用样式文件命名规范：
1) 、整个项目通用的css 布局样式文件命名为：layout.css 。 如：通过于整个网站中使用的div 、h1、img 等的定义文件。
2) 、对引用的开源css 样式重定义的文件命名为：开源的css 样式文件名-reset.css 如：bootstrap.css 为引用的css 样式文件，现在对它的.btn 重新定义样式内容，这类样式的文件名命名为：开源的css 样式文件名-reset.css 。
一个项目建议最多使用一个css 框架。
9
3) 、外部引用的字体css 样式文件命名为：font-加引用的字体名字.css ，若有多个
字体引用则使用：font-style.css 。
4) 、自定义的响应式布局样式命名为：项目名称缩写–responsive.css 。 5) 、跨项目通用功能定义的css 样式文件命名为：实现的功能.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) 、引用的样式保持原来的目录结构，如果有多个引用的样式则按功能新建文件夹来
分别存放。
10
3) 、其他样式文件不用单独新建文件夹。
4.3、css 样式定义规范
4.3.1、css 样式内容顶部注释规范
1) 、请使用utf-8编码。
2) 、申明css 定义的内容概述或目的，申明编写的人员、更新日期。 3) 、请谨慎使用@import url(……) 引入其他css 样式文件。
4.3.2、css 样式内容注释规范
1) 、模块注释必须单独写在一行，简要说明模块的功能。
2) 、单行注释可以写在单独一行，也可以写在行尾，注释中的每一行长度不超过30
个汉字，或者60个英文字符。
3) 、多行注释必须写在单独行内，即/*后换行写注释，*/单独写一行。
4) 、用于标注修改、待办等信息的注释以单行注释为基准。
11
5) 、对一个代码区块注释（可选），将样式语句分区块并在新行中对其注释。
4.3.3、css 样式定义规范
1) 、使用有意义的或通用的id 和class 命名：id 和class 的命名应反映该元素的功
能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。
2) 、id 和class 命名越简短越好，只要足够表达涵义。这样既有助于理解，也能提
高代码效率。
3) 、常用命名（多记多查英文单词）：page 、wrap 、layout 、header(head)、footer(foot、
ft) 、 content(cont)、menu 、nav 、main 、submain 、sidebar(side)、logo 、banner 、 title(tit)、popo(pop)、icon 、note 、btn 、txt 、iblock 、window(win)、tips 等。
4) 、类型选择器避免同时使用标签、id 和class 作为定位一个元素选择器，可以使
用class 层级来代替。
5) 、规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或下划线。 6) 、命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合。 7) 、命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS 命名规则。 8) 、不允许通过1、2、3等序号进行命名，避免class 与id 重名。
9) 、id 用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id 。
12
10) 、class 用于标识某一个类型的对象，命名必须言简意赅，尽可能提高代码模块的
复用，样式尽量用组合的方式。
4.3.4、css 样式常用id 的命名
1) 、页面结构命名
2) 、导航命名
3) 、功能命名
13
以上样式定义须符合css 样式定义规范。
4.3.5、css 样式常用class 的命名
1) 、颜色：单独定义颜色时使用颜色的名称，复合颜色用中划线连接。如：.blue
或.blue-green 。
2) 、字体大小：单独定义时使用font-字号；如：.font-12。 3) 、对齐样式：使用对齐目标的英文名称。如：.left 。
4) 、其他样式：功能缩写-当前的作用区域；如果有多层级，则下一层级定义为：上
一级的样式名-目标区块命名；在嵌入其他门户网站中的应用，如果门户网站没有特别规定，为了避免样式冲突必须为每一个样式加上前缀，前缀可以按实际情况来设置。
14
4.4、css 样式书写规范
4.4.1、css 样式排版规范
1) 、使用一次tab 键或者4个空格作为缩进。
2) 、规则可以写成单行，或者多行，但是整个文件内的规则排版必须统一。 3) 、对于可以发布的网站样式建议进行压缩，直接使用网上的css 格式化工具进行压
缩。
4.4.2、css 样式书写风格规范
1) 、如果是在html 页面中定义的css 样式，则必须写成单行，不建议在html 页面中
定义css 样式。
2) 、每一条规则的大括号 { 前后加空格，每一条规则结束的大括号 } 前加空格。 3) 、属性名冒号之前不加空格，冒号之后加空格。 4) 、每一个属性值后必须添加分号; 并且分号后空格。
5) 、多个selector 共用一个样式集，10个以内的selector 必须写成多行形式，10
个以上的selector 写成一行。
6) 、多行书写时每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐。
15
4.4.3、css 样式属性定义顺序规范
1) 、显示属性：display/list-style/position/float/clear …。 2) 、自身属性（盒模型）：width/height/margin/padding/border。 3) 、背景：background ；行高：line-height 。
4) 文本属性：color/font/text-decoration/text-align/text-indent/ white-space 。 5) 、其他：cursor/z-index/zoom/overflow。
6) 、CSS3属性：transform/transition/animation/box-shadow/border-radius。 7) 、使用CSS3的属性，如果有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms-
/ -o-的顺序进行添加，标准属性写在最后。
8) 、属性定义顺序规范不作严格要求，但在使用css3时最好加上前缀。
4.4.4、css 样式其他规范
1) 、使用单引号，不允许使用双引号。
2) 、每个声明结束都应该带一个分号，不管是不是最后一个声明。 3) 、除16进制颜色和字体设置外，CSS 文件中的所有的代码都应该小写。 4) 、选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。
但是一
16
定要避免覆盖全局样式设置。
5) 、background 、font 、margin 、padding 、border 等可以缩写的属性，尽量使用缩
写形式。
6) 、在css 中谨慎使用*选择符。
7) 、除非必须，否则，一般有class 或id 的，不需要再写上元素对应的tag 。 8) 、0后面不需要单位，比如0px 可以省略成0，0.8px 可以省略成.8px 。 9) 、如果是16进制表示颜色，则颜色取值字母应该大写；如果可以，颜色尽量用三
位字符表示，例如#AABBCC写成#ABC。
10) 、如果没有边框时，不要写成border:0，应该写成border:none。 11) 、在保持代码解耦的前提下，尽量合并重复的样式。
12) 、除了重置浏览器默认样式外，禁止直接为html tag添加css 样式设置。
4.4.5、css 样式 Hack的使用
Css hack仅仅是为了兼容浏览器对css 的解析而设置，请不要使用浏览器检测和CSS Hacks 作为解决浏览器解析差异的首选方式，但应被视为最后的手段。允许使用hack 只会带来更多的hack ，你越是使用它，你越是会依赖它。
17
4.4.6、字体定义规范
1) 、为了防止文件合并及编码转换时造成问题，建议将样式中文字体名字改成对应的
英文名字，如：黑体(SimHei) 、宋体(SimSun)、微软雅黑 (Microsoft Yahei ，几个单词中间有空格组成的必须加引号) ，详细介绍参详附件。
2) 、字体粗细采用具体数值，粗体bold 写为700，正常normal 写为400。
3) 、font-size 必须以px 或pt 为单位，推荐用px （注：pt 为打印版字体大小设置），
不允许使用small/medium/large/x-large/xx-large等不确定的值。
4) 、为了对font-family 取值进行统一，更好的支持各个操作系统上各个浏览器的兼
容性，font-family 不允许在业务代码中随意设置。
4.4.7、css 样式检测
写好一份css 样式文件之后，如果不完全确定定义是否符合W3C 标准，可借助在线检测工具来检测。常用的测试工具：W3C CSS validator、CSS Lint等不限制。
4.4.8、注意事项
1) 、不要轻易改动全站级CSS 和通用CSS 库。改动后，要经过全面测试。
2) 、避免在CSS 中使用expression ，避免使用filter ，尽量不要在CSS 中使
用!important 。
3) 、避免过小的背景图片平铺，允许使用1px 的纯色或渐变色图片平铺作为背景。
4) 、层级(z-index)必须清晰明确，页面弹窗、气泡为最高级（最高级为999），不同
弹窗气泡之间可在三位数之间调整；普通区块为10-90内10的倍数；区块展开、
18
弹出为当前父层级上个位增加，禁止层级间盲目攀比。
5) 、背景图片请尽可能使用sprite 技术, 减小http 请求, 考虑到多人协作开发,
sprite 按照模块、业务、页面来划分均可。
4.5、css 样式引用规范
1) 、除必需的情况下，所有的css 样式都定义在单独的css 文件中作为外联样式使用
link 引用到页面，当前页用不到的样式禁止在页面上引用。
2) 、在页面中禁止使用@import来关联其他外部样式。
4.6、媒体内容命名规范
1) 、图片优先考虑.png 格式，请尽可能使用sprite 技术，同一作用的图片放在以功
能命名的文件夹中。图片以“功能缩写-子功能缩写”来命名；轮播图片可以用功能缩写-数字来命名。
2) 、视频、音频、flash 文件以语义明确的英文来命名。
3) 、所有的多媒体文件命名不允许出现中文、大写字母和特殊字符。
五、项目文件存放规范
1) 、所有css 样式文件放在webRoot 目录下的css 文件内。
2) 、所有图片放在webRoot 目录下的images 文件夹中，引用样式中用到的图片允许
放到css 目录下按照css 文件夹目录规范存放。允许在文件夹中按照功能、模块等
19
创建文件夹存放。
3) 、多媒体文件放在webRoot 目录下media 文件夹中按照媒体类型创建文件夹存放。
4) 、js 文件放在webRoot 目录下js 文件夹中，具体的按照js 文件夹目录规范存放。
5) 、与服务端交互的页面放到webRoot 目录下WEB-INF 目录中，单独创建文件夹存放；
将静态页面直接创建文件夹放在webRoot 目录下。
6) 、外部引用的组件放在webRoot 目录下以组件命名的文件夹中，目录结构保持不变。
六、前端开发规则
1) 、开发前需要编写设计文档、开发工作计划，项目开发按照设计文档进行开发，开
发过程中遇到需要修该的问题及时向上级反映，讨论决定再进行修改。
2) 、在开发工程每完成一个功能都必须对该功能进行测试，在完成整个项目放到测试
服务器之前，开发人员自己必须完整测试，允许不全面的测试，但是不允许存在严重的bug 。
3) 、本文档编写的规范仅适用于开发人员前端设计的部分，外部引用的文件不在本文
档规定范围。
20
前端开发设计规范
目录
前端开发设计规范 ..................................................................................................................................... 1
一、HTML 使用规范 ................................................................................................................................ 1
1.1、页面文件命名规范 . ................................................................................................................. 1
1.2、页面head 部分书写规范 ....................................................................................................... 1
1.3、HTML 元素开发规范 ............................................................................................................. 2
1.3.1、HTML 元素书写规范 . ................................................................................................ 2
1.3.2、HTML 元素命名规范 . ................................................................................................ 3
二、WEB 页面开发规范 . ......................................................................................................................... 4
2.1、错误跳转页面的处理 ............................................................................................................. 4
2.2、提示信息的处理 ...................................................................................................................... 4
2.3、页面的返回 . ............................................................................................................................... 4
2.4、提交前数据的判断验证 . ........................................................................................................ 4
2.5、删除操作 .................................................................................................................................... 5
2.6、页面中java 代码的使用 . ........................................................................................................ 5
2.7、网站页面布局规范 . ................................................................................................................. 5
2.7.1、前台页面尺寸 . .............................................................................................................. 5
2.7.2、标准网页广告图标规格（参考） . ......................................................................... 6
2.7.3、页面字体 . ....................................................................................................................... 6
2.7.4、字体颜色 . ....................................................................................................................... 7
三、javaScript 开发规范 . ........................................................................................................................... 7
3.1、javaScript 文件命名规范： .................................................................................................... 7
3.2、javaScript 开发规范 . ................................................................................................................. 7
3.2.1、javaScript 书写规范...................................................................................................... 7
3.2.2、javaScript 命名规范...................................................................................................... 8
四、css 样式规范 . ....................................................................................................................................... 9
4.1、css 样式文件命名规范 ........................................................................................................... 9
4.1.1、通用样式文件命名规范： . ....................................................................................... 9
4.1.2、业务类样式文件命名规范 . ..................................................................................... 10
4.1.3、css 样式文件命名须知 ............................................................................................. 10
4.2、css 样式文件存放目录规范 ................................................................................................ 10
4.3、css 样式定义规范 . .................................................................................................................. 11
4.3.1、css 样式内容顶部注释规范 . ................................................................................... 11
4.3.2、css 样式内容注释规范 ............................................................................................. 11
4.3.3、css 样式定义规范 ...................................................................................................... 12
4.3.4、css 样式常用id 的命名 . ........................................................................................... 13
4.3.5、css 样式常用class 的命名 ....................................................................................... 14
4.4、css 样式书写规范 . .................................................................................................................. 15
4.4.1、css 样式排版规范 ...................................................................................................... 15
4.4.2、css 样式书写风格规范 ............................................................................................. 15
4.4.3、css 样式属性定义顺序规范 . ................................................................................... 16
4.4.4、css 样式其他规范 ...................................................................................................... 16
4.4.5、css 样式 Hack 的使用 .............................................................................................. 17
4.4.6、字体定义规范 . ............................................................................................................ 18
4.4.7、css 样式检测 ............................................................................................................... 18
4.4.8、注意事项 . ..................................................................................................................... 18
4.5、css 样式引用规范 . .................................................................................................................. 19
4.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 属性，如。
1
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插件，书写规范如下：
2
7) 、所有不可更改的input 元素都要设置readonly 属性。
8) 、按功能模块添加简单明了的注释，在功能模块的开始标明模块开始，结束时标明
模块结束，注释单独占一行；模块之间留行间隔便于查看代码。
9) 、已过时的元素标签使用CSS 样式来代替，已过时的标签属性禁止使用，使用CSS
样式定义来实现。
1.3.2、HTML 元素命名规范
涉及到跟服务端交互的元素，元素命名应当与服务端程序中定义的对应变量名相同，或使用对象名. 变量名的形式。
页面上使用到的不涉及与服务端交互的HTML 元素其id 和name 需统一，所有命名使用元素标签的缩写_后缀方式, 后缀命名使用小驼峰命名法即第一个单词全部使用小写，其他单词首字母大写，常见元素命名规则如下表所示：
3
二、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) 、所有由用户输入的数据在提交前都要进行验证。
4
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以内，不会出现水平滚动条，高
5
度同样视版面内容决定。
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) 、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。
6
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 代码都需要写在javaScript 文件中，在页面中进行调用，调用代码
除页面加载时需要用到的外全都写在页面最低端。
2) 、如验证用javaScript 代码等，每个页面不同且比较短的，可以写在页面的最底
端，从最后一个外部javaScript 引入命令后开始。
3) 、脚本变量开发规范：变量的使用尽量缩小到小的作用域。如循环使用。
4) 、尽量避免使用全局变量。
7
5) 、每一句语句都要以分号“；”结束。
6) 、函数程序体缩进四个空格，Tab 键为4个空格，以Tab 键作为缩进单位。 7) 、函数名与“（”之间不应该有空格，“）”与“{”之间加空格。 8) 、函数体之间应当加空行。
9) 、如果代码本身是清楚的，则只需要在函数定义前，添加简单注释说明该函数的作
用，若代码本身比较复杂，可在个别语句后添加简洁明了的注释。
3.2.2、javaScript 命名规范
1) 、常量以及全局变量名必须全部使用大写字母。
2) 、不要再命名中使用“$”和“\”等特殊字符，不要把“_”作为变量名的第一个
字符和最后一个字符。
3) 、变量名必须使用其类型的缩写字符串开始。各种类型的缩写字符串如下：
4) 、变量名必须采用有意义的单词命名，如：strUserName 、lngArrayIndex ，以及不
要出现数字编号命名，如：value1，value2…
5) 、如果变量名过长可以使用单词缩写，除了被广泛了解的单词缩写以外，所有使用
单词缩写的变量名必须在定义时给出注释，如：
8
6) 、参数变量命名必须加前缀：p_。
7) 、function 命名规范：使用动词+名词的方式，并且命名需要明确指出其作用，动
词前缀必须是同函数功能相关的完整动词，如getUserId （），用来取用户Id 。 8) 、所有命名使用小驼峰命名法：第一个单词全部使用小写，其他单词首字母大写，
如：myClassName 。
四、css 样式规范
4.1、css 样式文件命名规范
4.1.1、通用样式文件命名规范：
1) 、整个项目通用的css 布局样式文件命名为：layout.css 。 如：通过于整个网站中使用的div 、h1、img 等的定义文件。
2) 、对引用的开源css 样式重定义的文件命名为：开源的css 样式文件名-reset.css 如：bootstrap.css 为引用的css 样式文件，现在对它的.btn 重新定义样式内容，这类样式的文件名命名为：开源的css 样式文件名-reset.css 。
一个项目建议最多使用一个css 框架。
9
3) 、外部引用的字体css 样式文件命名为：font-加引用的字体名字.css ，若有多个
字体引用则使用：font-style.css 。
4) 、自定义的响应式布局样式命名为：项目名称缩写–responsive.css 。 5) 、跨项目通用功能定义的css 样式文件命名为：实现的功能.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) 、引用的样式保持原来的目录结构，如果有多个引用的样式则按功能新建文件夹来
分别存放。
10
3) 、其他样式文件不用单独新建文件夹。
4.3、css 样式定义规范
4.3.1、css 样式内容顶部注释规范
1) 、请使用utf-8编码。
2) 、申明css 定义的内容概述或目的，申明编写的人员、更新日期。 3) 、请谨慎使用@import url(……) 引入其他css 样式文件。
4.3.2、css 样式内容注释规范
1) 、模块注释必须单独写在一行，简要说明模块的功能。
2) 、单行注释可以写在单独一行，也可以写在行尾，注释中的每一行长度不超过30
个汉字，或者60个英文字符。
3) 、多行注释必须写在单独行内，即/*后换行写注释，*/单独写一行。
4) 、用于标注修改、待办等信息的注释以单行注释为基准。
11
5) 、对一个代码区块注释（可选），将样式语句分区块并在新行中对其注释。
4.3.3、css 样式定义规范
1) 、使用有意义的或通用的id 和class 命名：id 和class 的命名应反映该元素的功
能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。
2) 、id 和class 命名越简短越好，只要足够表达涵义。这样既有助于理解，也能提
高代码效率。
3) 、常用命名（多记多查英文单词）：page 、wrap 、layout 、header(head)、footer(foot、
ft) 、 content(cont)、menu 、nav 、main 、submain 、sidebar(side)、logo 、banner 、 title(tit)、popo(pop)、icon 、note 、btn 、txt 、iblock 、window(win)、tips 等。
4) 、类型选择器避免同时使用标签、id 和class 作为定位一个元素选择器，可以使
用class 层级来代替。
5) 、规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或下划线。 6) 、命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合。 7) 、命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS 命名规则。 8) 、不允许通过1、2、3等序号进行命名，避免class 与id 重名。
9) 、id 用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id 。
12
10) 、class 用于标识某一个类型的对象，命名必须言简意赅，尽可能提高代码模块的
复用，样式尽量用组合的方式。
4.3.4、css 样式常用id 的命名
1) 、页面结构命名
2) 、导航命名
3) 、功能命名
13
以上样式定义须符合css 样式定义规范。
4.3.5、css 样式常用class 的命名
1) 、颜色：单独定义颜色时使用颜色的名称，复合颜色用中划线连接。如：.blue
或.blue-green 。
2) 、字体大小：单独定义时使用font-字号；如：.font-12。 3) 、对齐样式：使用对齐目标的英文名称。如：.left 。
4) 、其他样式：功能缩写-当前的作用区域；如果有多层级，则下一层级定义为：上
一级的样式名-目标区块命名；在嵌入其他门户网站中的应用，如果门户网站没有特别规定，为了避免样式冲突必须为每一个样式加上前缀，前缀可以按实际情况来设置。
14
4.4、css 样式书写规范
4.4.1、css 样式排版规范
1) 、使用一次tab 键或者4个空格作为缩进。
2) 、规则可以写成单行，或者多行，但是整个文件内的规则排版必须统一。 3) 、对于可以发布的网站样式建议进行压缩，直接使用网上的css 格式化工具进行压
缩。
4.4.2、css 样式书写风格规范
1) 、如果是在html 页面中定义的css 样式，则必须写成单行，不建议在html 页面中
定义css 样式。
2) 、每一条规则的大括号 { 前后加空格，每一条规则结束的大括号 } 前加空格。 3) 、属性名冒号之前不加空格，冒号之后加空格。 4) 、每一个属性值后必须添加分号; 并且分号后空格。
5) 、多个selector 共用一个样式集，10个以内的selector 必须写成多行形式，10
个以上的selector 写成一行。
6) 、多行书写时每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐。
15
4.4.3、css 样式属性定义顺序规范
1) 、显示属性：display/list-style/position/float/clear …。 2) 、自身属性（盒模型）：width/height/margin/padding/border。 3) 、背景：background ；行高：line-height 。
4) 文本属性：color/font/text-decoration/text-align/text-indent/ white-space 。 5) 、其他：cursor/z-index/zoom/overflow。
6) 、CSS3属性：transform/transition/animation/box-shadow/border-radius。 7) 、使用CSS3的属性，如果有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms-
/ -o-的顺序进行添加，标准属性写在最后。
8) 、属性定义顺序规范不作严格要求，但在使用css3时最好加上前缀。
4.4.4、css 样式其他规范
1) 、使用单引号，不允许使用双引号。
2) 、每个声明结束都应该带一个分号，不管是不是最后一个声明。 3) 、除16进制颜色和字体设置外，CSS 文件中的所有的代码都应该小写。 4) 、选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。
但是一
16
定要避免覆盖全局样式设置。
5) 、background 、font 、margin 、padding 、border 等可以缩写的属性，尽量使用缩
写形式。
6) 、在css 中谨慎使用*选择符。
7) 、除非必须，否则，一般有class 或id 的，不需要再写上元素对应的tag 。 8) 、0后面不需要单位，比如0px 可以省略成0，0.8px 可以省略成.8px 。 9) 、如果是16进制表示颜色，则颜色取值字母应该大写；如果可以，颜色尽量用三
位字符表示，例如#AABBCC写成#ABC。
10) 、如果没有边框时，不要写成border:0，应该写成border:none。 11) 、在保持代码解耦的前提下，尽量合并重复的样式。
12) 、除了重置浏览器默认样式外，禁止直接为html tag添加css 样式设置。
4.4.5、css 样式 Hack的使用
Css hack仅仅是为了兼容浏览器对css 的解析而设置，请不要使用浏览器检测和CSS Hacks 作为解决浏览器解析差异的首选方式，但应被视为最后的手段。允许使用hack 只会带来更多的hack ，你越是使用它，你越是会依赖它。
17
4.4.6、字体定义规范
1) 、为了防止文件合并及编码转换时造成问题，建议将样式中文字体名字改成对应的
英文名字，如：黑体(SimHei) 、宋体(SimSun)、微软雅黑 (Microsoft Yahei ，几个单词中间有空格组成的必须加引号) ，详细介绍参详附件。
2) 、字体粗细采用具体数值，粗体bold 写为700，正常normal 写为400。
3) 、font-size 必须以px 或pt 为单位，推荐用px （注：pt 为打印版字体大小设置），
不允许使用small/medium/large/x-large/xx-large等不确定的值。
4) 、为了对font-family 取值进行统一，更好的支持各个操作系统上各个浏览器的兼
容性，font-family 不允许在业务代码中随意设置。
4.4.7、css 样式检测
写好一份css 样式文件之后，如果不完全确定定义是否符合W3C 标准，可借助在线检测工具来检测。常用的测试工具：W3C CSS validator、CSS Lint等不限制。
4.4.8、注意事项
1) 、不要轻易改动全站级CSS 和通用CSS 库。改动后，要经过全面测试。
2) 、避免在CSS 中使用expression ，避免使用filter ，尽量不要在CSS 中使
用!important 。
3) 、避免过小的背景图片平铺，允许使用1px 的纯色或渐变色图片平铺作为背景。
4) 、层级(z-index)必须清晰明确，页面弹窗、气泡为最高级（最高级为999），不同
弹窗气泡之间可在三位数之间调整；普通区块为10-90内10的倍数；区块展开、
18
弹出为当前父层级上个位增加，禁止层级间盲目攀比。
5) 、背景图片请尽可能使用sprite 技术, 减小http 请求, 考虑到多人协作开发,
sprite 按照模块、业务、页面来划分均可。
4.5、css 样式引用规范
1) 、除必需的情况下，所有的css 样式都定义在单独的css 文件中作为外联样式使用
link 引用到页面，当前页用不到的样式禁止在页面上引用。
2) 、在页面中禁止使用@import来关联其他外部样式。
4.6、媒体内容命名规范
1) 、图片优先考虑.png 格式，请尽可能使用sprite 技术，同一作用的图片放在以功
能命名的文件夹中。图片以“功能缩写-子功能缩写”来命名；轮播图片可以用功能缩写-数字来命名。
2) 、视频、音频、flash 文件以语义明确的英文来命名。
3) 、所有的多媒体文件命名不允许出现中文、大写字母和特殊字符。
五、项目文件存放规范
1) 、所有css 样式文件放在webRoot 目录下的css 文件内。
2) 、所有图片放在webRoot 目录下的images 文件夹中，引用样式中用到的图片允许
放到css 目录下按照css 文件夹目录规范存放。允许在文件夹中按照功能、模块等
19
创建文件夹存放。
3) 、多媒体文件放在webRoot 目录下media 文件夹中按照媒体类型创建文件夹存放。
4) 、js 文件放在webRoot 目录下js 文件夹中，具体的按照js 文件夹目录规范存放。
5) 、与服务端交互的页面放到webRoot 目录下WEB-INF 目录中，单独创建文件夹存放；
将静态页面直接创建文件夹放在webRoot 目录下。
6) 、外部引用的组件放在webRoot 目录下以组件命名的文件夹中，目录结构保持不变。
六、前端开发规则
1) 、开发前需要编写设计文档、开发工作计划，项目开发按照设计文档进行开发，开
发过程中遇到需要修该的问题及时向上级反映，讨论决定再进行修改。
2) 、在开发工程每完成一个功能都必须对该功能进行测试，在完成整个项目放到测试
服务器之前，开发人员自己必须完整测试，允许不全面的测试，但是不允许存在严重的bug 。
3) 、本文档编写的规范仅适用于开发人员前端设计的部分，外部引用的文件不在本文
档规定范围。
20