文豆Web前端开发范手册V1.2.docxVIP

文豆Web前端开发规范手册更新记录版本号日期更新内容修订V1.02010-05-01创建文档宋敏鹏V1.12011-02-01修改细节宋敏鹏V1.22015-05-28修改细节宋敏鹏文豆Web前端开发规范手册1、规范目的32、基本准则33、文件规范33.1 目录结构33.2 html 文件命名43.3 css 文件命名43.4 js文件命名44、html 书写规范44.1 编码44.2 文档类型声明44.3 语法44.4 文件引入54.5 语义化 html55、css 书写规范65.1 编码65.2 协作开发及分工65.3 CSS语法65.4 class 与 id 命名65.6 属性列举75.7 CSS优化76、Javascript 书写规范76.1 编码76.2 语法76.3 变量命名76.4 变量声明87、注释规范87.1 html 注释87.2 css 注释87.3 JavaScript 注释88、图片规范89、开发测试工具约定91、规范目的为提高团队协作效率,便于后台开发人员套页面及前端后期优化维护,输出高质量的文档,特制订此文档。本规范文档一经确认,前端开发人员必须按本文档规范进行前端页面制作。本文档如有不对或者不合适的地方请及时提出,经讨论决定后方可更改。2、基本准则编写符合 w3c 标准,语义化的 html,实现结构、表现、行为分离;浏览器兼容性优良(暂定 IE、chrome、firefox)。页面性能方面,代码要求简洁有序, 尽可能的减小服务器负载,注重 css 代码质量,保证浏览器能最快的解析。3、文件规范3.1 目录结构css、js、images文件均归档至约定的目录中。约定目录为://index.html/images//css/base.css/js/common.jsjquery-1.9..min.js可根据需要创建子目进行分类。3.2 html 文件命名英文命名,后缀为.html3.3 css 文件命名英文命名,后缀为.css。公用 css 请放在base.css 中,重置样式浏览器内置样式的 css 为 reset.css,其它css 文件根据页面名称命名。3.4 js文件命名英文命名, 后缀为.js。公用 js 请放在common.js 中, 其他依模块需求命名。注:所有文件命名,由多个单词组成时,采用中划线连接方式,比如:账号模型文件 account-model.js,错误报告页面 error-report.html 等。4、html 书写规范4.1 编码统一为 utf-8 编码。meta charset=utf-8 /4.2 文档类型声明HTML5 声明类型!DOCTYPEhtml，移动端页面必须用这个类型。4.3 语法?代码书写时实现层次分明的缩进。所有的标签、属性、属性命名必须由小写字母及连接线(-)组成, 且所有标签必须闭合; 属性值必须用双引号。不要在自动闭合标签结尾处使用斜线(HTML5 规范指出他们是可选的)。充分利用无兼容性问题的 html 自身标签, 比如 em, strong, label 等。需要为 html 元素添加自定义属性的时候, 首先要考虑有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以data-为前缀来添加自定义属性(可用 jquery 的 data()函数获取属性值),避免使用data: 等其他命名方式。在标签中尽量避免使用 style 属性,即 style=...。4.4 文件引入一般情况下CSS样式文件必须外链至head.../head之间;一般情况下 javascript 文件必须外链至页面底部。引入js库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如 jquery-1.9.2.min.js;引入插件, 文件名格式为库名称.插件名称,比如 jQuery.cookie.js。4.5 语义化 html如标题根据重要性用 h*(同一页面只能有一个 h1), 段落标记用 p, 列表用 ul, 内联元素中不可嵌套块级元素。尽可能减少 div 嵌套等，如：div?class=boxdiv?class=welcome欢迎访问XXX,?您的用户名是div?class=name用户名/div/div/div完全可以用以下代码替代:?div?class=boxp欢迎访问XXX,?您的用户名是span用户名/span/p/div;尽量遵循 HTML 标准和语义,但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。书写链接地址时, 必须避免重定向,例如:href=/, 即须在 URL 地址后面加上“/”;必须为含有描述性表单元素(input, textarea)添加 label，如：p姓名:?input?type=te