WEB前端开发规范

规范目的

　　为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档.本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.

基本准则

　　符合web标准, 语义化html, 结构、表现、行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

文件规范

　　1. html, css, js, image文件均归档至约定的目录中;

　　2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加 功能时查找对应页面;

3. css文件命名: 英文命名, 后缀.css. 共用base.css,其它根据模块或页面内容命名

4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名.

html书写规范

　　1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; mate属性统一为<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">,编码统一为utf-8, 书写时利用IDE实现层次分明的缩进,比如dreamweave里代码格式化命令, 代码缩进使用TAB键,尽量别使用空格

　　2. css和js文件外链至<head>...</head>之间,  css文件要放在js文件上面, js可根据需求放在尾部

3. 引入样式文件或JavaScript文件时, 须略去默认类型声明(html5下的规则), 写法如下:

<linkrel=”stylesheet” href=”…” />

<style>…</style>

<scriptsrc=”…”></script>

4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;

5. 所有编码均遵循xhtml标准, 标签和属性都用小写字母, 且所有标签必须闭合, 包括br (<br />), hr(<hr />)等; 属性值必须用双引号包括; 如,height=80,应该写为height=”80”

6. <body>内的模块要加上注释,比如<!—content--><!—left sidebar-->等

7.注释规范. html注释使用<!--这里是内容(这里面不允许再出现”-”)-->

8.语义化html, 如 标题根据重要性用h系列标题标签, h1-h6的定义应遵循从大到小的原则, 体现文档结构的同时也有利于搜索引擎的查询 (同一页面只能有一个h1,LOGO是一个站点的标志,页面中最重要的地方,所以把它分配给LOGO) , h标签不可段层; 段落标记用p, 列表用ul,ol等,内联元素中不可嵌套块级元素;

遵循表现和结构相分离的原则,代码中不涉及任何表现元素, 如<center> <font>标签等

9.能以背景形式呈现的图片, 尽量写入css样式中; 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title

10. 尽可能减少div嵌套, 原则上div嵌套不超出两层, 如

<div class=“box”>

<div class=“welcome”>欢迎访问XXX, 您的用户名是

<div class=“name”>用户名</div>

</div>

</div>

完全可以用以下代码替代:

<div  class=“box”>

<p>欢迎访问XXX, 您的用户名是<span>用户名</span></p>

</div>

11. 特殊符号应使用转意符,比如 <(&lt;) & >(&gt;)& 空格(&nbsp; )等;

12. 必须为含有描述性表单元素(input,textarea)添加label,如

<p>姓名: <input type=”text” id=”name” name=”name” /></p>

须写成:

<p><label for=”name”>姓名:</label><input type=”text” id=”name” /></p>

13.关注标签语义化

css编码规范

1. 基本书写规范:

1)编码统一为utf-8

2) 尽量不缩写, 除非一眼就能看明白的单词

3) 用英文和下划线组合命名类/ID, 不允许用拼音和数字; 命名时应根据模块内容命名

4) css全部采用小写,每项定义写成一行, 属性的冒号后面要加空格, 每项定义后面要加分号; 如

.box{

Width: 150px;

}

5) 所有装饰性的背景图片都要写css中, 背景图片使用css  sprite

6) 减少使用影响性能的属性, 比如position:absolute || float ; 不允许在css中使用滤镜表达式, 也尽量少用图片repeat, 尤其在body当中,渲染性能极差, 如果需要用repeat的话, 图片的宽或高不能少于8px

7) 请注意采用css 缩写, 简少代码大小, 提高下载速度, 同时使代码简洁可读. 如

.box{

border-color: #fff;

border-width: 1px;

border-style: solid;

}

可以写为一句:

.box{

Border: 1pxsolid #fff

}

8) css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起.

属性列举:

布局定位属性主要包括: margin　＆　padding　＆　float（包括clear）　＆　position（相应的 top,right,bottom,left）　＆　display　＆　visibility　＆　overflow等；

自身属性主要包括: width &  height  & background  &  border;

文本属性主要包括： font　＆　color　＆　text-align　＆　text-decoration　＆　text-indent等；

其他属性包括: list-style(列表样式)　＆　vertical-vlign　＆　cursor　＆　z-index(层叠顺序) 　＆　zoom等. 以上所列出的这些属性只是最常用到的, 并不代表全部

9) 充分利用html自身属性及样式继承原理减少代码量, 比如:

<ul class=”list”>

<li>这儿是标题列表<span>2010-09-15</span></li>

</ul>

css定义

ul.list li{

position: relative;

}

ul.list li span{

position: absolute;

right: 0

}

10) 必须为大区块样式添加注释, 小区块适量注释; 注释使用 /*注释内容*/

11)书写代码前, 考虑并提高样式重复使用率, 减少代码

