说到清除浮动的方法，我想网络上应该有不下7,8的方法，介绍这些方法之前，想下为什么清除浮动？再次回到float这个属性，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。这就产生了一个问题：浮动元素所在父元素不会自动伸长以便闭合浮动元素，任其“红杏出墙”，这显然不符合我们的“伦理观”，所以要“抓回来”施以家法；那么如何抓呢？

       提起css，提起(x)html,首先进入脑海的是楚楚动人的页面吗？不，首先应该是这楚楚动人的页面的背后的“楚楚冻人”吧，那些可恨的梦魇般的浏览器兼容！！！

【注】CSS3中，将Block-formatting-contexts 叫做 flow root。对于触发方式也做了修改：The value of ‘position’ is neither ‘static’ nor ‘relative’；

        以上种种方法，要么IEonly，要么cross的情况不理想，于是就产生了适用性方法的需求，尽管有时你可能需要些许hack；

<div> <div style ="float:left; width:40%;"> <p> Some content </p></div> <p> Text outside the float </p> <div style ="clear:both;" ></div> </div>

       b.浮动元素的宽度不大于父元素的宽度，即没有溢出需求；所以，这种方法也有它的局限性；

<div style ="overflow:hidden; width:100%;"> <div style ="float:left;width:30%;" > <p>the widths of the combined floats never exceed the width of the container</p> </div> </div></div>

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}

<div class="clearfix"><div style ="float:left;width:30%;" ><p>take :after</p></div> 

       我想写点儿什么了，是的~

       由于实习，由于毕业，由于各种这样或者那样的理由……

       偶尔会想想两年后的我应该是个什么样子、有着什么样的生活状态？

       2012年了，离当年刀郎唱“2002年的第一场雪”已经十年。Eason唱着十年之后，却也唱着明年今日。

       很俗的开场白：2011年如白驹过隙匆匆而过。
       是的，很俗，但很真实。一年过去了！

       2011，苦逼的民众依旧苦逼，幸福的领导依旧幸福。中国进入了2的困惑。国民生产总值全球第二，国家欢呼，民众愕然。全民皆二。二风光的背后是社会差距的拉大和阶层的板结，是民众对国富民穷的困惑，是普通民众人人充满失败感与不幸福感的全球第二。然后大家都思考：这个社会怎么了？这个社会病了。

       2011，一路走来。
       2011上半年，暂离了叱咤风云、年少轻狂、疯疯癫癫的大学；2011下半年，开始了苦逼无奈而又单调乏味的实习生活。详情不须描述。

       当初的梦想，依然会记得。

       2012……

       2012，毕业季即将到来，不想说离开。

       2012，充满挑战，仍然要用心地学习、思考、经营。

       2012，依旧充满激情与梦想，坚持对未来对美好的憧憬和相信。

       2012，愿好！

应用CSS3巧妙地将图标、主标题和二级标题整合成动态导航菜单。

2、How to Create a Beautiful Icon with CSS3 

应用CSS3创建文档图标。

3、Background-Clip in CSS3 

应用CSS3的变形（transforms）、动态变换（transitions）和关键帧动画实现背景设计。 

4、CSS3 Progress Bars 

应用CSS3设计进度条。 

5、Blur Menu with CSS3 Transitions 

应用CSS3设计模糊菜单效果。 

 6、Original Hover Effects with CSS3 

