现在如何在你的站点上使用HTML 5(1)

wjlgryx

浏览: 298470 次
性别:
来自: 北京

最近访客更多访客>>

Helkern

Helenhhj

cao510453

1729051657

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Html5 文章

HTML HTML5 IE 浏览器 Chrome

已经有许多文章是关于HTML 5的了，例如“HTML 5时代来临”和“HTML 5会如何改变网络”之类的，但是对于Web开发人员来说，最主要需要知道的是：我现在可以用上HTML 5来做些什么，我怎么开始使用它？好消息是现在已经有不少的HTML 5里的东西可以使用了。

51CTO推荐阅读：从零开始构建HTML 5 Web页面

但是，开始你就必须要明白一件事情，你需要知道你的受众如何，否则的话你就不该使用HTML 5。假如你的站点的访问大部分人都是在使用IE 6，那么你完全没有任何理由使用HTML 5。另一方面，如果你站点的访问者都是使用手机浏览器，如iPhone和iPad，那么你还在等什么呢？马上就可以开始动手了！等等，这里有一些准则，看完再动手不迟。

你现在可以使用哪些HTML5特性？

虽然HTML 5标准现在仍然是个草案，在标准化组织手里依然还在商讨，但是重要的部分已经被许多现代的浏览器实现了。Apple Safari, Google Chrome, Mozilla Firefox, Opera和Microsoft IE 9都已经很好的支持了HTML 5的部分特性。先来看看各浏览器在HTML 5 TEST网站上的得分如何：

* Apple Safari 5.0: 208
* Google Chrome 5.03: 197
* Microsoft IE7: 12
* Microsoft IE8: 27
* Mozilla Firefox 3.66: 139
* Opera 10.6: 159
看起来很明显，非IE核心的主流浏览器大部分都对HTML 5支持良好，它们可以使“使用了HTML 5草案的网站”工作得很好。回到开始，你现在就可以使用HTML5的doctype了，没有理由不使用，你甚至可以在整个网站里进行查询和替换：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
变为：

<!DOCTYPE html>
<html>
下面这部分代码看起来更简洁和直接，不是吗？如果浏览器用一个标准兼容的方式来渲染你的网页，那么他们现在仍然会这么做。说说视频吧。许多关于HTML5的出版物都会提及到目前的竞争者，一共四个：Flash, H.264， OGG和WebM。所有这些在未来都有可能成为一个标准格式，而且没有一个可以在所有平台所有浏览器上正确播放，很悲哀吧，看起来，浏览器的赞助商们在短时间内还没有为这个特性准备一个公共的格式。

所以，显而易见的是，Video标签现在还没有到可以应用的阶段。但是等下，人们应该期待HTML5的视频标签是与格式无关的。事实上，因为视频可以包含多个Source标签，它也必须得这样工作。如果你的浏览器不支持第一个选项，那么就会去尝试第二个，再第三个，四个，五个……

处理这样的情况的HTML是一个开源项目，支持基于网络的视频，不使用任何脚本和浏览器嗅探，可以在这里找到。从语义上讲，HTML5的一个大的改变就是那些语义明确化的标签。可以看到的改变是，目前你的站点上充满了类似于这样的代码：

<div id=”header”> <span class=”nav”>

而在HTML5中，你可以这样表示：

<header> <nav>

是不是语义更明确？当然，我们还是要用CSS[层叠样式表]来格式化这些元素。但是等等，没有一个IE版本可以支持这些标签！这对于人们来说是一个巨大的问题！我们真的这么倒霉吗？谢天谢地，我们还有一个解决方案：所有你需要做的事情就是把下面的代码粘贴到你的页面的HEAD标签里：

<!–[if lt IE 9]>
<script src=
"http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]–>
HTML5 Shiv是一个开源的项目，基于一个简单的发现：如果你在IE里创建了一个DOM元素，那么你就可以用那个名字在样式里使用。例如，如果你使用：

document.createElement(“foo”)

创建了一个DOM元素，那么你就可以在当前页面里加入任意数量的foo标签，而且IE会格式化它们。HTML5 Shiv里包含了一些IE不能识别的HTML5元素，然后一个一个的去创建它们。这样你就可以使用这些HTML5标签了，例如：

Article, Section, Header, Footer, Nav

智能表单，另一个使HTML5更聪明的特性。如果你对于每次写同样的脚本去检查邮件地址的合法性或者类似于电话号码、网络地址之类的感到厌烦的话，那么你不是一个人！有理由去让浏览器去完成这些烦人的工作，不是吗？相当正确。

下面是语法：

<input type="email">
<input type="url">
<input type="number">
<input type="tel">
那些旧的浏览器会如何处理？比较聪明的部分：如果它们看到一个TYPE属性有个值不认识的话，那么它们就会用默认值Text去渲染这个元素，这正是我们所期望的向下兼容的结果。支持HTML5的浏览器会自动去验证这个字段类型，但是，你最好还是不要把以前的脚本扔掉，至少——也要在IE9普及以后。

如果你还想知道除了验证之外，支持这些类型的浏览器还做了些什么事情，那么你可以在iPhone上试试这些表单。你会注意到与表单关联的键盘类型都会发生变化，有的时候是数字类型的，有的时候是字母类型但附加了一个@符号，还有的甚至直接有一个按键.com，这就是这些元素的魔力。所有你需要做的就是改变这个type的属性值而已。还可以更智能一点，这里还有个新属性：

分享到：

现在如何在你的站点上使用HTML 5(2) | HTML 5 File API应用实例(访问本地)

2011-03-24 16:18
浏览 651
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论