意义：该规范旨在统一前端代码书写，规范前端代码标准，为共同协作打下良好基础，提高工作效率。
文件夹/文件命名
图片文件夹：image，images，img
Js代码文件夹：js
Css文件夹：css
首页：index。
其他页面根据具体情况来定，可以是中文名，英文名，拼音等，以方面认识为主。
页面框架布局
样式名称
样式名称的规则为根据对应位置的英文来命名。如：
头部：header
导航：nav
页尾：footer
消息：news，message
分页：page，
下拉：select
复选框：checked，
单选：radio，
返回：back，
按钮：btn
登录：login
注册：reg
选择：choose
时间:time
星星：start
图标：ico
列表：list
高度：height，
宽度：width
边线：border,borderTop, borderRight,borderBottom,BorderLeft
外边距：margin，marginTop,marginRight,marginBottom,marginLeft
内边距：padding, paddingTop，paddingRight，PaddingBottom，paddingLeft
清除：clear，clearfix
浮动:floatLeft，floatRight
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
注释的写法:
/* Footer */
内容区
/* End Footer */
id的命名:
(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
Header区域代码规范
head区是指HTML代码的<head>和</head>之间的内容。
必须加入的标签
公司版权注释 <!--- The site is designed by EHM,Inc 07/2005 --->
网页显示字符集
中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
万国码：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
英 语：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
网页制作者信息 <META name="author" content="webmaster@maketown.com">
网站简介 <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
搜索关键字 <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
网页的css规范 <LINK href="../css/style.css" rel="stylesheet" type="text/css">
网页标题 <title>xxxxxxxxxxxxxxxxxx</title>
可以选择加入的标签
设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
<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.****.com"> 5指时间停留5秒
网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
<META NAME="robots" CONTENT="none">
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
/*********移动端mate代码*********/
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
收藏夹图标 <link rel = "Shortcut Icon" href="favicon.ico">
所有的javascript的调用尽量采取外部调用.
<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>
附<body>标签：
<body>标签不属于head区，这里强调一下，为了保证浏览器的兼容性，必须设置页面背景<body bgcolor="#FFFFFF">
样式定义规则：
- 尽量使用样式拼接，使用多个样式进行定义。如：按钮样式，主样式btn{}定义高度，行高，居中，圆角等。用宽度样式定义按钮的宽度，有背景样式定义按钮的背景，用内边距定义内边距。等等。
.btn{
Height:30px;
Line-height:30px;
Text-align:center;
Font-size:14px;
Border-radius:4px;
Border:none;
}
.btn_big{
Width:100px;
Background-color:#f00;
Color:#fff;
}
- 定义样式是尽量的用具体的样式属性来定义。如：背景图片：background-image,背景颜色：background-color,左侧外边距：margin-left,右侧内边距：padding-right,等等。
- 布局尽量用相同的样式来定义，通过模块来展示不同。尽量考虑通用性。减少重复代码编写。
- 属性的书写顺序，布局定位属性-->自身属性-->文本属性-->其他属性如：position，top，left，z-index，width，height，font-size，color，cursor等等。
布局属性主要包括：display、list-style、position（相应的top、right、bottom、left）、float、clear、visibility、overflow；
自身属性主要包括：width、height、margin、padding、border、background；
文本属性主要包括：color、font、text-decoration、text-align、vertical-align、white-space。 其他：content。
相关的属性声明应当归为一组，并按照下面的顺序排列：
Positioning
Box model
Typographic
Visual
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box
model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
- opacity: 1;
}
- 代码缩进。Css样式，html，js代码都书写是都必须注意缩进。整齐统一，既方便自己查阅，也方便同事查阅。
- 所有的标记都必须合理嵌套。
说明：XHTML要求有严谨的结构，所有的嵌套都必须按顺序。下面是一些标记的禁止嵌套：
a：不能包含其他的a元素；
pre：不能包含其他img、object、big、small、sub或者sup元素。
button：不能包含其他input、select、textarea、label、button、form、fieldset、iframe或者isindex元素。
label：不能包含其他的label元素。 form：不能包含其他的form元素。
- 所有的特殊符号用转义编码表示 说明：以下是一些常用的特殊符号以及对应的转义编码，注意转义字符之间无空格。
- css和Javascript尽量通过外部引用，不要在XHTML中出现表现形式的代码
说明：将样式写在一个独立的.css文件中，以后不用修改每个页面，只需要修改.css
文件而改变页面的样式。
- css样式定义的边距方向，劲量一致。如：为了进行页面区块分隔，设置上下边距，要么都设置为上边距，要么都设置为下边距，不要混合使用。
- 页面通用的一些样式属性可以单独定义。拼接使用。如：margin-left，padding-left，clear，position，font-size，font-family等等。
- 样式书写前，需要清除默认样式，统一样式基本设置。
- 对页面的一些基本样式需要统一设置，如最小字号，默认文字颜色，基本字体，基础行高等等。
- 注意样式的兼容性，在需要兼容的地方使用兼容性写法，在需求要求的浏览器兼容考虑范围内进行兼容性设置。
从后往前，依次是，firefox,ie9 ,ie8,ie7,ie6.
selector{
background-color:#f00; /*all*/
background-color:#0ff ; /* ie 8/9 */
background-color:#0f09 ; /* ie9 */
*background-color:#00f; /*ie7*/
_background-color:#ff0; /*ie6*/
background-color//:#090; /*非IE*/
background-color:#9009; /*所有ie*/
}
- HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
Class,id, name,data-*,src, for, type, href,title, alt,aria-*, role
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎
使用（例如，页面内的书签），因此排在第二位。
- 将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者
放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例。
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min- 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
- 注意为样式写注释，可以为某一模块，用注释标注出来；也可以是某一功能的样式用注释标注出来。以方便查看，和方便选择为前提。
html注释: 注释格式 <!--这儿是注释-->, '--'只能在注释的始末位置,不可置入注释文字区域;
css注释: 注释格式 /*这儿是注释*/;
JavaScript注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 /* 这儿有多行注释 */;
17. LOGO的国际标准规范
为了便于INTERNET上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，目前有三种规格：
88*31 这是互联网上最普遍的LOGO规格。
120*60 这种规格用于一般大小的LOGO。
120*90 这种规格用于大型LOGO。
这一条可以根据各自的实际情况来订，但是尽量的合乎标准。
Js代码规范
- 书写过程中, 每行代码结束必须有分号; 原则上所有功能均根据项目需求进行原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || ...);
- 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;
- 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun; jQuery变量要求首字符为'_', 其他与原生JavaScript 规则相同, 如: _iTaoLun; 另, 要求变量集中声明, 避免全局变量.
- 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;
- 函数命名: 首字母小写驼峰式命名. 如iTaoLun();
- 命名语义化, 尽可能利用英文单词或其缩写;
- 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;
- 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;
- 代码结构明了, 加适量注释. 提高函数重用率;
10.注重与html分离, 减小reflow, 注重性能.