应用CSS3实现风格迥异的鼠标悬停效果。

       1. 压缩工具

       用于在线压缩你的JS代码，它有一个选项“Include latest jquery.min.js”，这对于提升速度非常有用。 

       推荐理由：缩小代码 = 更小的文件大小 = 更快的网页加载速度 

       2. 美化工具

       用于将压缩后的代码转换回正常状态，使代码再次可读。该工具也可用于混淆的代码。 

       推荐理由：漂亮的代码 = 易读 = 更快地开发 

       3. 混淆工具

       用于保护（混淆）你的代码，使代码不可读。很显然，一些模仿者可以使用一个工具去反混淆/解压缩，但是你为代码设置的保护越多越好。

       推荐理由：混淆代码 = 不可读 = 保护劳动成果 

       随着 IE6 等旧版浏览器逐步被淘汰，目前使用的浏览器中支持 HTML5 与 CSS3 的将越来越多。而这些新的技术也将逐步由特色功能演示到个人作品展示、再到大众应用的过渡。现在再向开发者介绍一个基于 CSS3 和 JavaScript 开发的表现层框架 – impress.js。

       Impress.js 是采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架。开发者可以利用 impress.js 自己开发出类似效果的演示工具，但性能比基于 FLASH 的 Prezi 更优。其功能包括画布的无限旋转与缩放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同时，也支持传统 PowerPoint 形式的幻灯演示。

       目前 impress.js 是基于 webkit 浏览器（Chrome、Safari）开发，而在其它基于非 webkit 引擎，但支持 CSS3 3D 效果翻译的浏览器（Firefox 10、IE10）中也能正常运行。同时为保证画面运行流畅，需要使用到浏览器中的硬件加速功能。另外，该框架目前还不支持任何移动浏览器。

       Impress.js 开发者基于 MIT License 将源码发布在 GitHub ，同时还提供了 效果演示 。希望国内的开发者也能合理利用该框架，给大家带来更加精彩的演示文档工具。

前言：每到春运我就发愁，火车票很难买到，去年电话提前N天就打，依然没买到，几天前听说开通了网络订票很是欢喜，于是登录 http://www.12306.cn 试了试，结果惨不忍睹！！！

1、页面打开速度慢的可以，查看源文件竟然是table布局，乱七八糟，头部一flash换来换去，里面还嵌套iframe，js也没单独分离。这样一个功能性网站，还是国家级，不但不改版，也不优化，也不想一想忙时有千万的人点击、请求，简直@#￥%，也许只有在景德镇等少数几个国家才有可能发生这样的事。

2、操作繁琐，怎么说我也是接触网站十多年，对这个网站有些操作还真弄不懂，首页没有注册登录，好容易内页找到了，注册完，却登录不了，总提示验证码错误，做后台的人也不想想，网页延时N秒，验证码还采用限制几秒无效的作法，还有车票查询功能，首发站有时提示，有时打不出，车次有时出现，有时没有，登录完有的页面显示状态（登录名），有的没有，我的感受尚且，更不要说那些农民工、老人或很少上网的人。这是为人民服务的网站吗#￥%#￥

这个网站我操作2天了，总时间差不多8小时左右，一直在点击、等待、错误、刷新，票的影子也看不到，气愤之余写下此文。

网上也有很多同样感受的网友，百度知道上面就有人问类似的问题，点击查看

转载自：前端开发网 - http://www.w3cfuns.com/

http://bestwebgallery.com/

http://www.cssimport.com/

http://www.csstux.com/

http://cssvault.com/

http://www.designlinkdatabase.net/

http://www.designmeltdown.com/

http://www.designshack.co.uk/

http://www.designsnack.com/

http://www.netzfruehling.de/

http://www.professionalontheweb.com/

http://www.screenalicious.com/

http://screenfluent.com/

http://styleboost.com/

http://www.thebestdesigns.com/

http://www.unmatchedstyle.com/

http://w3cs.com/

http://www.w3csites.com/

http://www.free-css.com/css-gallery/page1.php

http://www.webdigity.com/cssGallery/

http://welovetxp.com/

       酝酿了老长时间的改版终于完成，效果大致也就这样了，感觉如何都来说说呗~

       建议使用 Chrome 或 Firefox 等高级浏览器以获得最佳体验！

       当然，如果你用的是 IE 或 IE 内核浏览器那么就请先靠边吧，因为用到比较多的css3效果，虽说调整过兼容性，但IE下的界面实在影响市容市貌~

