您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 项目/工程管理 > 2014Web前端开发规范文档-v23
Web前端开发规范文档编写陈济晗审核批准时间2014年3月一、规范目的为提高团队协作效率,便于研发人员添加功能及前端后期优化维护,输出高质量的符合W3C标准的页面,特制订此文档。本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出,经讨论决定后可更改。二、基本准则符合web标准,语义化html,结构表现行为分离,兼容性优良。页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。三、合作建议1.在需要修改配置文件的样式修改中,研发人员要积极配合相关前端开发进行修改,页面demo分版本建立文件夹上传至vs中,便于研发人员的获取,不建议使用点对点的文件传输方式。2.不建议研发人员修改或增加样式,禁止把样式写在页面head中(只有某一个页面用到的样式例外),能用class完成的样式就一定不写在行内。3.如果研发人员必须要修改、增加样式,必须把样式写在现有css文件中(common.css除外)专为研发人员注释的区块中,并添加备注,标明修改人姓名、新增时间和解决的问题,并及时告知前端人员,将由前端人员定期整理。如在base.css的文件末尾增加所需代码:/*@ChenChen20140513新增所需的弹出层部分的样式*/.popdiv{...............}四、文件规范1.文件存放位置htmlcssjsimages文件均归档至约定的目录中,参考如下:demoimages存放图片文件media存放多媒体文件,如swf、avi、ram等psd存放交互设计文件scripts存放脚本文件,如js、asp、php等style存放CSS文件2.文件命名命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。a.html文件命名原则按照与交互设计稿相对应的方式为页面命名,即页面与其对应的设计稿使用同一名称。b.css文件命名原则公用组件的样式文件是common.css,因此新建的文件名不能使用common。命名尽量使用小写英文单词,推荐命名见附录1(css文件命名)。c.图片命名原则图片的名称分为头尾两部分,用下划线“_”隔开,头部分表示此图片的大类性质例如:广告、标志、菜单、按钮等等。图片格式仅限于gif、png、jpg。放置在页面顶部的广告、装饰图案等长方形的图片banner如:banner_cnki.gif标志性的图片logo在页面上位置不固定并且带有链接的小图片btn图片精灵(组合图片)sprite在页面上某一个位置连续出现,性质相同的链接栏目的图片menu如:menu_aboutus.gif装饰用的照片pic不带链接表示标题的图片tit鼠标感应效果图片(不能使用sprite的情况)图片名_on、图片名_off如:btn_ok_on.gifd.javascript的命名原则以功能模块名字为.js文件命名,采用小写英文。一般使用短线“-”替代自然语言名称中的空格,用句点“.”分隔表示名称中的从属关系。如:“poptools-core.js”、“pop.fx.pack.js”。五、html编写规范1.文档类型声明DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。我们采用最简单的html5的文档标准。完整代码如下:!DOCTYPEhtml2.定义语言编码为了被浏览器正确解释和通过W3C代码校验,所有的html文档都必须声明它们所使用的编码语言,我们一般使用utf-8(若制作多国语言页面也有可能用Unicode、ISO-8859-1等)。代码如下:metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/3.css引入方式尽量采取link一般在html的页头中用link方式引入css文件。原则上,不允许在页头直接写style。避免使用行内样式。禁止在CSS中使用@import。4.所有标签的元素和属性的名字都必须使用小写为了保证书写规范和提高可读性,要求所有的标签和属性的名字都必须使用小写。例如:BODY必须写成body,“onMouseOver”也必须写成成“onmouseover”。5.所有的属性必须用引号括起来所有属性必须被加引号。例如:height=80必须写成height=80。6.所有的标记必须正确闭合所有标签必须关闭。如果是单独不成对的标签,在标签最后加一个/(即“空格+/”)来关闭,如br/。7.把所有和&特殊符号用编码表示任何小于号(),不是标签的一部分,都必须写成<;任何大于号(),不是标签的一部分,都必须写成>;任何与号(&),不是实体的一部分的,都必须写成&。其他常用的特殊符号参见附录3。8.img的alt属性和a的title属性所有作为内容的img图片都要加上有意义的alt属性,例如:imgsrc=logo.gifwidth=100height=100align=middleboder=0alt=”中国知网”/建议为文字链接a加上title属性,尤其是文字过长采用省略号处理方式的地方,例如:ahref=javascript:void(0);target=_blanktitle=新闻新闻新闻新闻新闻新闻…/a9.给所有属性赋值所有属性都必须有一个值,没有值的就重复本身。例如:tdnowrapinputtype=checkboxname=shirtvalue=mediumchecked必须写成tdnowrap=nowrapinputtype=checkboxname=shirtvalue=mediumchecked=checked/在浏览器里,当我们点击空链接时,它会自动将当前页面重置到首端,从而影响用户正常的阅读内容,我们用代码“javascript:void(0);”代替原来的“#”标记。10.链接地址必须避免重定向例如:href=,即须在URL地址后面加上“/”。11.正确合理使用html元素合理地使用所有的html元素,保持结构语义性。强调和重点强调可以分别用em、strong元素来表示,而不用建议使用i或b;文本段落使用p来表示,在一段完整的文字中请尽量不要使用br/来人工干预分段;对于一列相关的元素,可以使用,ul(无序列表,当列表项目的顺序不是很重要时),ol(有序列表,当列表项目的顺序非常重要时)。dl(定义列表)适用于项目/定义。12.避免过渡使用div和span少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式。13.class/id的命名原则尽量以常见英文单词为准,做到通俗易懂。id用于标识模块或页面的某一个父容器区域,名称必须唯一,不要随意新建id,并且避免class与id重名。id命名方式采用驼峰写法,建议使用多个单词的组合方式,“元素类型”+“功能”的顺序,后一个单词的首字母应大写。例如“搜索框”命名为“iptSearch”、“搜索按钮”命名为“btnSearch”。二级class采用“-”组合书写的模式,命名全都使用小写字母,如按钮组合命名为“btn-group”。14.尽量以css背景形式呈现图片静态页面中,尽量避免出现img标签,除非特殊情况,能用背景实现的必须用背景实现,这样可以有效减少http请求次数。内容图片,如相册图片、新闻图片等可以采用img方式,而那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的辅助图片,都尽量采用css方式显示,如logo、标题图片、列表前缀图片等。15.要采用CSS布局,尽量避免table布局用css布局的一个好处是可以批量对页面进行修改,它能将文档结构和表现层分离开来,减轻工作量和服务器的负荷,增加站点的扩展能力和应用。可以使用表格。只是表格仅仅用于其本意:展示数据列表。而不允许使用表格排版和定位。16.缩进、换行约定网页代码的缩进使用一个Tab。因为网页嵌套标签可能比较多,使用多个空格缩进会导致最深层的代码缩进太多,因而使用Tab键进行缩进。如果一行中代码太长,以不破坏单词结构为原则主动换行。例如:tablewidth=50%cellspacing=0cellpadding=0border=0class=tabletrtdinputname=type=checkboxvalue=/1/tdtd二维码/td/tr/table17.空格书写的约定不要在网页中连续出现多于一个的空格,也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用css的text-indent、padding、margin、hspace、vspace或透明的gif图片来实现。六、css书写规范1.编码方式统一css文件编码统一使用UTF-8编码。2.兼容性要求所有页面默认都针对Firefox进行设计,并兼容ie6.0/7.0/8.0/9.0/10.0以及chrome浏览器。在保证功能正常使用的基本前提下,可以适当针对高级版本浏览器使用css3的一些高级特效。应当避免使用hack,能不能则不用。div{width:600px;height:400px;color:#555;background-color:red;background-color:blue\9;/*所有IE*/background-color:yellow\0;/*IE8hack*/*background-color:blue\9;/*IE6、IE7识别*/_background-color:#CDCDCD;/*ie6*/border:1pxsolid#eee;border-radius:10px;}3.提高样式复用率书写代码前,考虑并提高样式重复使用率,充分利用样式叠加带来的好处。4.对中文进行编码样式表中中文字体名,务必转码成unicode码,以避免编码错误时乱码,如宋体写成“\5B8B\4F53”,微软雅黑写成“\5FAE\8F6F\96C5\9ED1”。常用字体的编码参见附录2。5.每个样式属性值后必须加“;”方便压缩工具“断句”。6.属性编写顺序遵循“布局定位属性--自身属性--文本属性--其他属性--css3属性”。列举和顺序如下说明:布局定位属性:display/visibility/position(top/right/bottom/left/z-index)/float(clear)/overflow自身属性(盒模型&背景):width/height/margin/padding/background/outline/border文本属性:font/color/text-align/text-indent/white-space/content/text-decoration其他属性:list-style/vertical-align/cursor/zoomCSS3属性:opacity/transform/transition/animation/box-shadow/border-radius如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照-webkit-/-moz-/-ms-/-o-/std的顺序进行添加,标准属性写在最后。链接的样式请严格按照(LoVe/HAte)顺序添加:a:link-a:visited-a:hover-a:active7.尽可能使用简写、缩写用16进制表示颜色,颜色取值用小写;颜色尽量用三位字符表示,例如“#aa88dd”写成“#a8d”;如果没有边框时,应该写成“border:none”,不要写成“border:0”;可以缩写的属性,尽量使用缩写形
本文标题:2014Web前端开发规范文档-v23
链接地址:https://www.777doc.com/doc-3005771 .html