Web前端开发规范文档

规范目的：

　　使开发流程更加规范化。

通用规范：

  • TAB键用两个空格代替（windos下tab键占四个空格，linux下TAB键占八个空格）。

  • CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”。

  • 文件内容编码均统一为UTF-8。

  • CSS、JAVASCRIPT中的非注释类中文字符须转换成unicode编码使用,以避免编码错误时乱码显示。

文件规范：

  • 文件名用英文单词，多个单词用驼峰命名法。

  • 一些浏览器会将含有这些词的作为广告拦截，文件命名、ID、CLASS等所有命名避免以下词汇。
  • `ad`、`ads`、`adv`、`banner`、`sponsor`、`gg`、`guangg`、`guanggao`等

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=http://kahn1990.com/">//跳转页面，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">//网页不会被缓存

　　

非特殊情况下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

　

命名方式：

CLASS --> nHeadTitle --> CLASS遵循小驼峰命名法（little camel-case）

ID --> n_head_title --> ID遵循名称+_

NAME --> N_Head_Title --> NAME属性命名遵循首个字母大写+_

<div class="nHeadTitle" id="n_head_title" name="N_Head_Title"></div>

css书写规范：

　　CSS书写顺序

.header {

/* 显示属性 */

    display || visibility

    list-style

    position top || right || bottom || left

    z-index

    clear

    float

/* 自身属性 */

    width max-width || min-width

    height max-height || min-height

    overflow || clip

    margin

    padding

    outline

    border

    background

/* 文本属性 */

    color

    font

    text-overflow

    text-align

    text-indent

    line-height

    white-space

    vertical-align

    cursor

    content

    };　

　兼容多个浏览器时，将标准属性写在底部

-moz-border-radius: 15px; /* Firefox */

-webkit-border-radius: 15px; /* Safari和Chrome */

border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 *//标准属性

使用z-index属性尽量z-index的值不要超过150（通用组的除外），页面中的元素内容的z-index不能超过10（提示框等模块除外但维持在150以下），不允许直接使用（999~9999）之间大值。　

　

减少使用影响性能的属性。

position:absolute;

float:left;//如这些定位或浮动属性

减少在CSS中使用滤镜表达式和图片repeat,尤其在body当中,渲染性能极差, 如果需要用repeat的话,图片的宽或高不能少于8px。

javaScript书写规范：

代码格式

"()"前后需要跟空格

"="前后需要跟空格

","后面需要跟空格

JSON对象需格式化对象参数

if、while、for、do语句的执行体用"{}"括起来

"{}"格式如下

if (a==1) {

    //代码

};　

下面类型的对象不建议用new构造

new Number

new String

new Boolean

new Object //用{}代替

new Array //用[]代替

图片规范：

命名应用小写英文、数字、_组合，便于团队其他成员理解

header_btn.gif

header_btn2.gif

页面元素类图片均放入img文件夹,测试用图片放于img/testimg文件夹，psd源图放入psdimg文件夹。

图片格式仅限于gif、png、jpg等。用png图片做图片时,要求图片格式为png-8格式。

注释规范：

JAVASCRIPT、CSS文件注释需要标明作者、文件版本、创建/修改时间、重大版本修改记录、函数描述、文件版本、创建或者修改时间、功能、作者等信息。
/* 注释块 */

 

开发及测试工具约定：

测试工具: 前期开发仅测试FireFox & IE8 & IE9 & Opera &Chrome & Safari

 

Web前端开发规范文档的更多相关文章

  1. 【转载】WEB前端开发规范文档

    本文转载自谈笑涧<WEB前端开发规范文档> 为 新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益 ...

  2. 超详细的Web前端开发规范文档

    规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合 ...

  3. 【转载】开发备必：WEB前端开发规范文档

    规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者 ...

  4. 开发备必：WEB前端开发规范文档

    为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地 ...

  5. 【转】Web前端开发规范文档

    规范目的: 使开发流程更加规范化. 通用规范: TAB键用两个空格代替(WINDOWS下TAB键占四个空格,LINUX下TAB键占八个空格). CSS样式属性或者JAVASCRIPT代码后加“;”方便 ...

  6. Web 前端开发规范文档

    通用规范: TAB键用两个空格代替(WINDOWS下TAB键占四个空格,LINUX下TAB键占八个空格). CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”. 文件内容编码均统 ...

  7. 超详细Web前端开发规范文档

    http://www.w3cfuns.com/notes/26488/c2ae788c77f835357025026a148b9863.html

  8. Web项目开发规范文档

    http://www.kancloud.cn/chandler/css-code-guide/51267

  9. WEB前端开发规范文档[转]

    为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, ...

随机推荐

  1. ACM 最少步数

    最少步数 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 这有一个迷宫,有0~8行和0~8列: 1,1,1,1,1,1,1,1,1 1,0,0,1,0,0,1,0,1 ...

  2. Codeforces Round #210 (Div. 2) C. Levko and Array Recovery

    题目链接 线段树的逆过程,想了老一会,然后发现应该是包含区间对存在有影响,就不知怎么做了...然后尚大神,说,So easy,你要倒着来,然后再正着来,判断是不是合法就行了.然后我乱写了写,就过了.数 ...

  3. GUI之绘画控制

    一.绘制的动力 GUI的绘画是根据消息动作驱动的 主循环应该是 二.绘制的过程 绘画过程应该是这样的: 首先窗口存在上下层关系-> 在绘制时应该从底部窗口开始绘制,逐一绘制 下面是一些特殊的窗口 ...

  4. php在window下的环境配置(VC9)

    配置PHP5:  1. 配置PHP5.3.3,打开php安装目录(笔者是D:\php\php5)可以看到目录下有两个这样的文件php.ini-    development和php.ini-produ ...

  5. java基础--java静态代码块和静态方法的区别、static用法

    转载自: http://blog.sina.com.cn/s/blog_afddb8ff0101aqs9.html 静态代码块:有些代码必须在项目启动的时候就执行,这种代码是主动执行的(当类被载入时, ...

  6. [CareerCup] 15.1 Renting Apartment 租房

    Write a SQL query to get a list of tenants who are renting more than one apartment. -- TABLE Apartme ...

  7. Many2one类型的fields Compute得到的值 搜索

    v8 默认情况下compute的值不存储于数据库中,在高级搜索中也不可以进行搜索 想要对这种类型的值搜索,需要在field的定义中添加search参数,在search的函数中编写搜索逻辑. 例子: r ...

  8. mysql错误代码整理

    1005:创建表失败1006:创建数据库失败1007:数据库已存在,创建数据库失败1008:数据库不存在,删除数据库失败1009:不能删除数据库文件导致删除数据库失败1010:不能删除数据目录导致删除 ...

  9. POJ3468 线段树（区间更新，区间求和，延迟标记）

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 97196   ...

  10. sign in和sign up区别

    如果是网站的话sign up是注册,sign in是登录的意思,另外,sign out退出