前端代码规范.docx

前端代码规范一范围本文档对WEB前端编码进行规范，目的是为兼容多种浏览器，并保证WEB前端编码和表现的一致性，提高代码的可维护性。二总则语言编码统一使用UTF-8说明：Html在HTTP Content-type定义CSS部分：编码方式使用@charset ‘UTF-8’JavaScript部分：新建一个JS文件时，使用编辑器将文档编码方式保存为UTF-8合理添加注释，避免使用中文注释文件及文件夹命名统一使用’-’中划线命名法HTML/CSS/JavaScript 文件归档至相应约定的目录中三HTML 部分在文档顶部注日月文档类型定义以html为根元素，且添加命名空间语言编码统一使用UTF-8所有标签的元素和属性的名字都使用小写所有的标记都必须有一个相应的结束标记所有的标记都必须合理嵌套例A:不能包含其它的a 元素Pre:不能包含其他Img object big small sub supButton:不能包含其它input select textarea label button form fieldset iframe isindexLabel:不能包含其它的label元素Form:不能包含其他的form元素所有属性用引号括起来，引号的类型要保持一致所有特殊符号用转义编码表示说明：如常用 转义编码（t;） 转义编码（lt;）9、禁示属性的缩写说明:错误写法input type=”checkbox” checked /正确写法input type=”checkbox” checked=“checked” /不能用断行或空格将属性分开注释内容不要使用“--”，用等号或者空格替代。说明：“--”作为注释只能出现在HTML注释的开头和结束，否者会影响注释的内容。为id和class命名时第一个字符不能是数字。说明：W3C XHTML1.0标准中规定，在id或class中，第一个字符是不能是数字的，必须是字母。img标签中，必须包括alt元素页元元素的ID要唯一，name可以不唯一四CSS部分1样式表的语法格式与书写格式必须符合规范2编码统一为utf-8 @charset “utf-8”3除选择符名称外，统一使用小写4用中划线规则命名选择符（.product-list）5使用px或者%相对尺6样式表按照页面类型，分为几个文件来组织1简短期的确CSS reset2通用户CSS样式库3网站CSS样式库4网站所有CSS Sprite 合并项5网络站通用小图标样式集6网站通用导航样式7网站通用按钮样式8网站通用选项卡样式9网站通用文本框等控件样式10网站通用分页样式及其他通用样式11网站公共主结构样式12单页面的一些细节与样式7 CSS属性书写顺序,建议遵循Positioning(定位) - Box model（盒模型） - typographic （排版）-visual（视觉） -other/* Positioning */position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;/* Box-model */display:block;float:right;width:100px;height:100px;/* Typography */font:normal13pxHelvetica Neue,sans-serif;line-height:1.5;color:#333;text-align:center;/* Visual */background-color:#f5f5f5;border:1pxsolid#e5e5e5;border-radius:3px;/* Misc */opacity:1;8在样式表文件的起始位置给通配符添加样式9尽量利继承属性，避免重复样式定义10统一使用推荐的字体定义写法Body{font-family:’segoe UI’,’simsun’,sans-serif;}11合理添加注释，使代码清晰易读12尽量少用偏僻不常用和影响性能的属性13使用table标签时，请不要用widht、height、cellspacing、cellpadding等table属性直接定义表现，应尽可能的利用table自身私有的属性分离结构与表现，如：thead、tr、th、td、tbody、tfoot、colgroup、scope。五JavaScript部分1js代码应独立保存在后缀为.js的文件中2 缩进3 每行长度说明：避免每行超过80个字符，当一条语句一行写不下时，请考虑折行，在运算符号，最好是逗号后换行，在运算符后换行可以减少因为复制粘贴产生的错误被分号掩盖的几率。4.每一行应该只包括一个语句。每行语句都必须以分号作为结束标志5 if、else、else if、