• 项目主页：http://daneden.me/animate/
• git地址：https://github.com/daneden/animate.css 
• 附animatable：http://leaverou.github.com/animatable/

       走得太远，是否真的就忘了来路？

       当初的梦想有多辉煌，现实就有多残忍。

       不肯妥协，不肯认输，咬紧牙关告诉自己不要放弃。不肯哭泣，不肯回头，即使再多的委屈也都倒回心里。

       时间一步步告诉我生活不容易，剩下的美好也只有倒回到少年时代才能寻到的曾经。不是不愿去努力，不是不愿去进取，有时候生活的导演就像一个贪玩的孩童，无论你再怎么用心，无论你再怎么优秀，它所给你的，永远不及你该得的几分之一。

       忍吧，为了更好的明天。

       忍吧，还有那么多牵念的人。

       忍吧，生活这场戏还得自己演。

       把所有的一切都放在心底~

       没有的太多，却总有一种力量支撑着前行；没有的太多，所以更加坚持做自己。

       加油！微笑！

       在输与赢的开始里，总有一个输与赢的结局！

       虽然HTML5还是很新，没有被所有主要浏览器支持，但现在还是有许多设计师和开发人员使用。毫无疑问，几年下来，HTML5将对web开发起着很重要的作用。我注意到很多人都在使用它，但也有许多人还没有接触过HTML5。收集7个有用的HTML5学习资源，希望对感兴趣的朋友有所帮助。

       一、HTML5开发者指南

       这个文档举例说明了如何编写HTML5文档，为初学者提供了简单和可实践的应用程序，也为高级开发人员提供了更深度的信息。

       二、WHATWG博客

       WHATWG博客是网络超文本应用技术工作小组（Web Hypertext Application Technology Working Group）的博客，就是负责HTML5规格的那群人。

       三、Dive Into HTML 5（钻研HTML5）

       Dive Into HTML 5是从HTML5规格和其他标准中精心挑选并详述其特征的一本书。

       四、HTML5医生

       HTML5医生发表了许多文章，都是关于HTML5及其语义、及如何正确使用它的。他们也通过“询问医生”收集了很多问题，并在文章中予以回答，所有人都可从中受益。

       五、When can I use

       这是一个以表格制成的备忘单形式的单页面，描述了HTML5、CSS3、SVG及其他未来网络技术的特征。

       六、HTML5可视备忘单

       这个备忘单就是一个简单的可视网格，包含了所有HTML5标签和相关的属性。

       七、HTML5画廊

       HTML5画廊有两个主要目标，一个是展示用HTML5布局的网站，我们可以从中看到别人如何理解HTML5规格和如何应用它。第二是帮助学习HTML5、如何使用HTML5及如何应用HTML5。

css3中添加了伪类:target，使用:target伪类可以让点击后的id有新的效果，比如改变颜色、位置等等。所以我们可以用它做很多效果，比如tab标签等等。

       伪类:target的使用方法和:link、:hover一样：

