p2h.cn始于05年,最早由来自腾讯,网易的前开发工程师,曾经为美的,格兰仕,电信,陆虎等企业提供过高品质psd转html解决方案。累计300多个客户至今,超过1000多个项目。

专注前端技术,关注用户体验
  • 2011年11月16日

使用html5布局的好处

【P2H观点】:使用html5有什么好处?我们先从html5的特性开始说起,html5在进行网页布局和css关联的时候,不用写.classname 也不用写 #idname, 这完全得益于html5写法上的进步,一种与xml书写极为相似的写法,html5可以自定义标签。经过p2h的证实,用html5切图的页面大小比普通的html5切图的大小小10%~30%左右。

使用HTML5的主要好处之一是,我们能够摆脱过多的重复代码。你不必再用id和class去定义一切,因为这些都已经默认建成了。

在其他元素中,你可以在页头简单的使用,导航部分使用,内容区域使用,而在页脚,你猜使用什么?使用。另外,你可以在内使用来分割你的内容。这事一件好事,因为浏览器能够更准确的判断内容的关联性,从而帮助SEO,而且它还减少了编码时间。你依然能够继续使用,它依然能工作,只是现在有一个更好的,更简单的方法去实现它。

HTML5还有另外两个主要的进步,这将使得开发人员的工作更加简单。第一个是:

 

1. 视频标签

现在,我不打算介入“Flash完了”的辩论。因为这是另外一个完全不搭界的话题。我想说的是……我认为Flash会因为标签有点难受,但不会那么快就消完了,并且其中主要一个原因是:安全性。HTML5的标签不能保护你的视频文件,任何人都可以下载。就我个人而言,我愿意开放资源,而且认为,如果有人愿意把自己的网络视频放到网上,就不会介意有人想下载它。事实上,他们应该高兴,有人愿意保存他们的视频–因为这意味着他们喜欢它,并希望与人分享它。但是,我又要说的是(为什么要说又?),关于分享,这又是另外一个话题了,有空再讨论……

接下来,要使用标签你所要做得是:

如果你怕有人不能够看到它,最简单的方法就是这样

你的浏览器看不到视频: 点击下载视屏

你还可以用视频玩出其他花样来,比如:自定义控制,轻易的访问本机键盘,可以用不同的语言加入字幕。

在视频方面有一个恼人的问题是,苹果决定在Safari中不支持开源的OGG格式,而是选择了H264,因此为了满足所有的浏览器,我们需要包括两个源,对应两个不同的类型。令人欣慰的是,浏览器会自动检测并自动选择正确的,而忽略另外一个。如下

Your browser cannot view this content: Download video

第二项重大的进步是:

 

2 表单验证

杯具,大多数浏览器竟然不支持这个功能,事实上,我很负责任的说Opera是目前惟一一个支持的。无论如何,我介绍它是因为我认为它会因此而走向辉煌。

不必再使用javascript乱搞,你就可以简单的输入类型,告诉它是否需要或不,来进行表单验证。

你还可以这样使用autofocus:

看,这是多么的简单!

 

3. 最后……

尽管我们还没有得到充分的支持,而且HTML5规范还没有最终确定,但我们已经可以开始玩玩HTML5的上述功能,而且我真的认为我们应该……越多人使用,web就进步越快,并且会给某些人,像微软更大的压力去接纳web标准,并为适当的改变提供支持。

接下来,在下周,我们将写一写为什么我们认为网页设计人员/网页开发人员都应该停止侍候过时的浏览器,而完全接收新的技术,例如CSS3和HTML5。如果我们原地踏步,那么我们怎么可能进步?我们应该以惊艳的东东为先,老技术靠后,而不是相反。


欢迎转载,转载请注明来源:http://www.p2h.cn/the-benefits-of-using-html5-layout/

相关链接: