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。

1

<meta charset="UTF-8">

 

  <HEAD>中添加信息。

1

2

3

4

5

6

7

8

9

10

<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文件外链至页面底部。

1

2

3

4

5

6

7

8

9

10

11

12

<!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库文件,文件名须包含库名称及版本号及是否为压缩版。

1

2

jQuery-1.8.3.min.js

  

  引入JAVASCRIPT插件, 文件名格式为库名称+.+插件名称。

1

jQuery.cookie.js

  命名方式:

1

2

3

4

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书写顺序

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

.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

}; 

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

1

2

3

4

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

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

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

<span style="font-size: 15px;"><strong>使用<code>z-index</code>属性尽量<code>z-index</code>的值不要超过150(通用组的除外),页面中的元素内容的<code>z-index</code>不能超过10(提示框等模块除外但维持在150以下),不允许直接使用(999~9999)之间大值。</strong></span> 

 

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

1

2

3

position:absolute;

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

<span style="font-size: 15px;"><strong>减少在<code>CSS</code>中使用滤镜表达式和图片repeat,尤其在body当中,渲染性能极差, 如果需要用repeat的话,图片的宽或高不能少于8px。</strong></span>

 

javaScript书写规范:

  代码格式

1

2

3

4

5

"()"前后需要跟空格

"="前后需要跟空格

","后面需要跟空格

JSON对象需格式化对象参数

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

  "{}"格式如下

1

2

3

if (a==1) {

//代码

}; 

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

1

2

3

4

5

new Number

new String

new Boolean

new Object //用{}代替

new Array //用[]代替

图片规范:

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

1

2

header_btn.gif

header_btn2.gif

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

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

注释规范:

1

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

/* 注释块 */

  开发及测试工具约定:

1

<span style="font-size: 16px;">测试工具: 前期开发仅测试FireFox & IE8 & IE9 & Opera &Chrome & Safari</span>

web开发规范文档的更多相关文章

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

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

  2. Web前端开发规范文档

    Web前端开发规范文档 规范目的: 使开发流程更加规范化. 通用规范: TAB键用两个空格代替(windos下tab键占四个空格,linux下TAB键占八个空格). CSS样式属性或者JAVASCRI ...

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

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

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

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

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

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

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

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

  7. Web 前端开发规范文档

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

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

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

  9. Web项目开发规范文档

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

随机推荐

  1. WebStorm换主题(护眼)

    一.下载喜欢颜色的主题 http://www.phpstorm-themes.com/ 我用的豆沙绿护眼 <scheme name="Solarized Light My" ...

  2. 随机生成一份试卷,试卷的种类分为单选、多选、判断三种题型。nodejs6.0 mysql

    背景:从数据库中,随机生成一份试卷,试卷的种类分为单选.多选.判断三种题型. 首先我需要生成随机数id(在这之前我需要知道数据库中各个题型的题数,这样我才能设置随机数),并依据生成的随机数id,去查找 ...

  3. 118. Pascal's Triangle@python

    Given a non-negative integer numRows, generate the first numRows of Pascal's triangle. Example: Inpu ...

  4. (55)zabbix模板嵌套

    在zabbix使用过程中,在某些情况下,一个host需要link多个模板.这么做显得比较麻烦,很容易忘记到底要link哪些模板,我想link一个模板就达成这个目标,行不行?然没问题,zabbix模板内 ...

  5. pssh批量管理服务器

    pssh命令是一个python编写可以在多台服务器上执行命令的工具,同时支持拷贝文件,是同类工具中很出色的,类似pdsh,个人认为相对pdsh更为简便,使用必须在各个服务器上配置好密钥认证访问. 1. ...

  6. 【Linux】启动Tomcat遇到Neither the JAVA_HOME nor the JRE_HOME environment variable is defined

    找不到JAVA_HOME路径,需要做以下变更: 找到启动路径所在的目录: cd bin/ vi catalina.sh 加入以下信息: export JAVA_HOME=/home/gongzi/ht ...

  7. 又面试了Python爬虫工程师,碰到这么几道面试题,Python面试题No9

    第1题:动态加载又对及时性要求很高怎么处理? 如何知道一个网站是动态加载的数据? 用火狐或者谷歌浏览器 打开你网页,右键查看页面源代码,ctrl +F 查询输入内容,源代码里面并没有这个值,说明是动态 ...

  8. Lex与Yacc学习(一)之环境配置篇

    Abstract 在开发程序的过程中经常会遇到文本解析的问题,例如:解析 C 语言源程序,编写 脚本引擎等等,解决这种文本解析的方法有很多,一种方法就是自己手动用 C 或者 C++直接编写解析程序,这 ...

  9. cs229_part2

    part2 这节课主要讲的是生成式模型,那么与这个生成式模型相对于的就是我们上节课所讲那几个辨别式模型.所以生成式模型和辨别式模型的区别是什么呢.我先给出数学上的定义: 这是我们上节课线性回归所用的给 ...

  10. conda管理包

    清理 conda clean --lock --tarball --package (安装包) 安装或更新包 conda install numpy=1.9.3 conda update numpy= ...