Web前端开发规范手册

1、Web前端开发规范手册文档修订历史记录修订日期修订人修订内容2013-11-27XXX文档创建，有李银磊、盛旭华分别整理文档共同合并而成。2013-12-23XXX内容完善，格式规范2013-12-25XXX内容修改，在内容，格式，目录结构各方面都有调整，涉及各章节。2014-02-27XXX模板中现存代码img问题、图标合并一张摆放位置、textarea默认可拖动造成页面混乱等方案添加。1 目录一、规范目的3二、基本准则3三、文件规范33.1基本要求43.1.1容器/布局/组件关系说明43.1.2文件存放位置规范43.1.3文件命名原则53.2HTML书写规范73.2.1head区代码规范7

2、3.2.2body区代码规范83.2.3布局83.2.4组件103.3CSS书写规范123.3.1css链接规范123.3.2css命名规则133.3.3css组合使用133.4静态页面命名规范143.5JavaScript书写规范153.6图片规范153.7注释规范163.7.1html注释163.7.2css注释163.7.3JavaScript注释16四、常见BUG16五、兼容性19六、测试19七、待解决问题19八、执行模式21一、 规范目的本文档是将通用的前端规范结合本系统的特色要求整合而成，意在： 提高团队协作效率 便于前端开发以及后期优化维护 方便新进的成员快速上手 输出高质量的代

3、码本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出，经讨论决定后可以更新此文档。本规范文档同时将用于绩效考核参考标准，加（）项为考核点。二、 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良。 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。开发时需要遵循如上基本准则，特殊情况可以有所宽限，如一些老项目的页面改造。三、 文件规范233.1 基本要求3.1.1 文件存放位置规范文件夹说明备注images存放图片文件css存放css文件1.base.css：是放整站公共部分的样式，如网站的

4、头尾，各元素值的初始化样式等；任何页面都要加载base.css，调用放在最上层且要优先加载。2.各组件都有自己的样式表命名JS存放javascript脚本flash存放flash文件暂不考虑，若后期有此应用就按此标准扩展inc存放include文件library存放DW库文件inc存放include文件media存放多媒体文件3.1.2 文件命名原则使用场景：在新建网页、图片、脚本、CSS文件时，根据此规则给文件命名并放入指定位置文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字空格和特殊字符。命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，

5、二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。 HTML的命名原则每一个目录中应该包含一个缺省的html 文件，文件名统一用index.html文件名。各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。如果栏目名称多而复杂时用两个写英文单词并用“-”连接。目前每套模板必须包含的预置页面为： 分类中文名称静态文件名公共部分文件网站头部header网站尾部footer网站主页面首页home商品列表product-list（有商品） product-listNull（无商品时）商品单页produc

6、t-details文章列表articleitem-list文章详情articleitem-details关于我们about-us联系我们contactus-us在线咨询online-consulting登录、注册流程登录login注册registere-s1（填写账号信息）registere-s2（验证账号）registere-s3（完成）找回密码lost-passwordEmail找回密码：lostpassword_email手机找回密码：lostpassword_telephone购物流程购物车shopping-car1订单信息页shopping-car2订单成功页shopping-car

7、3支付失败页order-fail会员中心会员中心公共会员中心头member-header会员中心尾member-footer会员中心首页member-center交易管理我的订单member-center-myorder订单详情member-center-orderdetails我的关注我的收藏member-center-collect我的咨询member-center-myask账号信息个人资料member-center-personal收货信息member-center-address其他404错误页404网站更新中提示页updating找不到内容页not- found内容已删除页cont

8、ents-deleted邮件模板 图片的命名原则图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质。例如：广告、标志、菜单、按钮等等。 放置在页面顶部的广告、装饰图案等长方形的图片取名： banner 标志性的图片取名为： logo 在页面上位置不固定并且带有链接的小图片我们取名为 button 在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： menu 装饰用的照片我们取名： pic 不带链接表示标题的图片我们取名： title 范例：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job

