Web前端开发规范手册.docVIP

PAGE 21 Web前端开发规范手册 一、规范目的 1.1?概述??1 二、文件规范 2.1?文件命名规则12.2?文件存放位置2 2.3 html?书写规范22.4 css?书写规范72.5 JavaScript?书写规范122.6?图片规范192.7?注释规范20 2.8 css?浏览器兼容21 一、规范目的 1.1?概述 为提高团队协作效率,?便于后台人员添加功能及前端后期优化维护,?输出高质量的文档,?特制订此文档.?本规范文档一经确认,?前端开发人员必须按本文档规范进行前台页面开发.?本文档如有不对或者不合适的地方请及时提出,?经讨论决定后可以更改此文档. 二、文件规范 2.1文件命名规则 文件夹和文件名一律全部用小写英文单词，禁止出现简拼、拼音、数字、无意义的命名，英文单词尽量使用一个进行描述，简洁易懂；多个单词用驼峰命名法。 2.2?文件存放位置 cn?存放中文?HTML?文件 en?存放英文?HTML?文件 flash?存放?Flash?文件 images?存放图片文件 imagestudio?存放?PSD?源文件 flashstudio?存放?flash?源文件 inc?存放include?文件 library?存放?DW?库文件 media?存放多媒体文件 project?存放工程项目资料 temp?存放客户原始资料 js?存放?JavaScript?脚本 css?存放?CSS?文件 2.3 html?书写规范 ● 为每个HTML页面的第一行添加标准模式（standard mode）的声明，确保在每个浏览器中拥有一致的展现。 ? !DOCTYPE html 文档类型声明统一为HTML5声明类型，编码统一为UTF-8。 meta charset=UTF-8 HEAD中添加信息。 meta name=author content=smile@kang.cool//作者 meta name=description content=hello//网页描述 meta name=keywords content=a,b,c//关键字,“，”分隔 meta http-equiv=expires content=Wed, 26 Feb 1997 08：21：57 GMT//设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅 meta http-equiv=Pragma content=no-cache//禁止浏览器从本地机的缓存中调阅页面内容 meta http-equiv=Window-target content=_top//用来防止别人在框架里调用你的页面 meta http-equiv=Refresh content=5;URL=///跳转页面，5指时间停留5秒 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引 meta name=robots content=none//content的参数有all,none,index,noindex,follow,nofollow，默认是all link rel=Shortcut Icon href=favicon.ico//收藏图标 meta http-equiv=Cache-Control content=no-cache, must-revalidate//网页不会被缓存 IE支持通过特定meta标签来确定绘制当前页面所应该采用的IE版本。除非有强烈的特殊需求，否则最好是设置为edgemode ，从而通知IE采用其所支持的最新的模式。 meta http-equiv=X-UA-Compatible content=IE=Edge 非特殊情况下CSS样式文件外链至HEAD之间，JAVASCRIPT文件外链至页面底部。 !DOCTYPE html html head link rel=stylesheet href=css/main.css /head body !-- 逻辑代码 -- !-- 逻辑代码底部 -- script src=lib/jquery/jquery-2.1.1.min.js/script /body /html 引入JAVASCRIPT库文件，文件名须包含库名称及版本号及是否为压缩版。 jQuery-1.8.3.min.js 引入JAVASCRIPT插件, 文件名格式为库名称+.+插件名称。 jQuery.cookie.js HTML属性应当按照以下给出的顺序依次排列，来确保代码的易读性。 Class id 、 name data-* src、for、 type、 href title、alt aria-*、 role 避免使用中文拼音尽量简易并要求语义化。 CLAS