搜索
前端开发设计规范目录一、HTML使用规范、页面文件命名规范命名格式为：项目名缩写_所属功能_所属功能子项_....jsp/html…，文件命名下划线不能超过三个，命名尽量使用简短的能明确表明文件用途的英文或者英文简写。、页面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文件前。、HTML元素开发规范1)、代码的结构要保持完整性，单个标签必须要关闭，如：div/div，br/等。2)、子元素要比父元素缩进两个字符。3)、body中的所有内容不能直接书写在body/body标签中，需要在body中嵌入一层div，所有的元素需要写在改div中。4)、除非必要，所有标签元素的样式都需要使用CSS文件来定义。5)、img元素：所有展示用图片都要使用alt属性添加能简要描述图片的文字说明，如首页的广告图片等，必须具有width和height属性。6)、所有Form都要指定action属性，但属性值需要则填写，不需要则留空，method属性统一使用POST；所有form表单都要在提交前对输入的数据前进行验证，验证使用jQueryvalidate插件，书写规范如下：7)、所有不可更改的input元素都要设置readonly属性。8)、按功能模块添加简单明了的注释，在功能模块的开始标明模块开始，结束时标明模块结束，注释单独占一行；模块之间留行间隔便于查看代码。9)、已过时的元素标签使用CSS样式来代替，已过时的标签属性禁止使用，使用CSS样式定义来实现。涉及到跟服务端交互的元素，元素命名应当与服务端程序中定义的对应变量名相同，或使用对象名.变量名的形式。页面上使用到的不涉及与服务端交互的HTML元素其id和name需统一，所有命名使用元素标签的缩写_后缀方式,后缀命名使用小驼峰命名法即第一个单词全部使用小写，其他单词首字母大写，常见元素命名规则如下表所示：text输入框txttxt_userNamebutton按钮btnbtn_checkselect下拉选择selsel_beginTimecheckbox多选项chkchk_departmentNumberdiv标记divdiv_resultsubmit提交按钮subsub_registerhidden隐藏值hdnhdn_userId二、WEB页面开发规范、错误跳转页面的处理400、401、403、404、405、406、407、410、412、414、500、501、502等错误代码使用其相应的统一页面，所有错误信息全部使用中文错误信息，标点符号使用中文半角符号。页面设计与项目功能相匹配，做到简洁友好。、提示信息的处理成功提示信息可以使用弹窗或跳转统一成功页面的方式，成功页面的风格与网站总体风格相同，格式如下：成功：+提示信息+！。、页面的返回所有需要返回上一页的时候使用();不使用(-1)。、提交前数据的判断验证1)、所有由用户输入的数据在提交前都要进行验证。2)、验证方式使用jQueryvalidate插件，需要验证的项：长度验证：默认长度为数据库中数据的最大长度，中文占两个字符，英文占一个字符。为空验证：所有不允许为空的输入内容为空时不允许提交。其他验证：需要根据输入内容的不同设定合适的验证，如Email格式是否正确，身份证号格式是否正确等。3)、验证后发现错误，需要提示明确的错误信息。错误提示信息样式：字体颜色#ff3366，文字前面加红色感叹号小图标。4)、可输入表单需要具有输入内容的提示信息，可使用placeholder属性来定义或者自定义，颜色必须使用灰色，字体比网站使用字体小。、删除操作所有涉及删除的操作，需要用户进行确认之后才能进行操作。、页面中java代码的使用页面中不允许使用%%的方式嵌入java代码。、网站页面布局规范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不超过14K。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。正文内容中文统一使用宋体（可根据需要设定），大小为12px，标题使用14px加粗，不建议使用13px字，英文字体使用Arial和Helvetica/Univers。1)、正文使用灰黑色#333333。2)、超链接可以使用蓝色#1f376d或#425c9e，也可以根据整体页面布局进行调整，整个网站的文字超链接样式要统一。三、javaScript开发规范、javaScript文件命名规范：1)、可通用的javaScript文件：项目名称缩写-文件作用.js。2)、其他javaScript文件：所属功能-文件作用.js。、javaScript开发规范1)、javaScript代码都需要写在javaScript文件中，在页面中进行调用，调用代码除页面加载时需要用到的外全都写在页面最低端。2)、如验证用javaScript代码等，每个页面不同且比较短的，可以写在页面的最底端，从最后一个外部javaScript引入命令后开始。3)、脚本变量开发规范：变量的使用尽量缩小到小的作用域。如循环使用。4)、尽量避免使用全局变量。5)、每一句语句都要以分号“；”结束。6)、函数程序体缩进四个空格，Tab键为4个空格，以Tab键作为缩进单位。7)、函数名与“（”之间不应该有空格，“）”与“{”之间加空格。8)、函数体之间应当加空行。9)、如果代码本身是清楚的，则只需要在函数定义前，添加简单注释说明该函数的作用，若代码本身比较复杂，可在个别语句后添加简洁明了的注释。1)、常量以及全局变量名必须全部使用大写字母。2)、不要再命名中使用“$”和“\”等特殊字符，不要把“_”作为变量名的第一个字符和最后一个字符。3)、变量名必须使用其类型的缩写字符串开始。各种类型的缩写字符串如下：整型变量int长整型变量lng浮点型变量flt双精度变量dbl对象变量obj字符串变量strDate类型变量dtm数组ary临时变量tmp4)、变量名必须采用有意义的单词命名，如：strUserName、lngArrayIndex，以及不要出现数字编号命名，如：value1，value2…5)、如果变量名过长可以使用单词缩写，除了被广泛了解的单词缩写以外，所有使用单词缩写的变量名必须在定义时给出注释，如：6)、参数变量命名必须加前缀：p_。7)、function命名规范：使用动词+名词的方式，并且命名需要明确指出其作用，动词前缀必须是同函数功能相关的完整动词，如getUserId（），用来取用户Id。8)、所有命名使用小驼峰命名法：第一个单词全部使用小写，其他单词首字母大写，如：myClassName。四、css样式规范、css样式文件命名规范1)、整个项目通用的css布局样式文件命名为：。如：通过于整个网站中使用的div、h1、img等的定义文件。2)、对引用的开源css样式重定义的文件命名为：开源的css样式文件名如：为引用的css样式文件，现在对它的.btn重新定义样式内容，这类样式的文件名命名为：开源的css样式文件名。一个项目建议最多使用一个css框架。3)、外部引用的字体css样式文件命名为：font-加引用的字体名字.css，若有多个字体引用则使用：。4)、自定义的响应式布局样式命名为：项目名称缩写–。5)、跨项目通用功能定义的css样式文件命名为：实现的功能.css。6)、为IE浏览器做兼容处理的样式命名为：ie-版本号.css。自定义的样式统一定义在一个文件内，文件命名为：项目名称。1)、以上所有的css样式文件命名必须是小写字母，不允许中文、大写字母及其他特殊字符等。如果有样式版本共存或更新需要保留老版本样式，请在样式文件名后面加上“-版本号”，最新版本样式文件除外，同样版本号只允许是数字或小写字母。2)、以上css文件命名制定的规范只适用普遍的情况，特殊情况下请开发人员根据实际情况自行命名，但必须遵行1)的规定。、css样式文件存放目录规范项目文件存放目录将在后面说明，此处只针对css样式文件存放规定。1)、字体样式文件存放文件夹：/font/，包括字体的源文件。2)、引用的样式保持原来的目录结构，如果有多个引用的样式则按功能新建文件夹来分别存放。3)、其他样式文件不用单独新建文件夹。、css样式定义规范1)、请使用utf-8编码。2)、申明css定义的内容概述或目的，申明编写的人员、更新日期。3)、请谨慎使用@importurl(……)引入其他css样式文件。1)、模块注释必须单独写在一行，简要说明模块的功能。2)、单行注释可以写在单独一行，也可以写在行尾，注释中的每一行长度不超过30个汉字，或者60个英文字符。3)、多行注释必须写在单独行内，即/*后换行写注释，*/单独写一行。4)、用于标注修改、待办等信息的注释以单行注释为基准。5)、对一个代码区块注释（可选），将样式语句分区块并在新行中对其注释。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。10)、class用于标识某一个类型的对象