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. Codeforces Round #243 (Div. 2) C. Sereja and Swaps

    由于n比较小,直接暴力解决 #include <iostream> #include <vector> #include <algorithm> #include ...

  2. 洛谷 P1144 最短路计数 Label:水

    题目描述 给出一个N个顶点M条边的无向无权图,顶点编号为1-N.问从顶点1开始,到其他每个点的最短路有几条. 输入输出格式 输入格式: 输入第一行包含2个正整数N,M,为图的顶点数与边数. 接下来M行 ...

  3. HDU 1700 Points on Cycle(向量旋转)

    题目链接 水题,卡了下下精度. #include <cstdio> #include <iostream> #include <cmath> using names ...

  4. 【Poj】 p2342 Anniversary party（树形DP第一道）

    Anniversary party Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5523   Accepted: 3169 ...

  5. usaco silver刷水~其实是回顾一下，补题解

    [BZOJ1606][Usaco2008 Dec]Hay For Sale 裸01背包 ;i<=n;i++) for(int j=m;j>=a[i];j--) f[j]=max(f[j], ...

  6. 去掉inline-block元素默认间距的几种方法

    方法1:使用负margin值一般是-3px,部分浏览器可能不同,不太推荐使用. 方法2:去掉多余空格将元素紧挨着写去掉多余空格,但降低了可读性. 方法3:使用font-size:0在外层父元素加上fo ...

  7. select..in(参数化) 解决注入式问题

    方案1 为where in的每一个参数生成一个参数,写法上比较麻烦些,传输的参数个数有限制,最多2100个,可以根据需要使用此方案 using (SqlConnection conn = new Sq ...

  8. 如何查看linux系统是32位还是64位

    1.#uname -a 如果有x86_64就是64位的,没有就是32位的 这是64位的  # uname -a  Linux desktop 2.6.35-23-generic #37-Ubuntu ...

  9. java pio项目使用

    一.简介 pio是apache的一个针对microsoft office的一个开源项目. Apache POI - the Java API for Microsoft Documents 官网地址: ...

  10. [LintCode] Remove Linked List Elements 移除链表元素

    Remove all elements from a linked list of integers that have value val. Have you met this question i ...