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. 19 图形用户界面编程 - 《Python 核心编程》

  2. Hive remote install mode (mysql) step by step

    Prerequisite: Hadoop cluster is avalable; Mysql installed on namenode; Step1: download the latest hi ...

  3. WEB安全--CSRF防御

    CSRF漏洞防御主要可以从三个层面进行,即服务端的防御.用户端的防御和安全设备的防御. 服务端的防御 目前服务器端防御CSRF攻击主要有5种策略(我知道的就这么多):验证HTTP Referer字段, ...

  4. jemter的使用（二）

    在上篇文章中介绍了如何在jmeter中添加请求,并执行查看结果,下面介绍一下,在运行时需要用到的一些管理器 一.HTTP信息头管理器 1.添加信息头管理器 2.添加变量和值,如:Content-Typ ...

  5. hdu-5927 Auxiliary Set(树形dp)

    题目链接: Auxiliary Set Time Limit: 9000/4500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Othe ...

  6. codeforces 577E E. Points on Plane(构造+分块)

    题目链接: E. Points on Plane time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  7. jquery实现点击radio，当选中‘其它’时，显示后面输入框；否则隐藏

    有时候会遇到这么一个很简单的功能: jquery实现点击radio,当选中‘其它’时,显示后面输入框:否则隐藏 html代码: <div> <input type="rad ...

  8. 第2章 面向对象的设计原则（SOLID）：5_迪米特法则

    5. 迪米特法则(Law of Demeter,LoD) 5.1 定义 (1)应尽量减少其他对象之间的交互,对象只和自己的朋友交谈,即对其他依赖的类越少越好(不要和太多的类发生关系). (2)尽量不要 ...

  9. iOS数组使用

    相关链接: ios数组基本用法和排序 NSArray 排序汇总 iOS 数组排序方法 IOS-筛选数组内的元素 关于EnumerateObjectsUsingBlock和for-in之间的较量 [iO ...

  10. log_bin_trust_function_creators变量解释

    在MySQL主从复制机器的master的数据库中创建function,报出如下错误: Error Code: 1418. This function has none of DETERMINISTIC ...