selector:target{color:#;/*other styles*/} 

Html代码：

<div class="tab_box">
<ul class="tabs">
<li><a href="#tab1">标签一</a></li>
<li><a href="#tab2">标签二</a></li>
<li><a href="#tab3">标签三</a></li>
</ul>
<div id="tab1" class="tab_content">

       第一层内容

<div id="tab1" class="tab_content"> 第一层内容</div>

       第二层内容 

<div id="tab2" class="tab_content"> 第二层内容</div>

       第三层内容

<div id="tab3" class="tab_content"> 第三层内容</div>

CSS代码：

<style type="text/css">
.tab_box {clear:both;height:40px;}
.tab_box li {float:left;border:1px solid #CCC;margin:0 5px 0 0;list-style:none;padding:5px;}
.tab_content {clear:both;border:1px solid #CCC;padding:20px;margin:40px; position: absolute; 
z-index:-1; background:#FFF;width:300px;height:200px;}
 #tab1:target, #tab2:target, #tab3:target {z-index: 1;}
</style>

CSS部分有一些内容是比较重要的，首先tab_content里面要使用定位属性position:absolute，让三个tab标签内容重叠起来，然后利用z-index:-1让他们处于Z轴的靠下层，另外，如果不定义背景为白色，三个层的内容会重叠起来，显得十分混乱。

最后一部分CSS就是利用target伪类改变其z轴层次的，他们是成功实现效果的关键。

将这些代码拷贝到网页中，然后预览。这里要注意一点，只有支持CSS3的浏览器才可以看到效果，比如Firefox、google Chrome、Opera，IE系列除了IE9以外，IE6、7、8是看不到效果的。

Demo

　　似乎看不出什么，让我给四个边框加上不同的颜色再看看：

　　是不是发现了些什么？对，让我们把中间的文字去掉：

　　这样，就出现4个三角形了，然后我们如果需要顶部那个三角形，只需要将border的left、right、bottom设置成背景色就行了：

　　这样，我们需要的三角形就出现了，并且可以设置4个不同方向的了：

　　样式代码很简单，就几句话：

<strong style="float:left; border-style:solid; border-width:10px; border-color:#000 #ccc #ccc #ccc; height:0; width:0; font-size:0"></strong>

　　东西很简单，但想到用border边框来制作三角形箭头确实有点剑走偏锋了，用的相当巧妙。

　　PS：因为编辑器里发的demo不能出现空标签，也就是我必须在<strong></strong>标签里加个空格，如：<strong>&nbspl;</strong>，但这就导致IE6下显示错误，其实是可以的，大家试试就知道了。

       （1）使用｛text-indent:-9999px｝;

       可是他有一个局限性 他只适用于块级元素block而我们往往有时候想偏移掉的a上的字体所以问题就来了text-indent:-9999px;虽然用起来比较惬意将a转化成block的话 往往 他身后的的元素就被他赶到下一行了如果正好这个a后面 是一个a按钮就要用float来浮动以使他身后再出现簇拥者这样是不是有些麻烦呢

       （2）｛line-height:0;font-size:0;overflow:hidden;｝

       能完美“隐藏”掉你background之上的字体经测试 ie6.0 、 7.0 、8.0、firefox 通过

       （3）最方便的是加个span，然后display:none，而且这样不会出bug。遗憾的是，多了个标签，循环中使用的话，html又多了一堆字节，单个按钮推荐这样使用。

       而针对input value的隐藏这个方式就有些吃力了所以还是只能用block加text-indent来“偏移”模拟隐藏了

       ｛display:block;font-size:0;line-height:0;text-indent:-9999px;｝

        经测试 ie6.0 、 7.0 、firefox 通过。

如果你需要在 html 文档中使用一些 JavaScript 代码，你应当通常会使用如下的 <script> 标签：

<script type="text/javascript">//insert your code here</script>

<script type="text/javascript" language="javascript">//insert your code here</script>

<script src="http://www.mangguo.org/myscript.js"></script>

<script language="JavaScript"><!--//insert your code here//--></script>

var name = "Jean";var size = data.length;

<input type="text" name="date" onchange="validateDate()" />

$(document).ready(function(){	$('input[name=date]').bind('change', validateDate);});

    <script src="myscript.js?"></script>  </body></html>

document.write("hello world");

document.getElementById('hello').innerHTML = 'hello world';

       前言：对互联网有那么一点点热情，对梦想有那么一点点的执着！

       一直就梦想着能成为一个很牛的前端工程师，为这个梦想不停地学习、实践，等待机会来临的那一天。作为非计算机专业的应届毕业生，哪怕只有那么一点点的机会我也不会放过！

       初印象：拖把哥很年轻，内容很基础，新浪CDC很向往！

       关于学习：html、css基础不错，经验亦有；js基础薄弱，经验不足~

       关于工作：我不怕自己努力了不优秀，我只怕比我优秀的人比我更努力，马上就要毕业，工作还没着落，还得加油！

       后 记：盼星星，盼月亮，盼来了新浪网络学院的第一次课程，杯具的是和产品设计班的课程冲突，瞬间绝了我到产品设计班蹭课的欲望。话说最初的笔试还是有着不小信心，可过了一个多星期都没收到通知，当时就以为给侧漏了~既然一个机会又回到了我的眼前，那么，我不会错过！

规范目的

为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.

基本准则

符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

文件规范

1. html, css, js, images文件均归档至<系统开发规范>约定的目录中;

2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;

3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.;

4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名.

html书写规范

1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset="gbk" />, 书写时利用IDE实现层次分明的缩进;

2. 非特殊情况下样式文件必须外链至<head>...</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;

3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:

<link rel="stylesheet" href="..." />

<style>...</style>

<script src="..."></script>

4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;

5. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括 br (<br />), hr(<hr />)等; 属性值必须用双引号包括;

6. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以"data-"为前缀来添加自定义属性，避免使用"data:"等其他命名方式;

7. 语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;

8. 尽可能减少div嵌套, 如<div class="box"><div class="welcome">欢迎访问XXX, 您的用户名是<div class="name">用户名</div></div></div>完全可以用以下代码替代: <div class="box"><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p></div>;

9. 书写链接地址时, 必须避免重定向，例如：href="http://itaolun.com/", 即须在URL地址后面加上“/”；

10. 在页面中尽量避免使用style属性,即style="…";

11. 必须为含有描述性表单元素(input, textarea)添加label, 如<p>姓名: <input type="text" id="name" name="name" /></p>须写成:<p><label for="name">姓名: </label><input type="text" id="name" /></p>

12. 能以背景形式呈现的图片, 尽量写入css样式中;

13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;

14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;

15. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(&gt;) & 空格( ) & »(») 等等;

16. 书写页面过程中, 请考虑向后扩展性;

17. class & id 参见 css书写规范.

css书写规范

1. 编码统一为utf-8;

2. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为;  共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;

3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外;

4. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;

5. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由 小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.

6. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):

    d）a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码<div id="mainnav"></div>中加入新的div元素,

按a命名法则: <div id="mainnav"><div class="firstnav">...</div></div>,

样式写法:  #mainnav  .firstnav{.......}

按b命名法则: <div id="mainnav"><div class="main_firstnav">...</div></div>,

样式写法:  .main_firstnav{.......}

7. css属性书写顺序, 建议遵循:  布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: 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; 我所列出的这些属性只是最常用到的, 并不代表全部;

8. 书写代码前, 考虑并提高样式重复使用率;

9. 充分利用html自身属性及样式继承原理减少代码量, 比如:<ul class="list"><li>这儿是标题列表<span>2010-09- 15</span></ul>

定义

ul.list li{position:relative}  ul.list li span{position:absolute; right:0}

即可实现日期居右显示

10. 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;

11. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;

12. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现 , 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法:table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;}, base.css文件中我会初始化表格样式)

