HTML5新增了很多语义化的标签，赋予网页更好的意义和结构。一个网站要做到一套代码多种终端设备都美观的展现，就需要使用CSS3多媒体查询Media Query做成响应式的。
HTML5提供了一些新的元素和属性，例如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用。让你在拥有更简洁的代码的同时，也有利于SEO。
文章一：http://imsole.net/html5/ele.html
文章二：http://www.xuanfengge.com/html5-structure.html
HTML5是在低版本的浏览器（IE8-）的兼容是有限的，类似很多结构性的标签<header>、<section>、<footer>等在IE8以下不会被识别。有什么方法能实现兼容呢？在高级浏览器能使用上这些标签，增强语义化；而在低级浏览器（包括IE6）上表现不会出错。那就需要引入html5.js这个文件。 查看全文
也许你有注意到本站的logo，点击之后，会产生一个纸飞机飞翔的过程，是一个3D动画效果，目前仅支持webkit内核浏览器预览效果。
http://xuanfengge.com/demo/201402/plane
消息面板翻转、飞机两翼折叠、飞机平放预备飞行、飞机后退助跑、飞机向前飞翔、整个过程的背景颜色过渡。
主要的动画效果（步骤分解状态）使用CSS3的变形(transform)、转换(transition)、动画(animation)、视图距离(perspective)等等新属性实现，并结合js的setTimeout控制动画时间，通过增减css的class来实现整个过程动画。 查看全文
在CSS3盛行的年代，我们要学会极致的运用它的属性来装点我们的网站，学会CSS3的渐变就可以做出一些非常炫的效果。
在没有CSS3之前，为了显示一个渐变而专门制作一个图片，这种不法不但不灵活还增加请求数。那我们能用gradient做些什么呢？做渐变背景、做渐变导航、做按钮、按钮的四态（default、hover、active、focus）、绘制图形、配合CSS3动画做特效等。
对象选择器 {background:-浏览器前缀-linear-gradient( 起点方向,起点颜色,终点颜色);}
对象选择器 {background:-浏览器前缀-radial-gradient( 起点方向,形状,大小,起点颜色,终点颜色);} 查看全文
border-radius，css3的圆角属性。但是除此会是圆角，它还可以做点别的事情。radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如图下图第7），把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。以下图例就是通过定义border-radius得到的效果。
把这些基本的图形进行组合，还可以描绘成不同的图案。以下只是简单的几个举例，更多的图形，自己动手画吧。仅border-radius就能实现这么丰富的图案，如果再加上边框大小、渐变颜色和阴影等，将会添加更多的质感。更多图形请参见：CSS3绘制各种图形效果
有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？
webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。
来看看这2个滚动条demo： demo1（图片版）、demo2（纯CSS3版） 查看全文