9、.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg javascript的命名原则一般使用脚本功能的英文小写缩写命名。例如：广告条的javascript文件名为 ad.js 弹出窗口的javascript文件名为 pop.js3.2 HTML书写规范3.2.1 文档类型声明及保存格式文档类型声明，目前非特殊情况下我们采用XHTML 1.0 Transitional DTD (一般为：)，即DreamWeaver 8和cs3版本默认的DTD3.2.2 代码格式要求静态页面XHTML代码应采用自动缩

10、进的形式编写，这样代码层次结构清晰。正确使用代码缩进，缩进时使用tab(键盘中的TAB键)3.2.3 head区代码规范 head区是指HTML代码的和之间的内容。 必须加入的标签 1) 网页显示字符集：统一用utf-82) 网页的css规范：3) 网页SEO标签：xxxxxxxxxxxxxxxxxx 可以选择加入的标签 1) 浏览器图标2) 收藏夹图标3) 所有的javascript的调用尽量采取外部调用 3.2.4 HTML注意细则1) 所有标签必须闭合, 包括 br (), hr(),（）等; 属性值必须用双引号包括;（不闭合会对开发还有js有影响）2) 内联元素即行内元素（常用：,等）

11、中不可嵌套块级元素（常用：, , , , ,等）; 因为会导致兼容性问题： 有边框时会撑不开 里面多个内容块会错位 不符合w3c规范3) 特殊符号使用, 尽可能使用代码替代: 比如()> 空格( )   等等;4) 书写页面过程中, 请考虑向后扩展性; 禁止不符合web标准的标签，如，5) 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 单独为ie6单独定义背景或其它。6) a标签下不能嵌套块属性标签，更不能嵌套a标签。7) th不会自动继承上级元素的 text-align 需要给th添加text-align:inheri

12、t;8) Table布局由于代码冗余已经过时，所以HTML页面普遍采用代码简洁的DIV+CSS布局。TABLE仅用于表格列表式。3.2.5 容器/布局/组件关系说明把网站分成三层从外到内分别是：容器，布局，组件。网站由布局和各个组件组成，布局可以理解为一栋房子，里面根据需要隔成很多个房间，组件是家具，用于填满房间。3.2.6 容器 容器的种类容器有两种类型：n 公共容器（public-area）：主要指任何页面都共用的内容，在其中一个页修改其内容所有页面都会统一更新。公共窗口最常见的应用是：头与尾。n 主体容器（main-area）：每个页面主体内容（即一个页面除公共容器外的内容

13、）启用的容器叫主体容器。 容器的应用一个页面一般由上下头尾即两个公共容器，一个主体容器组成（在可视化编辑模式和布局编辑模式下，主体容器是默认打开可编辑的），如下图所示：3.2.7 布局 布局的种类从网站的宽度上分，有三种：宽度类型样式名样式名（组件标识）普屏width:1000px;指网站内容宽度固定在适合绝大多数用户电脑的1000像素宽。generalscreen宽屏width:10001200px;指根据用户电脑的分辨率动态显示网站最佳效果，宽度在10001200像素范围内。bigscreen满屏width:100%;指网站内容宽度随着浏览器大小的变化而变化，内

14、容保持充满整个屏幕，它一般用于首页大屏广告。fullscreen布局能设置背景：弹出如下设置窗口：以下属性均为非必填项；从网站栏位上分，有三种：栏位样式名样式名备注通栏以普屏为例：【放组件】通栏：wrap左、中、右三栏间的间距为15px（左中栏已在base样式表中设定）两栏以普屏为例：【放组件】【放组件】两栏布局左右栏：col-leftcol-right三栏以普屏为例：【放组件】【放组件】【放组件】三栏布局左、中、右栏：col-leftcol-maincol-right注：最终网站是后台自动生成，所以布局的div排版必须规范，有些div在效果是可有可无但是任然要放着。宽度与栏位结合实例：分析：

15、网站宽度：10001200px 背景色：#B10000 背景图：bg_demo.gif 两栏布局所以结合下为：【放组件】【放组件】 布局的应用将页面进行拆分，布局放入容器盒子中：3.2.8 组件 组件的应用将页面内容拆分成一个个组件，然后将组件放入布局盒子中：以“网站招牌”组件为例：“网站招牌”组件html代码： 组件标题 !-web-signboard-end1) 组件样式：也是标识“web-signboard”（根据组件中文名称取语义化的英文，复合词-隔开）2) 组件标题：任何组件都需要，有配置项要控制是否要显示 组件标题3) 组件内容： 以上1、2部分为每个组