13. 杜绝使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容 ie8;

14. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=crop, src=’img/bg.png’);

15. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;

16. 减少使用影响性能的属性, 比如position:absolute || float ;

17. 必须为大区块样式添加注释, 小区块适量注释;

18. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;

JavaScript书写规范

1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || ...);

2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;

3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;

jQuery变量要求首字符为'_', 其他与原生JavaScript 规则相同, 如: _iTaoLun;另, 要求变量集中声明, 避免全局变量.

4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;

5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();

6. 命名语义化, 尽可能利用英文单词或其缩写;

7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval_r() & innerText;

8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;

9. 代码结构明了, 加适量注释. 提高函数重用率;

10. 注重与html分离, 减小reflow, 注重性能.

图片规范

1. 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;

2. 图片格式仅限于gif || png || jpg;

3. 命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;

4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;

5. 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);

6. 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下.

注释规范

1. html注释: 注释格式 <!--这儿是注释-->, '--'只能在注释的始末位置,不可置入注释文字区域;

2. css注释: 注释格式 ;

3. JavaScript注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 ;

开发及测试工具约定

建议使用Aptana || Dw || Vim , 亦可根据自己喜好选择, 但须遵循如下原则:

1. 不可利用IDE的视图模式'画'代码;

2. 不可利用IDE生成相关功能代码, 比如Dw内置的一些功能js;

3. 编码必须格式化, 比如缩进;

建议测试顺序: FireFox-->IE7-->IE8-->IE6-->Opera-->Chrome-->Safari, 建议安装firebug及IE Tab Plus插件.

其他规范

1. 开发过程中严格按分工完成页面, 以提高css复用率, 避免重复开发;

