《Web前端开发规范手册解析》由会员分享，可在线阅读，更多相关《Web前端开发规范手册解析（16页珍藏版）》请在金锄头文库上搜索。
1、Web前端开发规范手册一、规范目的1.1 概述 1二、文件规范2.1 文件命名规则 12.2 文件存放位置 22.3 css书写规范.32.4 html书写规范.72.5 JavaScript 书写规范 112.6图片规范 122.7注释规范 132.8 css 浏览器兼容 13一、规范目的1.1 概述为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档.本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不合适的地方请及时提出，经讨论决定后可以更改此文档.二、文件规范2.1 文件命名规则文件名称统一用小写的英文字母、数字和
2、下划线的组合，其中不得包含汉字、空格和特殊字符 ；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在 文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、 计算负载量等等操作。a. HTML的命名原则引文件统一使用index.htm index.html index.asp 文件名（小写）各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如：关于我们 aboutus信息反馈 feedback产品 product如果栏目名称多而复杂并不好以英文单词命名，则统一使用该栏目名称拼音或拼音的首字母表示;
3、每一个目录中应该包含一个 缺省的html文件，文件名统一用 index.htm index.htmlb. 图片的命名原则图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质例如：广告、标志、菜单、按钮等等。放置在页面顶部的广告、装饰图案等长方形的图片取名：banner标志性的图片取名为：logo在页面上位置不固定并且带有链接的小图片我们取名为button在页面上某一个位置连续岀现，性质相同的链接栏目的图片我们取名：menu装饰用的照片我们取名：pic不带链接表示标题的图片我们取名：title范例:banner_sohu.gif banner_sina.gif menu_about
4、us.gif menu_job.giflogo_police.gif logo_national.gif pic_people.jpg鼠标感应效果图片命名规范为图片名+_+on/off。例如：menu1_on.gif menu1_off.gifindex.asp ；title_news.gifc. javascript的命名原则例如：广告条的javascript文件名为 ad.js弹出窗口的javascript文件名为 pop.jsd.动态语言文件命名原则以性质描述，描述可以有多个单词，用“_”隔开，性质一般是该页面得概要。范例：register_form.asp register_post.
5、asp topic_lock.asp2.2文件存放位置规范Root0*-$0$S-j+軒cn en flash images imagestudio flashstudio inc library media project存放中文HTML文件 存放英文HTML文件 存放Flash文件存放图片文件存放PSD源文件存放flash源文件 存放include文件存放DW库文件 存放多媒体文件存放工程项目资料+temp存放客户原始资料审.js存放JavaScript脚本j- css存放CSS文件2.3 CSS书写规范基本原则：CSS样式可细分为3类：自定义样式、重新定义HTML样式、链接状态样式。1样
6、式为设计师自定义的新CSS样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。样式名+ “相应样式效果描述的单词或缩写”例：“ .shadow ”文字样式样式名“ .no ” + “字号” + “行距” + “颜色缩写”例：“ |.no12 ”、“ .no12-24”2. 义HTML样式为设计师重新定义已有的HTML标签样式，影响全部的被设定标签样式，用于统一网页中某一标签的样式定义。样式名“HTML标签”例：hr border: 1px dotted #333333 3. 态样式为设计师对链接不同状态设定特殊样式，影响被使用本样式区域中的链接。该样式写法有2种：a. nav:link
7、 |nav.a:link第一种只能修饰标签中；第二种可以修饰所有包含有标签的其他标签。页面内的样式加载必须用链接方式注意细则：1. 协作开发及分工:i会根据各个模块，同时根据页面相似程序，事先写好大体框架文件，分配给前端人 员实现内部结构&表现&行为；共用css文件base.css由i书写，协作开发过程中，每个页面请务必都要引 入，此文件包含reset及头部底部样式，此文件不可随意修改；2. class与id的使用：id是唯一的并是父级的，class是可以重复的并是子级的，所以id仅使用在大的模块上，class可用在重复使用率高及子级中；id原则上都是由我分发框架文件时命名的，为JavaScr
8、ipt预留钩子的除外；3. 为JavaScript预留钩子的命名，请以js_起始，比如：js_hide, js_show;4. class与id命名：大的框架命名比如 header/footer/wrapper/left/right 之类的在2中由i统一命名.其他 样式名称由小写英文 &数字& _来组合命名，女口 i_comment, fontred, width200;避免使用中文拼音， 尽量使用简易的单词组合；总之，命名要语义化，简明化.5. 规避class与id命名（此条重要，若有不明白请及时与i沟通）:a, 通过从属写法规避，示例见d;b, 取父级元素id/class命名部分命名，示例
9、见d;c, 重复使用率高的命名，请以自己代号加下划线起始，比如i_clear;d, a,b两条，适用于在2中已建好框架的页面，如，要在2中已建好框架的页面代码 中加入新的 div 元素,按 a 命名法贝U : .,样式写法:#mainnav .firstnav按 b 命名法贝U : .,样式写法:.main_firstnav6. css属性书写顺序，建议遵循布局定位属性- 自身属性-文本属性-其他属性.此条可根据自身习惯书写，但尽量保证同类属性写在一起.属性列举：布局定位属性主要包括：margin、padding、float （包括clear ）、position （相应的 top,right
10、,bottom,left ）、display、visibility、overflow 等；自身属性主要包括 ：width & height & background & border;文本属性主要包括： font、color、text-align、text-decoration、text-indent等；其他属性包括：list-style（列表样式）、vertical-vlign、cursor、z-index（层叠顺序）、zoom 等.我所列出的 这些属性只是最常用到的，并不代表全部；7. 书写代码前，考虑并提高样式重复使用率；8. 充分利用html自身属性及样式继承原理减少代码量，比如：vu
11、l class=list 这儿是标题列表 2010-09-15v/ul定义 ul.list liposition:relative ul.list li spanposition:absolute; right:0即可实现日期居右显示9. 样式表中中文字体名，请务必转码成Unicode码，以避免编码错误时乱码；10. 背景图片请尽可能使用sprite技术，减小http请求，考虑到多人协作开发，sprite按模块制作；11. 使用 table 标签时（尽量避免使用 table 标签），请不要用 width/ height/cellspacing/cellpadding 等 table属性直接定义
12、表现，应尽可能的利用table自身私有属性分离结构与表现，如 thead，tr，th，td，tbody，tfoot，colgroup，scope; （cellspaing 及 cellpadding 的 css 控制方 法: tableborder:0;margin:0;border-collapse:collapse; table th，table tdpadding:0;，base.css文件中我会初始化表格样式）12. 杜绝使用 vmeta http-equiv=X-UA-Compatible content=IE=7 / 兼容 ie8;13. 用png图片做图片时，要求图片格式为png
13、-8格式，若png-8实在影响图片质量或其中有半透明效果，请为ie6单独定义背景：background:none;_filter:progid:DXImageTransform.Microsoft.AlphalmageLoader（sizingMethod=crop,src= img/bg.png ）;14. 避免兼容性属性的使用，比如text-shadow | css3的相关属性；15. 减少使用影响性能的属性 ，比如position:absolute | float ;16. 必须为大区块样式添加注释，小区块适量注释；17. 代码缩进与格式：建议单行书写，可根据自身习惯，后期优化i会统一处
14、理；命名规则：头：header内容：content/container尾: footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title力口入：joinus指
