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. Android 魅族等SmartBar适配

    通过反射获取是否含有SmartBar: /** * 判断是否有SmartBar */ private boolean hasSmartBar() { // SP存储是否显示SmartBar if (! ...

  2. ACM Registration system

    Registration system 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 A new e-mail service "Berlandesk&q ...

  3. NOIP 2005 青蛙过河

    做题记录:2016-08-10 21:58:09 题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都 ...

  4. SQL中union运算操作的理解

    在SQL中,对于并运算,可以使用union关键字. 例如: SELECT column_name(s) FROM table_name1 UNION SELECT column_name(s) FRO ...

  5. 开源工作流引擎CCFlow 学习专区

    http://bbs.ccflow.org/index.aspx 官网:http://www.ccflow.org/

  6. C#读取文本播放相应语音【转】

    第一种方案: 利用微软text to speech引擎(TTS),读取文本 (1)添加Microsoft Speech Object Library的项目引用 (2)引入using SpeechLib ...

  7. （转）C#特性学习与使用（为枚举定义Description）

    参考:http://blog.csdn.net/nndtdx/article/details/6905802#comments

  8. ECMAScript中关于如何获取this的定义

    文章中一些名词的翻译存疑,没有查过正式的中文名称 前面都是具体过程的解释,懒得看可以直接看获取思路 有关this的取值请移步JavaScript笔记--this的取值 获取this的过程 Runtim ...

  9. asp.net 网站开发流程总结

    由于这学期要做asp.net的网站开发,导师让我们在前期做详细的计划说明,时间安排.由于网站开发流程不知道,以及需要学什么指示都是盲懂,所以计划安排需在了解大致流程之后才能做出来,一下是询问同学和在网 ...

  10. Hirbernate第三次试题分析

    解析:HQL语句可以执行T-SQL语句,但执行步骤较复杂,需引入jar包等各种配置. 解析:final修饰的成员变量必须由程序员显式地指定初始值.    static一般用于修饰全局变量 解析:Hib ...