16、件必备。 组件清单组件分类样式名样式名（组件标识）网站相关网站招牌显示LOGO、形象图片等内容，主要用于展示公司形象，常放于网站头部，在任何页面都展示。顶部工具条显示登录、注册、购物车、收藏等功能，是网站的第二个重要导航，一般用于网站头部。搜索工具条显示商品与文章的搜索框，方便用户输入关键字查询商品或文章信息，一般用于网站头部。导航相关栏目导航显示网站重要的栏目信息，一般用于网站头部、内页的侧栏位置。当前位置网站面包屑功能，告诉用户当前所处的位置，适合用于首页以外的所有页面。商品相关商品分类显示设定的产品分类，方便用户查找商品，是引导用户购买的重要功能。适合放于商品列表页的侧栏。

17、商品列表（自动）可显示最新/最热/有促销/某分类下的商品数据，适合放于首页、商品列表页、商品单页。文章相关文章分类显示设定的文章类别，方便用户能快速查询文章信息，适合放于文章列表页的侧栏。文章列表（自动）可以在网站上显示您发布的各类文章信息，适合放于首页或文章列表页的侧栏。广告相关图片列表广告静态列表式广告效果，常用于多个促销活动的直观展示，适合放于首页或列表页左侧位置。多屏轮播广告多张图片轮播滚动式效果，常用于宣传产品，彰显公司形象，适合放于首页。自定义自定义内容区可以通过在编辑器输入文字/图片/自定义编辑内容，专业人员可以在源码模式下直接编辑html代码，内容很灵活。diy-subasse

18、mbly 组件应用注意事项1) 所有组件后面必须清除浮动：2) 每个组件都有一个对应的样式表，公共内容为：相对定位属性（主要用于控制可视化时的透明遮罩）与组件标题样式3) 自定义组件：所有样式都需要写在代码中，不支持自定义样式名。例：4) 页面大背景加在代码中：例如5) 各组件加margin-bottom:(padding-bottom:)px,自定义组件不需要6) 组件放置前后需要加注释，注释格式为：7) 组件间的间距默认margin-bottom:10px，除自定义组件、顶部工具条（这两个间距）外。8) 系统组件要求逼真（数据文案要真实）9) 避免样式重复，同一组件的内部样式

19、都需要带组件样式名，层层往下写。10) 以下这些组件的特殊位置需要加overflow：hidden;n 广告组件：在图片的容器上加此元素；n 3.3 CSS书写规范3.3.1 基本原则CSS样式可细分为3类：重新定义HTML样式、链接状态样式、自定义样式。1) 重新定义HTML样式为设计师重新定义已有的HTML标签样式，影响全部的被设定标签样式，用于统一网页中某一标签的样式定义。样式名“HTML标签”例：hr border: 1px dotted # 2) 链接状态样式为设计师对链接不同状态设定特殊样式，影响被使用本样式区域中的链接。该样式写法有2种： a.nav:link(中间无空格) 、.

20、nav a:link 第一种只能修饰标签中；第二种可以修饰所有包含有标签的其他标签。3) 样式为设计师自定义的新 CSS 样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”例：“ .shadow ”文字样式名“.font”+“字号”+“行距”+“颜色缩写” 例：“ .font12 ”、“ .font12_24 ”“.font12_26_fff”自定义的样式名最好用意义命名。4) 页面内的样式加载必须用链接方式：5) 重新定义的最先，伪类其次，自定义样式最后，便于自己和他人阅读。6) 一般不允许将样式的定义写在标签中（如：style=“c

21、olor:red;”）；7) 所有装饰性的图片（如背景图），要定义在CSS中； 3.3.2 注意细则9) 本系统用于样式控制的，一般不建议用ID，ID让给JS使用；10) class与id命名: 大的框架命名由专人统一命名，并在规范中注明，如布局名、组件名。其他样式名称由小写英文&数字&_来组合命名, 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化。11) css属性书写顺序, 建议遵循 布局定位属性-自身属性-文本属性-其他属性。此条可根据自身习惯书写, 但尽量保证同类属性写在一起。文件夹说明布局定位属性Marginpaddingfloatclearpositi

