文档介绍：前端代码编写规范规范目的为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档。本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出,经讨论决定后方可更改。基本准则符合WEB标准,语义化HTML,结构化表现行为分离,代码兼容性优良。页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最优最快的解析速度。文件规范Html,Css,Js,Images文件均归档至约定的目录中;目录命名尽可能使用英文,语义化,公用部分和各模块分开。比如:m目录文件夹下,各功能模块各建一个有意义的文件夹;Html文件命名:英文命名,整个网站统一后缀,不要同时出现shtml、shtm、html、htm;本规范采用“.html”。同时将对应界面稿放于同目录中,若界面稿命名为中文,请重命名与html文件同名,以方便后端添加功能时查找对应页面;css文件命名:英文命名,。,,其他页面依实际模块需求命名;Js文件命名:英文命名,。,其他依实际模块需求命名。JS文件必须存入统一的JS目录文件夹;HTML书写规范文档类型声明及编码:统一为html5声明类型<!DOCTYPEhtml>;编码统一为<metacharset=”utf-8″/>,书写时利用IDE实现层次分明的缩进;非特殊情况下样式文件必须外链至<head>…</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;引入样式文件或JavaScript文件时,须略去默认类型声明,写法如下:<link rel=”stylesheet”href=”…”/><style>…</style><script src=”…”></script>引入JS库文件,文件名须包含库名称及版本号及是否为压缩版,比如jquery-;引入插件,文件名格式为库名称+插件名称,;所有编码均遵循xhtml标准,标签&属性&属性命名,必须由小写字母及下划线数字组成,且所有标签必须闭合,包括br(<br/>),hr(<hr/>)等;属性值必须用双引号包括;所有标签和属性名称都必须小写;充分利用无兼容性问题的html自身标签,比如span,em,strong,optgroup,label等等;需要为html元素添加自定义属性的时候,首先要考虑下有没有默认的已有的合适标签去设置,如果没有,可以使用须以”data-”为前缀来添加自定义属性,避免使用”data:”等其他命名方式;语义化html,如:标题根据重要性用h*(同一页面只能有一个h1),段落标记用p,列表用ul,内联元素中不可嵌套块级元素;尽可能减少div嵌套,如:<divclass=”box”><divclass=”e”>欢迎访问XXX,您的用户名是<divclass=”name”>用户名</div></div></div>完全可以用以下代码替代:<divclass=”box”><p>欢迎访问XXX,您的用户名是<span>用户名</span></p></div>书写链接地址时,必须避免重定向,例如:href=/,即须在URL地址后面加上“/”;在页面中尽量避免使用style属性,即style=”…”;必须为含有描述性表单元素(input,textarea)添加label,如:<p>姓名:<inputtype=”text”id=”name”name=”name”/></p>须写成:<p><labelfor=”name”>姓名:</label><inputtype=”text”id=”name”/></p>能以背景形式呈现的图片,尽量写入css样式中;重要图片必须加上alt属性;给重要的元素和截断的元素加上title;给区块代码及重要功能(比如循环)加上注释,方便后台添加功能特殊符号使用:尽可能使用代码替代:比如<(<)&>(&gt;)&空格()&»(»)等等;书写页面过程中,请考虑向后扩展性;class&-8;协作开发及分工:<前端负责人>会根据各个功能模块,同时根据页面相似程序,事先写好大体框架文件,分配给前端人员实现内部结构&表现&行为;<前端负责人>编写,协作开发过程中,每个页面请务必都要引入,此文件包含【CSSReset(重设)】,如:*{padding:0;margin:0;}及【头部底部样式】,此文件不可随意修改;class与id的使用:id是唯一的并是父级的,class是可以重复的并是子级的,所以id仅使用在大的模块上,class可用在重复使用率高及子级中;id原