June 24, 2010 ... 评论

Google的HTML5ROCKS(多图)

AppleGoogle现在是两大推广HTML 5和WebKit的巨头,Apple有一个专门推广HTML 5的网站(苹果官网Demo展示HTML5网页特效),那么Google也不甘落后,于是他们也搞出了个HTML5ROCKS(可能需要翻过去)。

20100624091853822.png

HTML5ROCKS主要分三个栏目:HTML5展示代码乐园步骤化教程。在代码乐园中,可以修改预设的代码,或者插入自己的代码来运行。

Google Chrome对这个网站的支持最好,同样使用Webkit引擎的Safari也可以支持,另外,被Chrom Frame强行插入的IE也可以支持。

下面着重介绍一些展示出来的特性,操作的过程很是流畅。

20100624091955002.png
图一:基于HTML5的演示

这个演示基于HTML5,可以按键盘上的“←”或“→”向左向右翻页,也可以按Ctrl(在Mac系统是Command)和加号或减号来放大或缩小演示幻灯片。

20100624092026501.png
图二:网页技术发展时间轴

20100624092038979.png
图三:HTML5大致可以理解为HTML+CSS+JS APIs

以下是一些JS APIs演示:

20100624092147988.png
图四:JS APIs之选择器

20100624092214291.png
图五:JS APIs之网页存储

20100624092256601.png
图六:JS APIs之Web SQL Database

20100624092318264.png
图七:JS APIs之缓存

20100624092456744.png
图八:HTML5之新的语义标签,增强可用性

20100624092509005.png
图九:HTML5之新的链接叙述,增强可用性

20100624092601484.png
图十:HTML5之新的表单栏位格式(Web2.0表单)

新增的range格式让我们省却了原先用js做半天才实现的效果,而placeholder更是大大地简单又实用。Input可以用type来限制格式,以此验证表单栏位是否有效,同时配合CSS的:invalid伪类来实现栏位错误的样式。

20100624092722856.png
图十一:HTML5之内嵌多媒体播放

mp4的视频可以直接播放,并且有相应的JS接口。

20100624092759646.png
图十二:HTML5之Canvas画图

这是个好东西,只要浏览器能够支持,这让我想到IE所支持的vml。

20100624092840162.png
图十三:HTML5之SVG

可以按放大缩小按钮来控制放大镜中的倍数,移动放大镜观看想要看的部位……

20100624092907640.png
图十四:总结

20100624092939626.png
图十五:CSS3之选择器

20100624092952684.png
图十六:新的字体支持,可以使用url引用远程字体

20100624093036395.png
图十七:内容分栏

这玩意儿的出现,让不少网页设计师笑成一朵花。

20100624093109468.png
图十八:圆角

圆角大家应该见多了,随着Firefox以及Chrome的普及,很多网站的圆角效果、阴影效果都可以正常地显示。

20100624093125643.png
图十九:渐变

标准的渐变以及多背景图的出现,将大大减少代码量以及背景图片的数量。

20100624093146077.png
图二十:阴影

20100624093155764.png
图二十一:倒影,有没有让你想起当年很流行的Web2.0 Logo?

20100624093458048.png
图二十三:代码乐园,可以在此练习练习,体验一下。

截图就先发到这里,各位尽量使用Chrome来体验:)

下载Chrome

访问HTML5ROCKS

评论

相关文章