前端开发规范手册2.0
2016-5-10 Jon
目录
一、规范目的
二、文件存放及命名规范
三、html书写规范
四、css 书写规范
五、js书写规范
六、图片规范
七、实践建议
一、规范目的
1.1 概述
为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。 本文档如有不对或者不合适的地方请及时提出，经讨论决定后可以更改此文档.
二、文件存放及命名规范
2.1 构建目录
如存在中英文：
cn 存放中文HTML文件
en 存放英文HTML文件
不存在中英文：
view 存放html文件
css 存放CSS文件
js 存放JavaScript脚本
img 存放图片文件
swf 存放Flash文件
inc 存放include文件
media 存放多媒体文件
project 存放工程项目资料
temp 存放客户原始资料
2.2 html文件命名
首页命名：
统一用index.html
各子页命名原则：
首先应该以栏目名的英语翻译取单一单词为名称命名文件夹。
例如： 关于我们 \ aboutus 信息反馈 \ feedback 产 品 \ product
每一个目录中应该包含一个缺省的html 文件，文件名统一用index.html
2.3 图片命名
图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质例如：广告、标志、菜单、按钮等等。
放置在页面顶部的广告、装饰图案等长方形的图片取名：banner;
标志性的图片取名为：logo;
在页面上位置不固定并且带有链接的小图片我们取名为 button;
在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu;
装饰用的照片我们取名：pic不带链接表示标题的图片我们取名：title;
范例：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg鼠标感应效果图片命名规范为"图片名+_+on/off"。
例如：menu1_on.gif menu1_off.gifc. javascript的命名原则例如：广告条的javascript文件名为 ad.js 弹出窗口的javascript文件名为 pop.jsd. 动态语言文件命名原则以性质_描述，描述可以有多个单词，用“_"隔开，性质一般是该页面得概要。
范例：register_form.asp register_post.asp topic_lock.asp
2.4 说明：文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；
命名原则的指导思想作用：
一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，
二是当我们在文件夹中使用“按名称排例"的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。
三、html书写规范
3.1 基本规范：
3.1.1 良好的注释
<!-- header -->
<div class="header"></div>
<!-- header end -->
3.1.2 标签属性值必须用双引号
自定义属性推荐使用data-开头
3.1.3 文件统一后缀名.html
3.1.4 class和id或其他属性命名使用单词小写分隔符使用'-'而不是'_'
3.1.5 使用alt和title 提示性语言标签
例如：
<p title="给链接文字提示">文字</p>//有需要时添加
<a href="#" title="给链接文字提示">文字</a>//a标签建议都添加
<img src="http://placehold.it/260x120" alt="给图片提示">
alt 用来给图片来提示的，是img标签的都建议添加alt属性。title用来给链接文字或普通文字提示的。
3.1.6 建议使用2个空格或Tab进行代码缩进。（也可使用四个空格）
3.1.7 禁止添加无样式的class，若只是用于js则定义id
3.1.8 同一页面，应避免使用相同的 name 与 id
3.1.9 标签
标签名必须是小写字母
需要闭合的标签必须闭合
常见无需自闭合标签有 input、br、img、hr 等，此类标签勿手动添加'/'进行闭合
禁止标签胡乱嵌套：例如：p里面包含div 详细http://www.w3cfuns.com/notes.php?mod=view&u=16005&id=acf3c2fe1444b17efc7197d001ba0ad8
标签的使用应该遵循标签的语义：
见标签语义
p - 段落
h1,h2,h3,h4,h5,h6 - 层级标题
strong,em - 强调
ins - 插入
del - 删除
abbr - 缩写
code - 代码标识
cite - 引述来源作品的标题
q - 引用
blockquote - 一段或长篇引用
ul - 无序列表
ol - 有序列表
dl,dt,dd - 定义列表
避免使用表格布局（除非就是一个显示数据的表格）
3.2 head区代码规范：
head区是指HTML代码的<head>和</head>之间的内容。
3.2.1 必须按顺序加入的标签:
网页显示字符集 <meta charset="UTF-8">
网页标题 <title>xxxxxxxxxxxxxxxxxx</title>
搜索关键字 <meta name="keywords" content="xxxx,xxxx,xxx,xxxxx">
网站简介 <meta name="description" content="xxxxxxxxxxxxxxxx">
让使用ie7的浏览器使用本机安装最新的浏览器渲染 解决部分ie7 bug（不能直接解决问题，但很实用）
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
网页的css规范 <link rel="stylesheet" href="../css/style.css">
3.2.2 可以选择加入的标签
移动端head里面需要加入
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
网页制作者信息
<meta name="author" content="webmaster@maketown.com">
设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
<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://www.yuanqiao.win"> 5指时间停留5秒
网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
content的参数有all,none,index,noindex,follow,nofollow。默认是all。
<meta name="robots" content="none">
收藏夹图标
<link rel="Shortcut Icon" href="favicon.ico">
所有的javascript的调用尽量采取外部调用，一般放到页面底部
<script src="js/xxxxx.js"></script>
3.2.3 杜绝加入的标签
<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容ie8
3.3 网页制作细节
3.3.1 字体：
字体样式均在css文件调试，禁止页面出现font标签。
中文应首选使用微软雅黑、宋体。英文和数字首选使用verdana 和arial 两种字体。
3.3.2 段落中勿加<br>。
3.3.3 汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。
3.3.4 空格和文字缩进处理
空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。勿使用多个空格符
3.3.5 行距建议用数字或百分比来定义，常用的两个行距的值是line-height:1.5或line-height:120%/150%
3.3.6 链接
链接路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，
例如：不必这样：<a href="aboutus/index.html"> 而应该这样：<a href="aboutus/">.
所有内页指向首页的链接写成<a href="/"></a>
使用<a href="javascript:;"></a>替代<a href="#"></a>
3.3.7 td标签
td标签里面代码应紧邻td结束标签
例如：
使用<td><img src="../img/a.jpg"></td>替换<td><img src="../img/a.jpg"> </td>
3.4 缓存
禁止网页被缓存
html页面
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">
ASP网页
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.cachecontrol = "no-cache"
3.5 编码
HTML 文件使用无 BOM 的 UTF-8 编码。
3.6 保证 favicon 可访问 两种方式
1，在 Web Server 根目录放置 favicon.ico 文件。
2，使用 link 指定 favicon。
<link rel="shortcut icon" href="path/to/favicon.ico">
3.7 图片
3.7.1 禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。
3.7.2 为img添加width和height属性，避免页面抖动。
3.7.3 img标签还是css背景
产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载。
无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 CSS 背景图实现。
3.8 表单
3.8.1 有文本标题的控件必须使用 label 标签将其与其标题相关联。
<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>
3.8.2 使用 button 元素时必须指明 type 属性值。方便区分是提交还是普通按钮。
3.8.3 尽量不要使用按钮类元素的 name 属性。
3.8.4 负责主要功能的按钮在 DOM 中的顺序应靠前。
3.9 多媒体
在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素。
[建议] 使用退化到插件的方式来对多浏览器进行支持。
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<object width="100" height="50" data="audio.mp3">
<embed width="100" height="50" src="audio.swf">
</object>
</audio>
<video width="100" height="50" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<object width="100" height="50" data="video.mp4">
<embed width="100" height="50" src="video.swf">
</object>
</video>
四、css 书写规范
4.1 基本原则：
4.1.1 页面内的样式加载必须用链接方式<link rel="stylesheet" href="style/style.css"> 禁止使用@import
4.1.2 三种css文件
reset.css //浏览器重制css
base.css //共用css 后期可和reset.css合并
style.css //开发css
4.1.3 必须为大区块样式添加注释, 小区块适量注释;
/* footer */
内容区
/* end footer */
4.1.4 书写代码前, 考虑并提高样式重复使用率
4.1.5 像素一般使用px单位
4.1.6 CSS文件使用无 BOM 的 UTF-8 编码。
4.1.7 css属性选择器值和属性值必须用双引号
4.1.8 属性
没个属性占一行，属性两个以内可写在同行。
属性定义必须以分号结尾，即使只有一个属性
4.1.9 尽量不使用 !important 声明。
4.1.10 需要在 Windows 平台显示的中文内容，其字号应不小于 12px。
4.1.11 文件顶部注释（推荐使用）
/*
* @description: 中文说明
* @author: name
* @update: name (2013-04-13 18:32)
*/
4.1.12 复制代码2、模块注释
/* module: module1 by 张三 */
4.2 css属性书写顺序
4.2.1 建议遵循 布局定位属性-->自身属性-->文本属性-->其他属性（此条可根据自身习惯书写）
属性列举:
布局定位属性主要包括: 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等.
另外，如果包含 content 属性，应放在最前面。
4.2.2 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;
4.2.3 兼容性属性的使用需要加前缀
Firefox:-moz-box-shadow
Safari:-webkit-box-shadow
Opera:-o-box-shadow
IE:-ms-box-shadow
4.2.4 属性缩写
推荐
.post {
font: 12px/1.5 arial, sans-serif;
}
避免：
.post {
font-family: arial, sans-serif;
font-size: 12px;
line-height: 1.5;
}
4.2.5 属性值：
当数值为 0 - 1 之间的小数时，省略整数部分的 0
url() 函数中的路不需加引号。background: url(bg.png);
属性值为0是可省略长度单位
颜色值可以缩写时，必须使用缩写形式。
4.3 选择器
4.3.1 选择器的嵌套层级应不大于 3 级
4.3.2 建议写法
建议.list li span{} 避免ul.list li span{}
建议.list li span{} 避免.list .listli .listlispan{}
建议#header{} 避免.wraper #header{}
建议.div p{} 避免div p{}
建议ul>li{} 不建议ul li{}
杜绝在css里面直接写标签 例如 div{}img{}p{}h1{}
4.4 网站多个小图
图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作
png图片为了保证清晰度一般使用png-24
4.5 书写格式
.class{
width:200px;
height:300px;
}
4.6 命名原则
4.6.1 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化。
4.6.2 id和class
id是唯一的, class是可以重复的
规避class与id重名
4.6.3 重复使用率高的命名, 请以自己代号加中线起始, 比如i-clear;
4.6.4 常用命名参考
(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
五、js书写规范
5.1 一般js中使用单引号（个别情况除外）
5.2 书写过程中, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发,
以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || ...);
必须使用
function add(){
//dosomething
}
避免使用
function add
{
//dosomething
}
5.3 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;
5.4 js命名
1.4.1 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;
jQuery变量要求首字符为'$', 其他与原生JavaScript 规则相同, 如: $iTaoLun; 另, 要求变量集中声明, 避免全局变量.
5.4.2 类命名:使用名词 首字母大写, 驼峰式命名。如 ITaoLun、Engine。
5.4.3 函数命名:使用动宾短语，首字母小写驼峰式命名。如getStyle()。
5.4.4 命名语义化, 尽可能利用英文单词或其缩写;
5.4.5 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() innerText;
5.4.6 常量 使用 全部字母大写，单词间下划线分隔 的命名方式。
示例：var HTML_ENTITY = {};
5.4.7 boolean 类型的变量使用 is 或 has 开头 var isReady = false;
5.5 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;
5.6 代码结构明了, 加适量注释. 提高函数重用率;
5.7 注重与html分离, 减小reflow, 注重性能.
5.8 使用"==="而不是"=="
5.9 不得省略语句结束的分号,在 if / else / for / do / while 语句中，即使只有一行，也不得省略块 {...}
5.10 函数定义结束不允许添加分号。如果是函数表达式，分号是不允许省略的
例：function funcName(){} var funcName = function(){};
5.11 良好的注释
单行注释 //
多行注释 /**/
5.12 判断 null 或 undefined
if (noValue == null) {}
5.13 不允许修改和扩展任何原生对象和宿主对象的原型。
// 以下行为绝对禁止
String.prototype.trim = function(){};
5.14 清空数组使用 .length = 0
5.15 避免使用直接 eval 函数、with。
如果有特殊情况需要使用直接 eval，需在代码中用详细的注释说明为何必须使用直接 eval
六、图片规范
6.1 关于logo尺寸
国际标准规范为了便于互联网上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，
目前有三种规格：88*31 这是互联网上最普遍的LOGO规格。120*60 这种规格用于一般大小的LOGO。120*90 这种规格用于大型LOGO。
6.2 图片大小
首页大图应控制在200K 以下，尽可能的使用矢量图形和Action来减小动画大小。非首页静态页面含图片大小应限定在 70K 左右，尽可能的使用背景颜色替换大块同色图片。
6.3 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹。
6.4 图片格式仅限于gif(动画)||png(小图、透明)||jpg(大图)。
6.5 命名全部用小写英文字母||数字||_的组合，其中不得包含汉字||空格||特殊字符；尽量用易懂的词汇,
便于团队其他成员理解;另,命名分头尾两部分,用下划线隔开,比如ad_left01.gif||btn_submit.gif。
6.6 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间。
6.7 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明)。
七、实践建议
7.1 开发平台的选择
推荐在谷歌上进行开发调试。
7.2 css兼容性规范
1、页面头部加入以下代码，先写好页面效果，然后针对不同ie版本优雅降级。
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="zh-CN">
<!--<![endif]-->
就可以在css后面加入下面代码来针对ie版本调试
/*小于ie9*/
.lt-ie9 .demo01{
background: blue;
}
/*小于ie8*/
.lt-ie8 .demo01{
background: red;
}
/*小于ie7*/
.lt-ie7 .demo01{
background: yellow;
}
7.3 各个浏览器前缀
\9:用于 IE6，IE7，IE8，IE9
\9\0:(不常用)只有IE9有效，但ie7会失效
\0:(不常用)适用于ie8和ie9,ie7会失效
*和+:用于IE6,IE7
_:只有ie6识别
>:ie5.5
Firefox:-moz-box-shadow
Safari:-webkit-box-shadow
Opera:-o-box-shadow
IE:-ms-box-shadow
!important 优先级最高
发表评论：