2014Web前端开发规范文档

1、Web前端开发规范文档编 写 陈 济 晗 审 核 批 准 时 间 2014 年 3 月 1、 规范目的为提高团队协作效率，便于研发人员添加功能及前端后期优化维护，输出高质量的符合W3C标准的页面，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出，经讨论决定后可更改。2、 基本准则符合web标准，语义化html，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。3、 合作建议1 在需要修改配置文件的样式修改中，研发人员要积极配合相关前端开发进行修改，页面demo分版

2、本建立文件夹上传至vs中，便于研发人员的获取，不建议使用点对点的文件传输方式。2 不建议研发人员修改或增加样式，禁止把样式写在页面head中（只有某一个页面用到的样式例外），能用class完成的样式就一定不写在行内。3 如果研发人员必须要修改、增加样式，必须把样式写在现有css文件中（common.css除外）专为研发人员注释的区块中，并添加备注，标明修改人姓名、新增时间和解决的问题，并及时告知前端人员，将由前端人员定期整理。如在base.css的文件末尾增加所需代码：/*ChenChen 新增所需的弹出层部分的样式*/.popdiv .4、 文件规范1 文件存放位置html cssjs im

3、ages文件均归档至约定的目录中，参考如下：demoimages存放图片文件media存放多媒体文件，如swf、avi、ram等psd存放交互设计文件scripts存放脚本文件，如js、asp、php等style存放CSS文件2 文件命名 命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。a. html文件命名原则按照与交互设计稿相对应的方式为页面命名，即页面与其对应的设计稿使用同一名称。b. css文件命名原则公用组件的样式文件是co

4、mmon.css，因此新建的文件名不能使用common。命名尽量使用小写英文单词，推荐命名见附录1（css文件命名）。c. 图片命名原则图片的名称分为头尾两部分，用下划线“_”隔开，头部分表示此图片的大类性质例如：广告、标志、菜单、按钮等等。图片格式仅限于gif、png、jpg。放置在页面顶部的广告、装饰图案等长方形的图片banner如：banner_cnki.gif标志性的图片logo在页面上位置不固定并且带有链接的小图片btn图片精灵（组合图片）sprite在页面上某一个位置连续出现，性质相同的链接栏目的图片menu如：menu_aboutus.gif装饰用的照片pic不带链接表示标题的图

5、片tit鼠标感应效果图片（不能使用sprite的情况）图片名_on、图片名_off如：btn_ok_on.gifd. javascript的命名原则以功能模块名字为.js文件命名，采用小写英文。一般使用短线“-”替代自然语言名称中的空格，用句点“.”分隔表示名称中的从属关系。如：“poptools-core.js”、“pop.fx.pack.js”。5、 html编写规范1 文档类型声明DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。我们采用最简单的html5的文档标准。完整代码如下：2 定义语言编码为了被浏览器正确解释和通过W3C代码校验，所有的html文档都必须

6、声明它们所使用的编码语言，我们一般使用utf-8（若制作多国语言页面也有可能用Unicode、ISO-8859-1等）。代码如下：3 css引入方式尽量采取link一般在html的页头中用link方式引入css文件。原则上，不允许在页头直接写style。避免使用行内样式。禁止在CSS中使用import。4 所有标签的元素和属性的名字都必须使用小写为了保证书写规范和提高可读性，要求所有的标签和属性的名字都必须使用小写。例如：必须写成，“onMouseOver”也必须写成成“onmouseover”。5 所有的属性必须用引号括起来所有属性必须被加引号。例如： 必须写成。6 所有的标记必须正确闭合所

7、有标签必须关闭。如果是单独不成对的标签，在标签最后加一个 /（即“空格+/”）来关闭，如。7 把所有和&特殊符号用编码表示任何小于号（），不是标签的一部分，都必须写成>；任何与号（&），不是实体的一部分的，都必须写成&。其他常用的特殊符号参见附录3。8 img的alt属性和a的title属性所有作为内容的img图片都要加上有意义的alt属性，例如：建议为文字链接a加上title属性，尤其是文字过长采用省略号处理方式的地方，例如：新闻新闻9 给所有属性赋值 所有属性都必须有一个值，没有值的就重复本身。例如： 必须写成 在浏览器里，当我们点击空链接时，它会自动将当前页面重置到首端，从而影