2.命名规则

         命名应以体现结构或内容为原则.命名以小写英文字母和下划线组合,避免使用数字,要以字母开头. 以下列出常见的基本命名，这个可以根据个人习惯，但是请保证命名符合内容

页面布局：

-页面头部：header

-图标：logo

-右上快捷区域：quick_links

-页面中部：main

-侧栏：side

-主栏：content

-区块：section

-区块顶部：box_top

-区块中部：container

-区块底部：box_bottom

-页面底部：foot

-版权说明：copyright

常用布局：

-列表布局：list

-标签切换：tab

-排行榜：billboard

-表单：post form

-纯文字区域：text area

-翻页：page navigation

通用模块：

-导航栏：navigation

-登陆框：login box

-搜索框：search box

通用样式：

-高亮：highlight

-激活：active，或者on

-清除浮动：fix，或者clear

-图：pic

-文：txt

 

 

图片规范

1.  图片格式仅限于gif || png || jpg

背景图尽量使用png-8的格式(IE6下支持其图片透明度), 对于图片质量要求高的背景图片,使用png-24(IE6下不支持其透明度). 基本原则就是在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;

2. 图片命名根据图片用途使用小写字母和下划线组合, 如send_btn.png等,方便其它成员理解.

3. 运用css sprite技术集中小的背景图或图标,减小页面http请求

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

  1. WEB前端开发规范文档（转）

    http://codeguide.bootcss.com/  编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发 ...

  2. 网站开发进阶(三十八)Web前端开发规范文档你需要知道的事

    Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...

  3. Web前端开发规范文档你需要知道的事

    Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...

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

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

  5. Web 前端开发规范手册

    一.规范目的 Web 前端开发规范手册 1.1 概述 ......................................................................... ...

  6. Web前端开发规范手册

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

  7. Web前端开发规范文档（google规范）

    (Xee:其实没什么规范约束,但是养成一种好习惯,何乐而不为?) 区分大小写 xhtml  区分大小写,xhtml要求 标签名 属性名 值都要小写,并且要有双引号和 标签闭合. css 元素名称以及i ...

  8. Web前端开发规范文档你需要知道的事--HTML、css、js、文档等需要规范内容

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

  9. ***网Web前端开发规范(初稿)

    这几天一直在梳理关于前端方面的开发规范,现在暂时梳理了HTML的开发规范,暂且放置于此! 规范目的: 使开发流程更加规范化 文件命名规范:(需审批) 1.项目命名 全部采用小写方式, 以下划线分隔. ...

随机推荐

  1. iptables 详解

    一:前言   防火墙,其实说白了讲,就是用于实现Linux下访问控制的功能的,它分为硬件的或者软件的防火墙两种.无论是在哪个网络中,防火墙工作的地方一定是在网络的边缘.而我们的任务就是需要去定义到底防 ...

  2. MySQL中EXPLAIN的解释

    EXPLAIN是查看MySQL优化器如何决定执行查询的主要方法,这个功能具有局限性,以为它并总是会说出真相,但是却可以获得最好信息. 学会解释EXPLAIN,你就会了解MySQL优化器是如何工作,你才 ...

  3. 内存流和null字节

    #include <stdio.h> #include <string.h> int main() { ]={}; FILE* fp = fmemopen(buf,," ...

  4. [转]Excel - How to lock cell without using macros if possible

    本文转自:http://stackoverflow.com/questions/11953214/excel-how-to-lock-cell-without-using-macros-if-poss ...

  5. spring hadoop 访问hbase入门

    1.  环境准备: Maven Eclipse Java Spring 版本 3..2.9 2. Maven  pom.xml配置 <!-- Spring hadoop --> <d ...

  6. NOIP2008普及组 题解 -SilverN

    T1 ISBN号码 题目描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1位识别码和3位分隔符, 其规定格式如“x-xxx-xxxxx-x”,其中符号“-”就是分隔符( ...

  7. 转：CentOS设置时区

    from: http://os.51cto.com/art/201004/192805.htm 建议直接使用: 1. session 临时修改查看: tzselect. 然后数字键入,回车 2. 永久 ...

  8. winform listbox与textbox组合提示框 模糊查询

      private void listbox1_MouseClick(object sender, MouseEventArgs e)        {            textbox1.Vis ...

  9. Wireshark命令行工具tshark

    Wireshark命令行工具tshark 1.目的 写这篇博客的目的主要是为了方便查阅,使用wireshark可以分析数据包,可以通过编辑过滤表达式来达到对数据的分析:但我的需求是,怎么样把Data部 ...

  10. C语言 const常量讲解

    //const的本质 //const本质上是伪常量,无法用于数组初始化以及全局变量初始化 //原因在于const仅仅限定变量无法直接赋值,但是却可以通过指针间接赋值 //例如局部常量在栈区,而不在静态 ...