文档介绍：Web前端开发规范文档编写陈济晗审核批准时间2014年3月规范目的为提高团队协作效率,便于研发人员添加功能及前端后期优化维护,输出高质量的符合W3C标准的页面,特制订此文档。本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出,经讨论决定后可更改。基本准则符合web标准,语义化html,结构表现行为分离,兼容性优良。页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。合作建议在需要修改配置文件的样式修改中,研发人员要积极配合相关前端开发进行修改,页面demo分版本建立文件夹上传至vs中,便于研发人员的获取,不建议使用点对点的文件传输方式。不建议研发人员修改或增加样式,禁止把样式写在页面head中(只有某一个页面用到的样式例外),能用class完成的样式就一定不写在行内。如果研发人员必须要修改、增加样式,)专为研发人员注释的区块中,并添加备注,标明修改人姓名、新增时间和解决的问题,并及时告知前端人员,将由前端人员定期整理。:/****@ChenChen新增所需的弹出层部分的样式*/.popdiv{...............}文件规范文件存放位置htmlcss jsimages文件均归档至约定的目录中,参考如下:demoimages存放图片文件media存放多媒体文件,如swf、avi、ram等psd存放交互设计文件scripts存放脚本文件,如js、asp、php等style存放CSS文件文件命名命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。html文件命名原则按照与交互设计稿相对应的方式为页面命名,即页面与其对应的设计稿使用同一名称。,mon。命名尽量使用小写英文单词,推荐命名见附录1(css文件命名)。图片命名原则图片的名称分为头尾两部分,用下划线“_”隔开,头部分表示此图片的大类性质例如:广告、标志、菜单、按钮等等。图片格式仅限于gif、png、jpg。放置在页面顶部的广告、装饰图案等长方形的图片banner如:(组合图片)sprite在页面上某一个位置连续出现,性质相同的链接栏目的图片menu如:(不能使用sprite的情况)图片名_on、图片名_off如:,采用小写英文。一般使用短线“-”替代自然语言名称中的空格,用句点“.”分隔表示名称中的从属关系。如:“poptools-”、“”。html编写规范文档类型声明DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。我们采用最简单的html5的文档标准。完整代码如下:<!DOCTYPEhtml>定义语言编码为了被浏览器正确解释和通过W3C代码校验,所有的html文档都必须声明它们所使用的编码语言,我们一般使用utf-8(若制作多国语言页面也有可能用Unicode、ISO-8859-1等)。代码如下:<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>css引入方式尽量采取link一般在html的页头中用link方式引入css文件。原则上,不允许在页头直接写style。避免使用行内样式。禁止在CSS中使用***@import。所有标签的元素和属性的名字都必须使用小写为了保证书写规范和提高可读性,要求所有的标签和属性的名字都必须使用小写。例如:<BODY>必须写成<body>,“onMouseOver”也必须写成成“onmouseover”。所有的属性必须用引号括起来所有属性必须被加引号。例如:<height=80>必须写成<height="80">。所有的标记必须正确闭合所有标签必须关闭。如果是单独不成对的标签,在标签最后加一个"/"(即“空格+/”)来关闭,如<br/>。把所有<和&特殊符号用编码表示任何小于号(<),不是标签的一部分,都必须写成&lt;任何大于号(>),不是标签的一部分,都必须写成&gt;任何与号(&),不是实体的一部分的,都必须写成&amp。其他常用的特殊符号参见附录3。img的alt属性和a的title属性所有作为内容的img图片都要加上有意义