22、on（相应的 top,right,bottom,left）displayvisibilityoverflow等自身属性Widthheightbackground border文本属性fontcolortext-aligntext-decorationtext-indent white-spaceothertextcontent等其他属性list-style(列表样式)vertical-aligncursorz-index(层叠顺序) zoom等12) 书写代码前, 考虑并提高样式重复使用率;13) 杜绝使用 兼容ie8;14) 避免兼容性属性的使用, 比如text-shadow | css3的

23、相关属性;15) 重要图片加上 alt 属性；重要的元素和截断的元素加上title;16) 避免使用!important，!important的优先级最高;17) 必须为大区块样式添加注释, 小区块适量注释;18) 代码缩进与格式: 建议单行书写;19) Margin、padding、border、font等样式尽可能采用合并写法;上面的简写图解说明的是依据不同的属性值可以进行不同的缩写，这种方法同样适用于padding和Border-width属性;Font的简写对于缩小代码量很有帮助，如果没有定义某个属性值的话，将继承父级元素的定义或使用默认值。3.3.3 css命名规则说明样式名说明公共

24、部分base.css初始化元素：一般不需要动，直接复制过去即可，是元素的初使化样式。body一般定义网站的整体背景，字体，字体颜色，字体大小，间距等属性。.clear_float清除浮动样式名布局、颜色等看具体问题样式表名定义:由组件功能命名(复合词连写，例如： myOrderDetai)系统组件的命名前加sys 例如：sysArticleList组件最外样式名还是遵循样式表命名，其它使用小写字母；内容为先；表现为辅；复合词用-隔开；例如：basic-info文字样式名“.font”+“字号”+“行距”+“颜色缩写” 例：“ .font12 ”、“ .font12_24 ”“.font12_2

25、6_fff”自定义的样式名最好用意义命名。现在的样式表命名由开发定的大小写混用的3.3.4 css组合使用一个div容器同时调用两个（或两个以上）不同样式，那么这个div容器的样式属性等于两个（或两个以上）样式的属性加起来，可充分利用此特性来组合使用css，方便管理并减少代码量（如 结构+ 链接样式）3.4 JavaScript书写规范使用场景：书写js脚本时，根据此规则对变类、函数、变量命名，并遵循书写规则，避免出现常犯错误，提高脚本效率。所有的javascript 脚本尽量采用外部调用1) 书写过程中, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上do

26、wn下来的代码造成的代码污染(沉冗代码 | 与现有代码冲突 | .);2) 库引入: 原则上仅引入jQuery库,以及组件组开发的相关库。 若需引入第三方库, 须与团队其他人员讨论决定;3) 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun; jQuery私有变量要求首字符为_, 其他与原生JavaScript 规则相同, 如: _iTaoLun; 另, 要求变量集中声明, 避免全局变量.4) 类命名: 首字母大写，如 ITaoLun;5) 函数命名: 首字母小写驼峰式命名. 如iTaoLun();6) 命名语义化, 尽可能利用英文单词

27、或其缩写;7) 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;8) 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;9) 代码结构明了, 加适量注释. 提高函数重用率;10) 注重与html分离, 减小reflow, 注重性能.3.5 图片规范使用场景：引用添加图片文件时，根据此规则对图片格式进行选择以及命名存放。1) 所有页面元素类图片均放入images文件夹, 测试用图片放于images/demoimg文件夹;2) 图片格式仅限于gif | png | jpg（优先png格式）;3)

28、命名全部用小写英文字母 | 数字 | _ 的组合，其中不得包含汉字 | 空格 | 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif | btn_submit.gif;4) 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;5) 尽量避免使用半透明的png图片6) 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至images目录下.7) 保存较大的广告图时选择jpg格式 同时保存时图片加载形式选择“连续