2. 减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, 为服务器着想.

通过条件判断引入样式表

       使我们能很容易在 IE 浏览器中通过条件注释语句加载指定样式表，而其他非 IE 内核浏览器则自动忽略这段蹩脚的HTML 注释。下面是一个例子：

<!--[if IE 8]><link rel="stylesheet" href="ie8.css"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="ie7.css"><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="ie6.css"><![endif]-->

       这段代码会导致 IE8、IE7、IE6 各自加载对应的样式文件。这事实上是非常牛逼的，条件注释给按浏览器加载各自不同的样式表提供了可能，但同时需要维护多个样式文件。

CSS hacks

       这事实上是个龌龊的做法，能解决问题又不符合规范，看着也很头大。大部分人看着它只能束手无策而又逼不得已。之前的《CSS Hacks for IE，IE 也可以很完美》已经谈过 IE 的 CSS hacks 了。现在可以来简单回顾一下常用的几个方法：

_selector{property:value;} //IE6
*selector{property:value;} //IE6 & IE7
selector{property:value\9;} //IE6 & IE7 & IE8

       这个一般人都知道，就不多说了。但面临的一个现实问题是，\9 这个 hack 不只是针对 IE8 以及更老版本奏效，IE9 最终的发行版依旧会受到这个 hack 的影响。而 IE9 本身在 CSS 上的各种缺陷又是被修复的。如果将来 IE10、IE11 来了，那又怎么办？显然 \9 并不是一个严谨的安全的方案。

       另外，采用不同的 X-UA-Compatible 模式也会影响不同版本的 IE 渲染差异。建议设置默认渲染模式如下：

<meta http-equiv="X-UA-Compatible" content="IE=Edge">//标准 IE 模式

       那咋整呢？咋整咋整咋整？没事，下面还有更绝的。

通过条件判断插入指定类

       既然可以用条件判断，那么直接为不同 IE 版本输出单独用于设定样式的钩子类好了。直接上代码：

<!--[if !IE]><html><![endif]--> // 非 IE 浏览器的情况，不添加任何作用类
<!--[if IE 6]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->

       如果要是 IE9、IE10 再想出现什么神奇的行为艺术的话，继续添加指定作用类就行咯。并且你的样式表也会变得异常干净、整洁、美观：

.selector { color: black; }
.ie8 .selector { color: green; } /* IE8 */
.ie7 .selector { color: blue; } /* IE7 */
.ie6 .selector { color: red; } /* IE6 */

       当然，标准模式的 X-UA-Compatible 声明还是必须的，以防页面被强制按照低版本的 IE 来渲染。

        互联网科技发展的速度真可谓惊人的快，一个稍不留神，你就可能无法跟上它的步伐。HTML5的变化和更新也压倒不少人，这篇文章将向大家介绍一些最基本也非常必要的HTML技巧。

1. 新的文档类型（Doctype）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

       你还在使用上面这个既麻烦又难记的XHTML文档类型吗？ 如果还是这样的话，现在该切换到新的HTML5文档类型了。

<!DOCTYPE html>

        只要这么简单的15个字符就可以了。（注意：你的doctype的申明需要出现在你html文件的第一行。）

2. 图形（Figure）元素

        考虑用下面的代码来标记图片？

<mg src="path/to/image" alt="About image" />
<p>Image of Mars. </p>

        很不幸，它不能用简单、富有语 义关联的方式与图形的标题关联，因为它仅仅是用段落标记以及图片元素包裹着，而HTML5通过引进<figure>元素，改进了这一点。当结 合 <figcaption> 元素使用时，我们就可以将图形标题与图形配对起来。代码如下：

<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>

3. 重新定义<small>

        原来你可以利用<small>元素来创建与logo密切相关的副标题。不过，现在HTML5修改了这个用法，<small>元素被重新定义了，或者更恰当地说，它现在用来代表小字或其他边注（如，网站底部的版权声明）。

4. 不再需要脚本、链接类型

        很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

        在HTML5中，这已经不再需要了。 意味着说这两个标签分别代表着样式和脚本。因此，我们可以将它们的类型属性都删除掉。代码如下：

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

