web前端开发规范
本文原创，这里首先声明，转载注明本文出处，翻版必究！
web前端开发规范的现实意义
1、提高团队的协作能力
2、提高代码的重复利用率
3、可以写出质量更高，效率更好的代码
4、为后期维护提供更好的支持
5、可读性高
一、命名规则
1、html命名规则：
a、文件名称命名规则：统一使用小写英文字母、数字、下划线的组合，不得包含汉字空格和特殊字符
2、命名原则：方便理解、方便查找
b、索引文件命名原则：index.html、index.htm、index.asp、index.aspx、index.jsp、index.php
c、各子页命名的原则：统一用翻译的英文命名、统一用拼音命名，注意：不要英语拼音混用eg:关于我们:aboutus.html 新闻列表:newslist.html 产品详细：prodetail.html
3、图片命名规则：
a、图片名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质，例如：广告、标志、菜单、按钮等banner_1.jpg、banner_2.jpg、menu_bg.jpg、 logo.png
b、常规命名规则：
标志性的图片取名：logo
装饰性图片：pic
不带链接表示标题的图片：title
放置在页面顶部的广告、装饰图案等长方形的图片取名：banner
在页面上位置不固定并且带有链接的小图片我们取名为button
在页面上某一个位置连续出现，性质相同的链接栏目的图片为menu
4、脚本文件和动态文件命名规则：
a、一般使用脚本功能的英文小写缩写命名：
实际模块：eg：广告条的javascript文件名为ad.js 弹出窗口的javascript文件名为:pop.js
共用模块：eg：js文件命名：英文命名，后缀.js 共用common.js
外部资源：eg：jquery.min.js、jquery.date.js
b、动态语言文件命名规则：以性质_描述，描述可以有多个单词，用"_"隔开，性质一般是该页面的概要
如：register_form.php、register_post.php、register_lock.php
二、文件存放位置规范
文件夹说明：flash存放flash文件、images存放图片文件、css存放css文件、script存放脚本文件、js存放自定义脚本文件、media存放媒体文件
网站页面位置存放：客户端：web（或者网站根目录）、服务器端：admin
三、CSS书写规范
1、CSS基础类型
CSS：CSS指层叠样式表。
样式定义如何显示HTML元素
样式通常存储在样式表中
把样式添加到HTML4.0中，是为了解决内容与表现分离的问题
外部样式表可以极大的提高工作效率
外部样式表通常存储在CSS文件中
多个样式定义可层叠为一
商业开发：
重新定义样式：为设计师重新定义已有的HTML标签样式，影响全部的被设定标签样式，用于统一网页中某一标签的样式定义。如：hr{border:1px dotted #333;}
链接状态样式：链接状态样式为设计师对链接不同状态设定特殊样式，影响被使用本样式区域中的链接。a.nav:link(中间无空格)只能修饰类名为nav的<a>标签。.nav a:link可以修饰类为nav 下的所有的<a>标签。
自定义样式：样式为设计师自定义的新CSS样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。如：.border{border:1px solid #333;} .red{color:red;}
2、Class与ID的使用规范：
区别：ID在页面中只有一个，所以使用ID表示的CSS样式只能表示一个元素的样式
class在一个页面中可以有多个，也就是说定义一个CSS样式后，可以有多个元素引用这个class
书写方式：ID书写样式：#title{font-size:18px;}
class书写样式：.title{font-size:18px;}
命名注意：大的框架命名：如：header/footer/wrapper/left/right之类的由设计框架之人统一命名。其他样式由小写英文&数字&_来组合命名，避免使用中文拼音，尽量使用简易的单词组合；总之命名要有语义化，简明化。
避免命名重复：注意1：通过从属写法规避<div id="mainnav"><div class="firstnav"></div></div>;样式写法：#mainnav .firstnav{...};
注意2：规避class与id重名，不建议使用Id选择器
注意3：重复使用率高的命名，可加代号加下划线起始，如：title_news
注意4：取父级元素id/class命名部分命名，如：<div id="mainnav"><div class="main_frist"></div></div>
3、CSS命名规范：
意义：有助于提升团队开发效率、有助于后期产品的维护、有助于后期二次开发。
页面结构 |
|
| 容器：container/wrap | 整体宽度：wrapper |
| 页头：header | 内容：content |
| 页面主体：main | 页尾：footer |
| 侧栏：sliderbar | 栏目：column |
| 中间内容：center | |
导航 |
|
| 导航：nav | 主导航：mainnav/gobalnav |
| 子导航：subnav | 顶导航：topnav |
| 边导航：sidebar | 左导航：leftbar |
| 右导航：rightbar | 边导航图标：sidebarIcon |
| 标题：title | |
功能 |
|
| 标志：logo | 登陆：login |
| 登陆条：loginbar | 注册：register |
| 产品：products | 产品价格：products_prices |
| 产品评价：products_review | 编辑评价：editor_review |
| 最新评价：news_release | 广告/标语：banner |
| 摘要：summary | 生产商：publisher |
| 缩略图：screenshot | 常见问题：fags |
| 关键词：keyword | 博客：blog |
| 论坛：forum | 搜索：search |
| 搜索输入框：search_input | 搜索输出：search_output |
| 搜索结果：search_results | 加入我们:joinus |
| 状态：status | 按钮：btn |
| 滚动：scroll | 版权所有：copy_right |
| 电话：tel | 在线订购：on_line_order |
| 行内动态：trends | 新闻动态：news_trends |
| 行内新闻：trade_news | 下载中心：download |
| 热点：hot | 图标：icon |
| 在线调查：online_inquiry | 注释：note |
| 购物车：shop/cart | 投票：vote |
| 友情链接：friendlink | 版权：copyright |
四、HTML代码规范
1、head区域代码规范
必须加入的标签：
keywords：<meta name="keywords" content="xxxxxxx">
字符集：<meta charset="UTF-8">
网站标题：<title>Title</title>
css：<link rel="stylesheet" href="../css/reset.css">
可选加入的标签：
公司版权注释：<!--The site is designed by xiaojunjun 06/2017-->
网页制作者信息：<meta name="author" content="22@qq.com">
网站简介：<meta name="description" content="该网站是xxxxxx">
设定网页的到期时间，一旦网页过期，必须到服务器上重新订阅。如下：
<meta http-equiv="expires" content="wed 26 Feb 2019 08:21:52 GMT">
禁止浏览器从本地机缓存中调阅页面内容如下：
<meta http-equiv="Pragma" content="no-cache">
用来防止别人在框架里调用你的页面如下：
<meta http-equiv = "Window-target" content="_top">
网页搜索机器人向导，用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引如下：
<meta name="robots" content="none">
自动跳转：<meta http-equiv="Refresh" content="5;url=http://baidu.com">
收藏夹图标：<link rel="Shortcut Icon" href="favicon.ico">
所有的javascript的调用尽量采用外部调用。
2、字体规范
在设定字体样式时，对于文字字号样式和行间距应必须使用CSS样式表，禁止在页面中出现<font-size=?>标记
字体大小：在网页中中文应首选宋体，英文和数字首选使用verdana和arial两种字体，一般使用中文宋体的9pt或12px和14.7px这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px的字号比较合适
为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用<br>来人工干预分段
不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外，汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。
请不要在网页中连续出现多于一个的也尽量少用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用text-indent、padding、margin、hspace、vspace以及透明的gif图片来实现。
行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%;
排版中我们经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义p{text-indent:2em;}
3、链接和表格使用规范
链接：
网站中的链接路径全部采用相对路径
一般链接到某一目录下的缺省文件的链接路径不必写全名：如<a href="aboutus/index.html">应该写成<a href="aboutus/">
在浏览器里，当我们点击空链接时，它会自动将当前页面重置到首端，从而影响用户正常的阅读内容。因此我们使用<a href="javascript:void(0);">代替原来的"#"标记
表格：
尽量避免表格嵌套过多：如果过多会对浏览器加载延长时间，带来不友好的用户体验。
在写<tabel>互相嵌套时，严格按照的规范，对于单独的一个<table>来说，<table><tr>对齐，<td>缩进两个半角空格,<td>中如果还有嵌套的表格，<table>也缩进两个半角空格，结束标记应该与<td>处于同一行，不要换行。
应使用：<td><img src="../images/logo.png"></td>
4、下载和浏览器速度控制
文件下载可以通过a标签href指向路径直接实现（<a href="message.pdf" ></a><a href="message.zip" ></a>）
图片下载则直接在网页中展示（<a href="day/logo.png"></a>）如何解决。（通过对图片压缩）或通过ASP.NET输出文件流的形式可以直接下载，后台实现；或者PHP/JAVA
注意：首页flash网页大小应限定在200k以下，尽可能的使用矢量图形和Action来减少动画大小
非首页静态页面含图片大小应限定在70K左右，尽可能的使用背景颜色替换大块同块色图片。（1、能够用背景色替换的尽量使用背景色。2、尽量切小图片进行平铺）
5、include/iframe嵌套
页面嵌套在另一个页面中。如果多个页面都需要这个模块，可以才有嵌套的方式，方便后期的维护也就是维护一个页面，就可以同时改变多个页面的效果
include对于jsp <%@include file="../inc/index_top.jsp"%>
对于asp/asp.net <!--#include file="inc/index_top.asp"-->
对于htm <!--#include file="b.htm"-->
iframe：在html中想达到嵌套的效果，可以使用iframe标签
<iframe frameborder=0 border=0 width=300 height=300 src="b.html"></iframe>
HTML与XHTML之间的差异在HTML4.1StrictDTD和XHTML1.0StrictDTD中，不支持iframe元素
<iframe src="i/eg_landscape.jpg"></iframe><p>一些老的浏览器不支持iframe</p><p>如果得不到支持，iframe是不可见的</p>
6、title与alt
相同点：都是显示性语言标签
不同点：alt一般是对图片进行展示描述（当图片不显示时，显示该提示文字）
title一般是对文字标签进行提示（当鼠标悬停在图片或文字上时，显示该提示文字）
如：<a href="index.html" title="跳转到首页">首页</a>
<img src="../images/logo.png" alt="logo图" title="logo图">
7、缓存的注意事项
缓存是数据交换的缓冲区（称作Cache），当某一硬件要读取数据时，会首先从缓存中查找需要的数据，如果找到了则直接执行，找不到的话则从内存中找，由于缓存的运行速度比内存快的多，所以缓存的作用就是帮助硬件更快的运行。
缓存可以提高浏览器浏览页面的效率
缓存的原理：浏览器第一次请求页面时-》没有缓存-》向web服务器请求-》请求响应，缓存协商-》呈现
当浏览器第二次请求页面时-》此时有缓存-》是否过期-》如果过期（判断Etag?是，则向web服务器请求带if-None-Match）（否、进行last-Modified判断？是则向web服务器请求带if-Modified-Since，否的话，就向web服务器请求，请求响应，缓存协商-》呈现）服务器决策200or304如果200直接进行响应，缓存协商-》呈现、304的话从缓存中读取-》呈现，如果不过期直接从缓存中读取数据然后呈现。
缓存可能带来的哪些后果？对于一些涉及用户重要信息的页面，如果页面被缓存则很危险。占用大量的硬盘资源
设置页面不被缓存：<meta http-equiv="pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache, must-revalidate"><meta http-equiv="expires" content="0">
<!--或者js中加入类似下面的代码，让每次的链接都不一样-->
8、banner和logo注意规范
banner：横幅广告（网络广告的主要形式，一般使用GIF格式的图像文件，可以使用静态图形，也可以使用多帧图像拼接为动画图像）
尺寸：100*100、120*60、120*240、120*600、160*160、180*80、960*120（常用）等
推荐网站：http://www.zhaoxi.net/
logo：为了便于internet上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准
其中关于网站的LOGO，目前有三种规格：88*31这是互联网上最普遍的LOGO规格，120*60这种规格用于一般大小的LOGO，120*90这种用于大型的LOGO
五、javaScript书写及使用规范
1、书写
书写过程中，每行代码结束必须有分号；
原则上所有功能均根据XXX项目需求原生开发
以避免网上down下来的代码造成代码污染（沉冗代码与现有代码的冲突...）
2、变量命名格式
变量命名：驼峰式命名。
原生JavaScript变量要求是纯英文字母，首字母必须小写，如：iTaoLun
jQuery变量要求首字符为“_ ”其他与原生JavaScript规则相同，如： _iTaoLun
要求变量集中声明，避免全局变量。
3、函数命名
首字母小写、驼峰式命名。如：checkUsername()
4、其他
代码结构明了，加适量注释，提高函数重用率；
注重与html分离，减小reflow，注重性能；
5、JavaScript文件
javaScript程序应独立保存在后缀名为：.js的文件夹中。应尽量减少在HTML中，因为存在于HTML中的Javascript代码会明显增加文件大小，且不能对其进行filename.js
JavaScript的代码应尽量放到body后面。这样可以减少因为载入脚本而造成其他页面内容载入也被延迟的问题。
6、缩进
缩进单位为四个空格，避免使用Tab键来缩进，因为始终没有统一的Tab长短标准。虽然使用空格会增加文件的大小，但在局域网中几乎可以忽略，且在最小化过程中也可被消除掉。
7、每行长度
避免每行长度超过80个字符。当一条语句一行写不下时，请考虑折行。
在运算符号，最好是逗号后换行。在运算符后换行可以减少因为复制粘贴产生的错误被分号掩盖的几率。
8、变量声明
所有的变量必须在使用前通过var进行声明。JavaScript并不强制必须这么做，但这么做可以让程序易于阅读，且也容易发现那些没声明的变量（它们会被编译成全局变量）。将var语句放在函数的首部。最好把每个变量的声明语句单独放一行，并加上注释说明。 尽量减少全局变量的使用。不要让局部变量覆盖全局变量
var currentPage；//当前页码
var pageSize；//每页显示条数
9、函数声明
所有函数在使用前进行声明。内函数的声明跟在var语句的后面，这样可以帮助判断哪些变量是在函数范围内的。
10、{}和[]
使用{}代替 new Object（），使用[]代替 new Array()。这样便于书写且能提高一点执行效率。当成员是一组有序的数字时，使用数组来保存数据。当成员是无规律的字符串或者其他时使用对象来保存数据。
11、event.srcElement问题
说明：IE下，event对象有srcElement属性，但没有target属性；Firefox下，event对象有target属性，但是没有srcElement属性。
解决方法：使用var obj = event.target || window.event.srcElement
12、parentElement问题
说明：firefox与IE父元素（parentElement）的区别
IE：obj.parentElement
firefox：obj.parentNode
解决方法：因为firefox和IE都支持DOM，因此使用obj.parentNode是不错的选择
六、图片规范
1、存放位置
所有页面元素类图片均放入images文件夹，测试用图片放于image/demoimg文件夹
2、格式
图片格式仅限于gif、jpg、png
3、命名规则
命名全部用小写英文字母或数字或下划线的组合，其中不得包含汉字、空格、特殊字符：尽量用易懂的词汇，便于团队其他成员理解；另命名分头尾两部分，用下划线隔开，比如：ad_left01.gif、btn_submit.gif；
4、性能
在保证视觉效果的情况下选择最小的图片格式与图片质量，以减少加载时间。
运用Css Sprite技术集中小的背景图或图标，减少页面http请求，但注意，请务必在对应的spritepsd源图中划参考线，并保存至img目录下。
Css Sprite（CSS精灵图）使用方法：
a、将用到的背景图片压缩为zip格式的压缩包。
b、用CSS图片拼合生成器将其拼合成一张图片，然后下载该图片。
c、拼合完成后会生成相应的CSS规则，该文件定位了每个图片的位置及图片的宽度和高度
d、在CSS样式中定位背景图片eg：a{background:url('../images/share.gif') 0 0 no-repeat;}
七、注释规范
1、html注释
注释格式：<!--这是注释-->
2、css注释
注释格式：/*这是注释*/；
3、JavaScript注释
单行：单行注释使用//这是单行注释；
多行注释使用/*这是多行注释*/
八、兼容性规范
什么是浏览器兼容问题？
是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。
问题1：不同浏览器的标签默认的外补丁和内补丁不同
症状：随便写几个标签，不加样式控制的情况下，各自的margin和padding差异较大）
碰到频率：100%
解决方案：CSS里*{margin:0;padding:0}
备注：这个是最常见的也是最容易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各内外边距是0
问题2：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
症状：常见的是IE6中后面的一块被顶到下一行
碰到频率：90%（float布局中最常见的浏览器兼容）
解决方案：在float的标签样式控制中加入display:inline；将其转换为行内属性。
备注：我们最常用的就是div+css布局，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。
问题3：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
症状：IE6、IE7和遨游里的这个标签高度不受控制
碰到几率：60%
解决方案：给超出高度的标签设置overflow:hidden；或者设置行高line-height小于你设置的高度或font-size：1px；。
备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小的默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
问题4：元素水平居中问题：
火狐中使用（针对块状元素）margin:0 auto，IE中父级元素设置（只对文本进行水平居中）：text-align:center
问题5：const问题：
const char var说明var这个变量现在变成“只读变量”，任何对var修改的语句都被编译器视为错误。
说明：火狐浏览器下，可以使用const关键字或var关键字来定义常量；IE下，只能使用var关键字来定义常量；
解决办法：统一使用var关键字来定义常量
问题6：模态和非模态窗口的问题
症状：IE下，可以通过window.showModalDialog和window.showModelessDialog打开模态和非模态窗口；
解决办法：直接使用window.open(pageurl,name,parameters)（但尽量少用，安全级别低）方式打开新窗口。如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问。如：var parWin = window.opener;parWin.document.getElementById("aing").value = "aing"
问题7：float延续性
在IE浏览器中，如果使用float设置元素浮动对齐，如果不关闭浮动，将会对后面的元素标签延续浮动。
解决办法：在设置float元素后面加上clear:both，清除浮动。
九、浏览器兼容性CSS hack
1、css hack
hack的目的就是使你的css代码兼容不同的浏览器，当然我们也可以反过来利用hack为不同版本的浏览器定制编写不同的css效果。
例如：div{background:green;/*火狐*/ *background:red;/*IE6&&IE7*/}我们在IE6中看到的是红色，在火狐中看到的是绿色。
2、上面的css在火狐中，它是认识不了后面的那个带星号的东西是什么的，于是将它过滤掉，不予理睬，解析得到的结果是：div{background:green;}
在IE6中呢，它两个background都能识别出来。它解析得到的结果是：div{background:green;*background:red;}于是根据优先级别，处在后面的red的优先级高，于是div的背景色就是红色的了
3、区别不同浏览器，CSS hack写法：
区别IE6与FF：background:orange；*background:blue;
区别IE6与IE7：background:green!important;background:blue;（IE6是blue、IE7下是green）
区别IE7与FF：background:orange;*background:green;（IE7下显示green、FF下显示orange）
区别FF,IE7,IE6：background:orange;*background:green;_background:blue;*background:green!important;（IE6显示green;IE7显示green；FF下显示orange）
注：IE都能识别*、标准浏览器（如FF）不能识别*；
IE6能识别*、不能识别!important
IE7能识别*、也能识别!important
FF不能识别*、但能识别!important
浏览器优先级别：FF<IE7<IE6，CSS hack书写顺序一般是：FF IE7 IE6
4、IE9下的css hack
div{
background:red\0;/*IE8和IE9都支持*/
background:blue\9\0;/*IE9*/
*background:green;/*IE7*/
_background:gray;/*IE6*/
}
注意：书写CSShack的顺序，其中：
a、background-color:red\0；IE8和IF9都支持；
b、background-color:blue\9\0；仅IE9支持；
区别FF（IE8）与IE6与IE7
background:orange;FF和IE8背景色将为橘黄色
*background-color:red;IE6和IE7背景色将为红色
区别FF（IE8）与IE6与IE7
background:orange;FF和IE8背景色将为橘黄色
*background:red!important;IE7背景色将为红色
*background:blue;IE6背景色将为蓝色
总结：CSS Hack书写顺序：先写FF等非IE浏览器样式，其次写IE8/9所需样式，接着是IE7的，最后写IE6的
实际开发项目中，我感觉比较少用!important，只要记住*和_就足够区别FF（IE8）与IE7与IE6的了。
十、开发测试约定及使用工具规范
一、开发环境：
软件版本的选择：1、应选择热门的开发软件2、选择成熟的开发工具和技术
开发文档的约束
二、其他
1、开发过程中严格分工完成页面，以提高css重用率，避免重复开发
2、减小沉冗代码、书写所有人都可以重的懂的代码，简洁易懂是一种美德，为用户着想，为服务器着想
如何成为前端高手
1、要多写多练