8、响用户正常的阅读内容，我们用代码“javascript:void(0);”代替原来的“#”标记。10 链接地址必须避免重定向例如：href=/，即须在URL地址后面加上“/”。11 正确合理使用html元素合理地使用所有的html元素，保持结构语义性。u 强调和重点强调可以分别用、元素来表示，而不用建议使用 或；u 文本段落使用 来表示，在一段完整的文字中请尽量不要使用 来人工干预分段；u 对于一列相关的元素，可以使用， （无序列表，当列表项目的顺序不是很重要时），（有序列表，当列表项目的顺序非常重要时）。u （定义列表）适用于项目/定义。12 避免过渡使用d

9、iv和span少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式。13 class/id的命名原则尽量以常见英文单词为准，做到通俗易懂。id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id，并且避免class与id重名。id命名方式采用驼峰写法，建议使用多个单词的组合方式，“元素类型”+“功能”的顺序，后一个单词的首字母应大写。例如“搜索框”命名为“iptSearch”、“搜索按钮”命名为 “btnSearch”。二级class采用“-”组合书写的模式，命名全都使用小写字母，如按钮组合命名为“btn-group”。14 尽量以css背景形式呈现

10、图片静态页面中，尽量避免出现img标签，除非特殊情况，能用背景实现的必须用背景实现，这样可以有效减少http请求次数。内容图片，如相册图片、新闻图片等可以采用img方式，而那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的辅助图片,都尽量采用css方式显示，如logo、标题图片、列表前缀图片等。15 要采用CSS布局，尽量避免table布局u 用css布局的一个好处是可以批量对页面进行修改，它能将文档结构和表现层分离开来，减轻工作量和服务器的负荷，增加站点的扩展能力和应用。u 可以使用表格。只是表格仅仅用于其本意：展示数据列表。而不允许使用表格排版和定位。16 缩进、换行约定网

11、页代码的缩进使用一个Tab。因为网页嵌套标签可能比较多，使用多个空格缩进会导致最深层的代码缩进太多，因而使用Tab键进行缩进。如果一行中代码太长，以不破坏单词结构为原则主动换行。例如：1二维码17 空格书写的约定不要在网页中连续出现多于一个的空格，也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用css的text-indent、padding、margin、hspace、vspace或透明的gif 图片来实现。6、 css书写规范1 编码方式统一css 文件编码统一使用 UTF-8 编码。2 兼容性要求所有页面默认都针对 Firefox 进行设计，并兼容ie6.0/7.

12、0/8.0/9.0/10.0以及chrome浏览器。在保证功能正常使用的基本前提下，可以适当针对高级版本浏览器使用css3的一些高级特效。应当避免使用hack，能不能则不用。div width:600px; height:400px; color:#555; background-color:red; background-color:blue9; /*所有IE*/ background-color:yellow0; /*IE8 hack*/ *background-color:blue9; /*IE6、IE7识别*/ _background-color:#CDCDCD; /* ie 6*/

13、border:1px solid #eee; border-radius:10px; 3 提高样式复用率书写代码前，考虑并提高样式重复使用率，充分利用样式叠加带来的好处。4 对中文进行编码样式表中中文字体名，务必转码成unicode码，以避免编码错误时乱码，如宋体写成“5B8B4F53”，微软雅黑写成“5FAE8F6F96C59ED1”。常用字体的编码参见附录2。5 每个样式属性值后必须加“;”方便压缩工具“断句”。6 属性编写顺序 遵循“布局定位属性-自身属性-文本属性-其他属性-css3属性”。列举和顺序如下说明：u 布局定位属性：display/visibility/position(t

14、op/right/bottom/left/z-index)/float(clear)/overflowu 自身属性（盒模型&背景）：width/height/margin/padding/background/outline/borderu 文本属性：font/color/text-align/text-indent/white-space/content/text-decorationu 其他属性：list-style/vertical-align/cursor/zoomu CSS3属性：opacity/transform/transition/animation/box-shadow/bo

