标签：
意义：该规范旨在统一前端代码书写，规范前端代码标准，为共同协作打下良好基础，提高工作效率。
文件夹/文件命名
图片文件夹：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{
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;
}
布局属性主要包括：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;
width: 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 */
}
说明：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文件中，以后不用修改每个页面，只需要修改.css
文件而改变页面的样式。
从后往前，依次是，firefox,ie9 ,ie8,ie7,ie6.
selector{
background-color:#f00; /*all*/
background-color:#0ff\0; /* ie 8/9 */
background-color:#0f0\9\0; /* ie9 */
*background-color:#00f; /*ie7*/
_background-color:#ff0; /*ie6*/
background-color//:#090; /*非IE*/
background-color:#900\9; /*所有ie*/
}
Class,id, name,data-*,src, for, type, href,title, alt,aria-*, role
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎
使用（例如，页面内的书签），因此排在第二位。
放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例。
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
html注释: 注释格式 <!--这儿是注释-->, ‘--‘只能在注释的始末位置,不可置入注释文字区域;
css注释: 注释格式 /*这儿是注释*/;
JavaScript注释, 单行注释使用‘//这儿是单行注释‘ ,多行注释使用 /* 这儿有多行注释 */;
17. LOGO的国际标准规范
为了便于INTERNET上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，目前有三种规格：
88*31 这是互联网上最普遍的LOGO规格。
120*60 这种规格用于一般大小的LOGO。
120*90 这种规格用于大型LOGO。
这一条可以根据各自的实际情况来订，但是尽量的合乎标准。
Js代码规范
10.注重与html分离, 减小reflow, 注重性能.
标签：
原文地址：http://www.cnblogs.com/wuph/p/5662649.html
