Web前端开发规范手册.doc

Web前端开发规范手册 PAGE 1 Web前端开发规范手册 文档修订历史记录 修订日期 修订人 修订内容 2013-11-27 XXX 文档创建，有李银磊、盛旭华分别整理文档共同合并而成。 2013-12-23 XXX 内容完善，格式规范 2013-12-25 XXX 内容修改，在内容，格式，目录结构各方面都有调整，涉及各章节。 2014-02-27 XXX 模板中现存代码img问题、图标合并一张摆放位置、textarea默认可拖动造成页面混乱等方案添加。  目录 TOC \o "1-3" \h \z \u 一、 规范目的 3 二、 基本准则 3 三、 文件规范 3 3.1 基本要求 4 3.1.1 容器/布局/组件关系说明 4 3.1.2 文件存放位置规范 4 3.1.3 文件命名原则 5 3.2 HTML书写规范 7 3.2.1 head区代码规范 7 3.2.2 body区代码规范 8 3.2.3 布局 8 3.2.4 组件 10 3.3 CSS书写规范 12 3.3.1 css链接规范 12 3.3.2 css命名规则 13 3.3.3 css组合使用 13 3.4 静态页面命名规范 14 3.5 JavaScript书写规范 15 3.6 图片规范 15 3.7 注释规范 16 3.7.1 html注释 16 3.7.2 css注释 16 3.7.3 JavaScript注释 16 四、 常见BUG 16 五、 兼容性 19 六、 测试 19 七、 待解决问题 19 八、 执行模式 21 规范目的 本文档是将通用的前端规范结合本系统的特色要求整合而成，意在： 提高团队协作效率 便于前端开发以及后期优化维护 方便新进的成员快速上手 输出高质量的代码 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发。 本文档如有不对或者不合适的地方请及时提出，经讨论决定后可以更新此文档。 本规范文档同时将用于绩效考核参考标准，加（★）项为考核点。 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良。 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。 开发时需要遵循如上基本准则，特殊情况可以有所宽限，如一些老项目的页面改造。 文件规范 基本要求 文件存放位置规范 文件夹 说明 备注 images 存放图片文件 css 存放css文件 1.base.css：是放整站公共部分的样式，如网站的头尾，各元素值的初始化样式等； 任何页面都要加载base.css?，调用放在最上层且要优先加载。 2.各组件都有自己的样式表命名 JS 存放javascript脚本 flash 存放flash文件 暂不考虑，若后期有此应用就按此标准扩展 inc 存放include文件 library 存放DW库文件 inc 存放include文件 media 存放多媒体文件 文件命名原则 [使用场景：在新建网页、图片、脚本、CSS文件时，根据此规则给文件命名并放入指定位置] 文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字空格和特殊字符。命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。 HTML的命名原则 每一个目录中应该包含一个缺省的html 文件，文件名统一用index.html文件名。 各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。如果栏目名称多而复杂时用两个写英文单词并用“-”连接。 目前每套模板必须包含的预置页面为： 分类 中文名称 静态文件名 公共部分文件 网站头部 header 网站尾部 footer 网站主页面 首页 home 商品列表 product-list（有商品） product-listNull（无商品时） 商品单页 product-details 文章列表 articleitem-list 文章详情 articleitem-details 关于我们 about-us 联系我们 contactus-us 在线咨询 online-consulting 登录、注册流程 登录 login 注册 registere-s1（填写账号信息） registere-s2（验证账号） registere-s3（完成） 找回密码 lost-p