5. 使用还是不使用引号

        记住，HTML5与XHTML不同，如果你不喜欢的话你不必用引号将属性包裹起来。不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。

<p id=someId> Start the reactor.

        在这点上，你可以自己决定。如果你想要一个结构非常清楚的文档的话，坚持使用引号也挺好的。

6. 使你的内容可编辑

        HTML5其中一个非常强大的功能就是“contenteditable”，顾名思义它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>

        或者，按照第五条技巧所说的，你也可以将第九行的代码写成这样（不用引号）：

<ul contenteditable=true>

7. 电子邮件输入

        如果我们应用“电子邮件”类型来指定输入的形式，我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。虽然说内置的表单验证很快就会到来，但是我们也不能完全依靠这个。比较旧的浏览器不理解这种“电子邮件”类型，它们只会简单地返回到普通的文本框。

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />

<button type="submit"> Submit Form </button>
</form>
</body>
</html>

        在说到浏览器所支持和不支持的元素以及属性时，你必需知道当前所有浏览器都不是那么可靠。例如，Opera只有在你指定name属性时才支持电子邮件验证。不过，它不支持占位符属性（下面即将要讲到的）。最后，虽然你可以使用这种形式的验证，不过不要过分依赖它。

8. 占位符

        此前，我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适，但是只要用户删除了该文本，输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。

<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />

9. 本地存储

        多亏了HTML5的 local storage ，我们可以让高级浏览器“记住”我们输入的内容，就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持，但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。

10. 语义性的Header和Footer

<div id="header">
...
</div>

<div id="footer">
...
</div>
上面的代码一去不复返。Divs从根本上来说并没有任何语义结构，即使应用上了ID还是如此。

        而在HTML5中，我们可以使用<header>和<footer>元素，上面的代码就可以替换为：

<header>
...
</header>

<footer>
...
</footer>

        不过注意不要将这两个元素与网站的头部和脚部混淆起来。它们只是代表它们的容器。

11. IE和HTML5

        IE理解新的HTML5元素需要费一定的神，为了确保新的HTML5元素能够以块级元素正确显示，有必要将它们用下面的代码定义风格：

header, footer, article, section, nav, menu, hgroup {
display: block;
}

        就算如此，IE还是不知道这些元素究竟是什么，因而会无视这些格式，还需要用到下面的代码来解决这个问题：

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");

12. 群组标题（hgroup）

        假设一个网站有名称、副标题分别用<h1>、<h2>标签来标记，在 HTML4中还没有一种能够将两者之间的关系用很好的语义关系来描述的方法，此外，当使用h2在页面中显示其它标题时，在层级方面问题就更多。而使用群组 标题hgroup元素，我们可以将这些标题聚集在一起，而不影响文档的整个纲要。

<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>

13.必要（Required）属性

        表单允许新的必要属性，规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好，用下面两种不同方式来声明这个属性：

<input type="text" name="someInput" required>

        或者，更严谨：

<input type="text" name="someInput" required="required">

        上面两行代码都行得通。用了这行代码之后，并且浏览器支持required属性的话， 输入空白的表单就不会被提交。下面是一个简单的例子，同时我们也添加了占位符属性：

<form method="post" action="">
<label for="someInput"> Your Name: </label>
<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
<button type="submit">Go</button>
</form>

        如果输入是空的，表单将无法提交，突出显示文本框。

14. 自动对焦（Autofocus）属性

        同样地，有了HTML5就不再需要用JavaScript方案来解决自动对焦的问题。如果某个输入应该被”选择“或被聚焦，我们现在可以使用HTML的自动对焦autofocus属性。

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

15. 音频支持

        我们再也不需要依靠第三方插件来提供音频了。HTML5提供了音频元素<audio>。目前，只有最新的浏览器支持HTML5音频。 此时，最好还是提供一些向后兼容性。