29、”8) 为保证网站加载速度，尽量按组归类，一组整合成一张图片：建议一行一个，依次向下排列，图标间稍留点空隙，方便某个图标需要加大时不影响其他图标。若是同一个按钮的不同状态可以并排排列。（图标摆放规则：按照组件类型置入，代码中尽量不使用img）说明图片名说明小图标类pics_icon.png一般网站上需要用到的小图标（png8格式）若有除以下两类外的特殊小图也可以放在此类。按钮类pics_button.png放网站上按钮类型的图标进度条类pics_flow.png网站进度条类型的图片，多种状态集合3.6 注释书写规范使用场景：书写代码时，根据此规则对代码进行适当注释说明，方便自己或他人阅读和理解

30、。3.6.1 html注释注释格式 , -只能在注释的始末位置,不可置入注释文字区域。3.6.2 css注释1) 行间注释：直接写于属性值后面。例： .search border:1pxsolid#fff;/*定义搜索输入框边框*/ background:url(./images/icon.gif)no-report#333;/*定义搜索框的背景*/ 仅要求兼容性注释2) 整段注释：分别在开始及结束地方加入注释。例： /*=搜索条=*/ .search border:1pxsolid#fff;background:url(./images/icon.gif)no-repeat#333; /*=

31、搜索条结束=*/3.6.3 JavaScript注释JavaScript注释, 单行注释使用/这儿是单行注释 ,多行注释使用 /* 这儿有多行注释 */;四、 常见BUG解决方案1) 不给属性为text的input标签设置高度，这无疑让IE浏览器下输入框中的文字垂直居中，直接给input设padding属性，给text适合的width,padding.同时，可直接给input标签声明font-family,font-size.2) 背景色不兼容，用border来看是否重叠。3) a标签中套img，会出现1px的默认蓝色边框 解决方案：在CSS样式中写aimgborder：none;4) CSS

32、中的display：inline就是以行内元素显示，不可设宽。（多个div横向排列挤占宽度的问题）5) table外面套个div定高宽，如果table的高度过高，就显示一个垂直滚动条，而里面的table是100%宽度，但在ie6/7下会出现横向滚动条，如下图：解决方案：在table外层再加个就ok了.6) float的div闭合，要清除浮动7) IE6有图片下有空隙产生解决方案：设置img 为display:block 或者设置vertical-align 属性为vertical-align:top8) IE6无法定义1px高度的容器 解决方案： 设置line-height:1px9) 列表阶

33、梯bug通常会在给的子元素使用float:left;时触发，我们本意是要做一个横向的列表(通常 是导航栏)，但IE却可能呈现出垂直的或者阶梯状。 解决方案：就是给定义float:left;而非子元素，或者 给定义display:inline;也可以解决10) cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以11) CSS透明问题解决方案：fifter:alpha(opacity=50); opacity:0.5;12) IE下overflow：auto/scroll不起作用的bug解决方案：对设置了overflow的元素设定高度和宽度（一般使

34、用滚动条的都会设置这些属性），然后给这个元素进行position定位，relative或者absolute都是可以的。13) IE6/7/8下直接对input输入框使用背景图片，当输入值冲出背景图片宽度时，背景图片会随字符滑动解决方案：在input框外加一个div，在这个div上设置背景14) 掉a链接和按钮难看的虚线边框解决方法：在代码中加onfocus=”this.blur()” 或样式：a text-decoration:none; outline:none; a:active star:expression(this.onFocus=this.blur();如果是图片区域，可以加：ar

35、ea blr:expression_r(this.onFocus=this.blur()一切都搞定了。15) background-color为#fff会失效解决方案：background :#fff 16) text-align 影响块级元素解决方案：整理float；或者分开设置text-align17) 注释造成文字溢出（多出一个字）是IE的bug 解决方案：可能是float造成的 或删除注释18) 文本框有可以拖动 若不让拖拉解决方案：给样式resize:none19) ie7，ie6不识别display:inline-block解决方案：display:inline-block;_zoom:1;*+display:inline;20) 用了float尽量少用同方向的margin（可以用padding解决），ie下会出现问题。解决方案：一定要用时需要加上“display:inline”如：margin-left:10px; float:left; display:inline;五、 兼容性CSS hack常见的CSS hack写法大全：此处用pa