Apple和Google现在是两大推广HTML 5和WebKit的巨头,Apple有一个专门推广HTML 5的网站(苹果官网Demo展示HTML5网页特效),那么Google也不甘落后,于是他们也搞出了个HTML5ROCKS(可能需要翻过去)。
HTML5ROCKS主要分三个栏目:HTML5展示、代码乐园、步骤化教程。在代码乐园中,可以修改预设的代码,或者插入自己的代码来运行。
Google Chrome对这个网站的支持最好,同样使用Webkit引擎的Safari也可以支持,另外,被Chrom Frame强行插入的IE也可以支持。
下面着重介绍一些展示出来的特性,操作的过程很是流畅。
这个演示基于HTML5,可以按键盘上的“←”或“→”向左向右翻页,也可以按Ctrl(在Mac系统是Command)和加号或减号来放大或缩小演示幻灯片。
图三:HTML5大致可以理解为HTML+CSS+JS APIs
以下是一些JS APIs演示:
图四:JS APIs之选择器
图五:JS APIs之网页存储
图六:JS APIs之Web SQL Database
图七:JS APIs之缓存
图八:HTML5之新的语义标签,增强可用性
图九:HTML5之新的链接叙述,增强可用性
图十:HTML5之新的表单栏位格式(Web2.0表单)
新增的range格式让我们省却了原先用js做半天才实现的效果,而placeholder更是大大地简单又实用。Input可以用type来限制格式,以此验证表单栏位是否有效,同时配合CSS的:invalid伪类来实现栏位错误的样式。
图十一:HTML5之内嵌多媒体播放
mp4的视频可以直接播放,并且有相应的JS接口。
图十二:HTML5之Canvas画图
这是个好东西,只要浏览器能够支持,这让我想到IE所支持的vml。
图十三:HTML5之SVG
可以按放大缩小按钮来控制放大镜中的倍数,移动放大镜观看想要看的部位……
图十四:总结
图十五:CSS3之选择器
图十六:新的字体支持,可以使用url引用远程字体
图十七:内容分栏
这玩意儿的出现,让不少网页设计师笑成一朵花。
图十八:圆角
圆角大家应该见多了,随着Firefox以及Chrome的普及,很多网站的圆角效果、阴影效果都可以正常地显示。
图十九:渐变
标准的渐变以及多背景图的出现,将大大减少代码量以及背景图片的数量。
图二十:阴影
图二十一:倒影,有没有让你想起当年很流行的Web2.0 Logo?
截图就先发到这里,各位尽量使用Chrome来体验:)