15、rder-radius如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照-webkit-/-moz-/-ms-/-o-/std的顺序进行添加，标准属性写在最后。u 链接的样式请严格按照（LoVe/HAte）顺序添加： a:link - a:visited - a:hover - a:active7 尽可能使用简写、缩写用16进制表示颜色，颜色取值用小写；颜色尽量用三位字符表示，例如“#aa88dd”写成“#a8d”；如果没有边框时，应该写成“border:none”，不要写成“border:0”；可以缩写的属性，尽量使用缩写形式，常用的缩写样式包括margin、padding、backg

16、round、font、border等；属性值为“0”时，后面不需要跟单位，比如“0px”要写成“0”；属性值为“0.x”时，省略“0”，比如“0.8em”要写成“.8em”。8 使用单行形式书写风格规则开始的大括号“”的前后要加空格，规则结束的大括号“”之前要加空格；属性名的冒号“:”之前不加空格，之后加空格；属性值之后要加分号“;”；多个选择性共用一条规则时，多个选择器写成多行形式；写hack时，为便于加注释，可写成多行形式，属性名要求上下行左对齐；如果是在html中写内联的css，则必须写成单行；具体如下图所示：body font-family:arial,5FAE8F6F96C59ED1

17、; font-size:12px; line-height:1.7em; color:#222; a:link,a:visited color:#26709a; text-decoration:none; .notext1 text-indent:-999em; *text-indent:0; *line-height:99em;/*IE6 IE7*/ overflow:hidden; 9 请尽可能使用sprite技术为减小http请求,背景图片应按模块制作sprite。务必在对应的sprite的psd源图中划参考线，并保存至img目录下，便于多人协作开发。10 避免ie使用filter，禁止

18、使用expression出于效率问题，应该格外注意。11 压缩后再发布7、 JavaScript书写规范1 自行开发原则上所有功能均根据项目需求原生开发，以避免网上down下来的代码造成的代码污染。2 库引入原则上仅引入jQuery库，若需引入第三方库,须与团队其他人员讨论决定。3 尽量采用外部调用所有的javascript的调用尽量采取外部调用，代码如下：8、 注释规范必须为大区块样式添加注释，小区块适量注释。1 大区块注释u 应为css中区块代码及重要功能加注释，标示出功能名称（或功能描述），格式如下：/*主导航*/.mainMenu width:100%; height:30px; ba

19、ckground:url(images/mainMenu_bg.jpg) repeat-x; .mainMenu ul li float:left; line-height:30px; margin-right:1px; cursor:pointer; u html中大区块也应加注释，格式如下： .2 小区块适量注释u css文件中可根据需要进行简单注释，被注释部分独占一行，如hack部分，格式如下：.dmenu a:link display:block; _zoom:1;/*ie6块链接热点减小bug，但是ie7下应用此项会产生ie6下的问题。*/ padding:5px 12px; lin

20、e-height:1.2; color:#333; u html文件中也根据需要对小区块加注释“”，注：短横线“-”只能在注释的始末位置，不可置入注释文字区域，若需要则使用等号“=”代替，格式如下： . u JavaScript注释，单行注释使用“/这儿是单行注释”，多行注释使用“/* 这儿有多行注释*/”，格式如下：/*功能名称：导航leftNav4实现功能：鼠标滑过出现二级列表，移除则消失*/$(function() $(ul.leftNav4 li:has(.leftNav4_main).hover(function()$(this).children(.leftNav4_main).s

21、how();$(this).addClass(nowOnLink) ,function() $(this).children(.leftNav4_main).hide();$(this).removeClass(nowOnLink);/移除效果););附录1（css文件命名）公用组件（不可更改)common.css基本共用base.css主要的master.css模块module.css布局、版面layout.css主题themes.css专栏columns.css文字font.css表单forms.css补丁mend.css打印print.css附录2（页面元素命名） 1 页面结构 容器: container页尾：footer栏目：column页头：header导航：nav页面主体：main内容：content/container侧栏：sidebar左右中：left right center页面外围控制整体布局宽度：wrapper2 导航 导航：nav边导航：sidebar菜单：menu主导航：mainnav左导航：leftsidebar子菜