<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>

        说道音频格式，Mozilla和Webkit都还没有完全支持。Firefox希望看到一个 .ogg文件，Webkit浏览器只支持最常见的.mp3扩展名。这意味着说，至少目前为止，你应该创建两个版本的音频。当Safari加载页面时，它认 不出.ogg格式的文件，将会跳过并移到mp3版本上。请注意，IE并不支持它，Opera 10 或更低的版本只支持 .wav文件。

16. 视频支持

        与音频元素 <audio>非常像，在新的浏览器上也支持HTML5视频。事实上，就在最近YouTube宣布了一项新的 HTML5视频嵌入。可 惜的是，由于HTML5说明文件并没有为视频指出某个特定的编码器，所以都主要取决于浏览器来决定了。尽管Safari和IE9可以支持H.264 格式的视频，Firefox 和Opera却仍然坚持Theora 和Vorbis格式。因此，显示HTML5视频的时候，你必须提供两种格式。

17. 视频预先加载

        你首先需要决定是否需要浏览器来预先加载视频。是否有需要？假设，一个访客进入某个专门用来显示视频的页面，那么就非常有必要预先加载这个页面节省一点等待的时间。你可以通过设置 preload=”preload”来预先加载视频，或者之间添加preload也可以。

<video preload>

18. 显示控件

        你可能已经注意到，用上面的代码的话，视频将只会显示成一个图片，而没有任何可控制的元件。为了获取这些播放控件，我们必需在视频元素里指定这些控件属性。

<video preload controls>

19. 正则表达式

        对亏了新模式的属性，我们可以直接在代码中插入一个正则表达式。

<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text"
name="username"
id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
autofocus
required>
<button type="submit">Go </button>
</form>

        如果你比较熟悉正则表达式的话就会注意到这个新模式: [A-Za-z]{4,10}只接受大小写字母。这个字符串最少必需有四个字符，最多是十个字符。

20. 检测浏览器对属性的支持

        前面提到过并非所有的浏览器都支持这些属性，那是否有什么方法能够判断浏览器是否能够识别它们呢？这个问题问得非常好，这里给大家介绍两种方式，第一个选择是使用Modernizr来检测，或者你也可以创建并剖析这些元素来看看浏览器都有什么能力。例如，在前面的例子里，如果我们要确定浏览器是否能够执行pattern属性，就可以在页面上添加JavaScript:

alert( 'pattern' in document.createElement('input') ) // boolean;

        实际上，这是确定浏览器兼容性的一种非常常用的方法。jQuery库利用了这个技巧。上面的代码里，我们创建了一个新的输入元素，并确认pattern属性是否能够被识别。如果能够识别的话，浏览器就支持这个功能，否则就不支持。

<script>
if (!'pattern' in document.createElement('input') ) {
// do client/server side validation
}
</script>

        记住，这将需要依靠 JavaScript来实现！

21. Mark元素

        <mark>元素的主要功能就是在页面中高亮显示那些需要在视觉上向用户突出其重要性的文字。包裹在此 标签里的字符串必须与用户当前的行为相关。例如，如果我在一些博客中搜索“Open your Mind” ，我可以使用在<mark>标签里使用JavaScript 来包裹每一次动作。

<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

每个人的CSS命名规则都不一样，给后期维护人员带来麻烦。如果大家都统一的话，就提高了工作效率，方便自己，也方便他人。下面是整理的一些CSS的命名规则，供大家参考！

    一、常用命名规则

    头：header 

    内容：content/container 

    尾：footer 

    导航：nav 

    侧栏：sidebar 

    栏目：column 

    页面外围控制整体布局宽度：wrapper 

    左右中：left right center 

    登录条：loginbar 

    标志：logo 

    广告：banner 

    页面主体：main 

    热点：hot 

    新闻：news 

    下载：download 

    子导航：subnav  

    菜单：menu 

    子菜单：submenu 

    搜索：search 

    友情链接：friendlink 

    页脚：footer 

    版权：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 

    四、class的命名 

.red { color: red; }       

.f60 { color: #f60; }       

.ff8600 { color: #ff8600; }    

.font12px { font-size: 12px; }   

.font9pt {font-size: 9pt; }  

.left { float:left; }   

.bottom { float:bottom; }  

.barnews { }   

.barproduct { }