HTML5现在已经成为了Web开发中的热门话题，大多数现代浏览器（Safari、Chrome，Firefox，IE10和移动设备）都支持HTML5。即使HTML5的规范还没有制定完成，但许多开发者已经将其作为Web开发项目中的主要技术。一些网站巨头，如Google、Facebook、Twitter和YouTube等，都建立在HTML5基础上。
HTML5中最令人兴奋的功能莫过于画布（canvas）和强大的表单功能，画布功能已经可以在大部分浏览器中完美体验（除了IE），但对于新表单元素的支持还不是太好。对Web开发者来说，是时候开始HTML5开发了。
要进行HTML5开发，本文中的一些技巧、工具可以让你缩短学习的时间，提高开发的效率。
一、HTML5支持测试列表
在开始之前，你需要了解现代的浏览器以及移动平台对于HTML5的支持情况。
浏览器兼容问题一直是前段开发工程师比较头痛的问题，熟悉了里面的规则也就变得简单了，这里有一份资料可以分享给大家，大家平时开发过程中遵循这个规律的话，会变得轻松多了：
各浏览器CSS hack兼容表：
| IE6 | IE7 | IE8 | Firefox | Chrome | Safari | |
| !important | Y | Y | ||||
| _ | Y | |||||
| * | Y | Y | ||||
| *+ | Y | |||||
| \9 | Y | Y | Y | |||
| \0 | Y | |||||
| nth-of-type(1) | Y | Y |
代码示例：
#test{
color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8支持 */
color:red\0; /* IE8支持 */
}
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */
整体测试代码示例：
.test{
color:#000000;
color:#0000FF\0;
[color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
}
其他说明：
1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：
<meta http-equiv=”x-ua-compatible” content=”ie=7″ />
2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个<body>。
3、还有其他写法，比如：
*html #test{}或者 *+html #test{}
4、*+html 对IE7的hack 必须保证HTML顶部有如下声明：
http://www.w3.org/TR/html4/loose.dtd
5、顺序：Firefox、IE8、IE7、IE6依次排列。
小知识：什么是CSS hack？
由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。
B2C的用户体验包括很多。比如售后体验，物流体验等等。本文只说基于web 端的用户体验 ，此为作为基础篇，就作为铺垫或者抛砖引玉，希望UE感兴趣的朋友一起讨论.
一、感官体验：呈现给用户视听上的体验，强调舒适性。
1.设计风格：符合目标客户的审美习惯，并具有一定的引导性。
网站在设计之前，必须明确目标客户群体，并针对目标客户的审美喜好，进行分析，从而确定网站的总体设计风格。
2.网站LOGO：确保logo的保护空间，确保品牌的清晰展示而又不占据过分空间。
3.页面速度：正常情况下,尽量确保页面在5秒内打开。如果是大型门户网站，必须考虑南北互通问题，进行必要的压力测试。
4.页面布局：重点突出，主次分明，图文并茂。与企业的营销目标相结合，将目标客户最感兴趣的，最具有销售力的信息放置在最重要的位置。
5.页面色彩：与品牌整体形象相统一，主色调+辅助色不超过三种颜色。以恰当的色彩明度和亮度，确保浏览者的浏览舒适度。
6.动画效果：与主画面相协调，打开速度快，动画效果节奏适中，不干扰主画面浏览。
7.页面导航：导航条清晰明了、突出，层级分明。
8.页面大小：适合多数浏览器浏览（以15寸及17寸显示器为主）。
9.图片展示：比例协调、不变形，图片清晰。图片排列既不过于密集，也不会过于疏远。
10.图标使用：简洁、明了、易懂、准确，与页面整体风格统一。
11.广告位：避免干扰视线，广告图片符合整体风格，避免喧宾夺主。
12.背景音乐：与整体网站主题统一，文件要小，不能干扰阅读。要设置开关按钮及音量控制按钮。
你可以创建一些大小、颜色不同的元素（如按钮）,而不用每次都准备一个背景图片。 ZURB上有教你创建CSS3按钮的详细文章，有兴趣可以去看看。利用RGBA做出的阴影效果真的很棒！
阅读这个条目剩下部分 »
通过 Dreamweaver 编写或者生成的 CSS 代码非常臃肿，这里介绍 5 款在线的优化工具，打造简洁漂亮的样式表。
1. Online CSS Optimizer
彻底精简和压缩样式表，但同时牺牲了可读性。
2. CSS Compressor
压缩样式表，提高加载速度。提供“轻度”，“标准”，“超级”三种压缩模式，可控性较强。
3. CleanCSS
基于 CssTidy 的一款在线优化工具，优化能力毋庸置疑，提供多种优化模式和选项。
4. CSS Analyzer
检查样式表的有效性，验证样式表是否符合 W3c 标准。
5. Format CSS Online
格式化样式表文件，使便于阅读和编辑。
6. Tabifier
简单的整理功能，不破坏结构，使样式表美观且易于阅读。
7. Pretty Printer
一款多用途代码优化工具，提供多种选项，除 CSS 外，还支持 PHP，Java，C++，C，Perl，JavaScript 等多种语言。
