前端开发设计规范文档.docx

前端开发设计规范文档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三、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需统一，所有命名使用元素标签的缩写_后缀方式,后缀命名使用小驼峰命名法即第一个单词全部使用小写，其它单词首字母大写，常见元素命名规则如下表所示：HTML元素缩写示例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=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。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) 、尽量避免使用全局变量。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，value25) 、如果变量名过长能够使用单词缩写，除了被广泛了解的单词缩写以外，所有使用单词缩写的变量名必须在定义时给出注释，如： 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框架。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) 、引用的样式保持原来的目录结构，如果有多个引用的样式则按功能新建文件夹来分别存放。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) 、用于标注修改、待办等信息的注释以单行注释为基准。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。10) 、class用于标识某一个类型的对象，命名必须言简意赅，尽可能提高代码模块的复用，样式尽量用组合的方式。4.3.4、css样式常见id的命名1) 、页面结构命名结构命名结构命名容器container页头header页面主体main页尾footer侧栏sidebar栏目column内容content/container内容content/container外围布局wrapper左右中left right center2) 、导航命名结构命名结构命名导航nav主导航mainbav子导航subnav顶导航topnav边导航sidebar左导航leftsidebar右导航rightsidebar菜单menu子菜单submenu标题/摘要title/summary3) 、功能命名结构命名结构命名标志logo广告banner登陆login登录条loginbar注册regsiter搜索search功能区shop标题title加入joinus状态status按钮btn滚动scroll标签页tab文章列表list提示信息msg当前的current小技巧tips图标icon注释note指南guild服务service热点hot新闻news下载download投票vote合作伙伴partner友情链接link版权copyright以上样式定义须符合css样式定义规范。4.3.5、css样式常见class的命名1) 、颜色：单独定义颜色时使用颜色的名称，复合颜色用中划线连接。如：.blue或.blue-green。2) 、字体大小：单独定义时使用font-字号；如：.font-12。3) 、对齐样式：使用对齐目标的英文名称。如：.left。4) 、其它样式：功能缩写-当前的作用区域；如果有多层级，则下一层级定义为：上一级的样式名-目标区块命名；在嵌入其它门户网站中的应用，如果门户网站没有特别规定，为了避免样式冲突必须为每一个样式加上前缀，前缀能够按实际情况来设置。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) 、多行书写时每一条规则结束的大括号 必须与规则选择器的第一个字符对齐。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) 、选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。可是一定要避免覆盖全局样式设置。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，你越是使用它，你越是会依赖它。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的倍数；区块展开、弹出为当前父层级上个位增加，禁止层级间盲目攀比。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文件夹目录规范存放。允许在文件夹中按照功能、模块等创立文件夹存放。3) 、多媒体文件放在webRoot目录下media文件夹中按照媒体类型创立文件夹存放。4) 、js文件放在webRoot目录下js文件夹中，具体的按照js文件夹目录规范存放。5) 、与服务端交互的页面放到webRoot目录下WEB-INF目录中，单独创立文件夹存放；将静态页面直接创立文件夹放在webRoot目录下。6) 、外部引用的组件放在webRoot目录下以组件命名的文件夹中，目录结构保持不变。六、前端开发规则1) 、开发前需要编写设计文档、开发工作计划，项目开发按照设计文档进行开发，开发过程中遇到需要修该的问题及时向上级反映，讨论决定再进行修改。2) 、在开发工程每完成一个功能都必须对该功能进行测试，在完成整个项目放到测试服务器之前，开发人员自己必须完整测试，允许不全面的测试，可是不允许存在严重的bug。3) 、本文档编写的规范仅适用于开发人员前端设计的部分，外部引用的文件不在本文档规定范围。