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. [深入浅出WP8.1(Runtime)]浮出控件（Flyout）

    4.15 浮出控件(Flyout) 浮出控件(Flyout)是一个轻型的辅助型的弹出控件,通常会作为提示或者要求用户进行相关的交互来使用.Flyout控件与Windows Phone里面的弹出框Mes ...

  2. JS:操作样式表1：行内样式

    //访问元素样式1, stye属性只对行内样式有用 var box = document.getElementById("box"); // alert(box.style.col ...

  3. asp.net mvc下的多语言方案 包含Html，Javascript和图片

    在网上查阅了众多方案,觉得路过秋天的方案 解耦性比较好,可以不使用微软的Resource文件,而是将所有的词汇放入在一个txt的词典之中,便于维护. 步骤如下: 1)在整个程序的入口处global.a ...

  4. My Notepad

    I have spent near more two weeks to write this Notepad application. At this moment, I want to share ...

  5. SolrCloud-5.2.1 集群部署及测试

    一. 说明 Solr5内置了Jetty服务,所以不用安装部署到Tomcat了,网上部署Tomcat的资料太泛滥了. 部署前的准备工作: 1. 将各主机IP配置为静态IP(保证各主机可以正常通信,为避免 ...

  6. 用clip剪裁实现半圆

    定义和用法 clip 属性剪裁绝对定位元素. 说明 这个属性用于定义一个剪裁矩形.对于一个绝对定义元素,在这个矩形内的内容才可见.出了这个剪裁区域的内容会根据 overflow 的值来处理.剪裁区域可 ...

  7. 关于http协议的理解

    一.状态码 1.200:请求成功. 2.302:浏览器进行重定向. 3.304:资源已使用,即有缓存. 4.404:请求失败,请求的资源未在服务器上发现. 5.500:服务器端发生错误. 二.php获 ...

  8. Js分页插件，支持页面跳转

    这里先给出API: 你只需要提供一个对象涉及以下几项属性,你来设置属性值,通过jq对象链式调用page()以参数形式来加载这个对象,按照参数要求会自动生成分页功能, 参数中pageEvent是可以让你 ...

  9. js 节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

  10. linux笔记三-------根目录相关说明

    1. /bin   binary二进制文件,可执行程序文件          ls   su    pwd    cd          内部文件是一些指令信息 2. /sbin  super bin ...