如何在你的网站上使用HTML5

通过多丽史密斯

还有的是很多写了关于政治和新兴的HTML5规范的过程（见“什么HTML5的期望”和“HTML5将如何改变网络但是工作中的Web开发人员主要想知道的是:我可以用HTML5做什么，我什么时候可以开始使用它?好消息是你可以用HTML5做很多事情。好消息是，现在你可以用HTML5做很多事情。

但首先，一个重要的警告：你需要知道你的听众，不过，当然，这是真的，你是否希望开始使用HTML5。如果您的大部分网站的访问者仍然使用Internet Explorer 6，那么你没有理由着急。在另一方面，如果你的网站主要是对iPhone和iPad的移动浏览器，你还等什么呢？但是，如果你的网站在中间某处下降 - 因为大多数人 - 这里是逐渐变化为HTML5一些方便的指导方针。

(读读尼尔·麦卡利斯特的入门书:“你能从HTML5期待什么|找出答案InfoWorld的和平计划，以结束iPhone的html5对flash的战争。]

HTML5的特点是什么，你现在可以使用

虽然HTML5规范仍在通过标准委员会的工作草案，显著的部分已经被部署在苹果Safari浏览器，谷歌Chrome，Mozilla Firefox浏览器（Firefox 4还将提供更多功能）和Opera - 和微软即将推出IE9有望采纳大部分HTML5规范草案也的当我可以使用网站是一个很好的资源，提供的详细资料了每个主要的浏览器支持对HTML5和相关的新兴的Web标准。

浏览器安全深度研究

另一个网站,HTML5测试显示基于每个浏览器支持的HTML5功能的数量(300分)的兼容性得分(你需要在每个浏览器中访问你想要得分的站点)。截至2010年6月12日，分数为:

*苹果Safari 5.0: 208

*谷歌Chrome 5.03: 197

*微软IE7：12

*微软IE8: 27

* Mozilla Firefox浏览器3.66：139

*歌剧院10.6：159

有明确HTML5的核心特点是所有主要非IE浏览器做支持，这可以让“HTML5草案”的网站将被部署到一个大段的网络使用人口。

从顶端开始。你现在可以使用HTML5的doctype;没有理由不这么做。你甚至可以在你的网站做大量的查找和替换，寻找(例如):

< !DOCTYPE html公共”——/ / W3C XHTML 1.0 Strict / / EN / / DTD”

" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >

< html xmlns = " http://www.w3.org/1999/xhtml " >

这可以变成：

<！DOCTYPE HTML>

这不是更清楚更直接了吗?如果浏览器之前将您的页面呈现为符合标准的，那么之后它们仍然会这样做。(如果本文中的代码不能正确显示，请转到原始文章的网址InfoWorld.com。)

用视频行动起来。很多关于HTML5视频标签的报道都是关于当前的格式之争。有四个竞争者——闪，H.264，OGG，和WebM的- 所有这些都希望成为未来的发挥其在所有浏览器的所有平台上的格式，没有。可悲的是，它不会出现浏览器厂商将在同意共同的未来格式任何时间很快。

考虑到这条新闻，我们完全有理由得出这样的结论:视频标签还没有准备好进入黄金时段。但等一下:后面是聪明的人HTML5预见到这一点，并使视频格式独立。事实上，因为视频可以包含多个源标签，所以它最终会运行得相当好。如果您的浏览器不支持第一个选项，它会再次尝试第二个选项，然后再尝试第三个选项，依此类推。它甚至是有效的回落到闪光和再次单一的图像。

处理这个问题所需的HTML可以在Video for Everybody中找到，这是一个开放源码项目，不使用JavaScript和浏览器嗅探来支持基于web的视频。

从语义上讲。一个在HTML5来最大的变化是语义上有意义的标签。机会是，你的网站是充满了像

和标记。HTML5的数字，当网站的优势都具有相同的元素一遍又一遍，我们应该使用有意义的名称一样，好了，<标题>和

。当然，我们应该再使用CSS（层叠样式表），以风格的元素。

但是等等，你可能会说:没有任何版本的IE提供过对这些元素的支持，而且这是一个庞大的群体!这是不是意味着我们运气不好?幸运的是，这里也有一个工作;你所要做的就是将这段代码粘贴到每个页面的标题部分:

< !——[if it IE 9]>

< script src =

" http://html5shiv.googlecode.com/svn/trunk/html5.js " >

> < /脚本

< ! [endif]——>

HTML5 Shiv是一个基于一个简单发现的开源项目:如果你在IE中创建了一个新的DOM元素，你就可以用这个名字来设计任何元素。也就是说，一旦您创建了像这样的新DOM元素:document.createElement("foo");。然后你可以添加任意数量的标签到你的页面，IE会设计它们。HTML5 Shiv包含了IE(还)不知道的所有HTML5标签的列表，并一个一个地创建它们，允许你根据自己的喜好来使用和设计它们。下面是一些HTML5的新语义标签:article, section, header, footer和nav。

聪明的形式。HTML5的另一个特性是更智能的表单元素。如果您厌倦了编写(再次)检查访问者是否输入了有效的电子邮件地址(或有效的电话号码、有效的url等等)的相同的旧脚本，那么您并不孤单。浏览器处理最常见的数据输入类型应该是合理的，对吗?正确的。

这里的语法:

< input type = "电子邮件" >

< input type = " url " >

< input type = "数量" >

< input type = "电话" >

什么年龄较大/较小的浏览器？这里有可爱的一部分：如果他们看到他们不明白的值类型属性，它们集类型为默认值，文本 - 这恰好是我们会想为每个这些备用。

支持html5的浏览器可以在不同程度上验证这些字段类型，但您仍然希望保留这些验证脚本，至少在IE9普及之前是这样。

如果您想知道如果您仍然需要这些脚本，为什么要费心更改，那么您从来没有在an上填写过Web表单苹果手机。如果你有，你已经注意到根据输入类型的键盘变化所需要的：电子邮件地址获得一个@符号前面，电话号码获得一个键盘，等等。所有你必须做的就是该功能是改变输入标签类型属性。

为了更聪明，这里有一个新属性:placeholder。它的值只是一个你经常在Web表单中看到的占位符文本，但是现在浏览器为你处理它:

当光标进入字段，然后重新显示占位符文本如果该字段为空光标离开时，表单字段自动清除本身。

HTML5的特点是什么，你很快就可以使用

并不是所有的HTML5都准备好了成为焦点，因为有各种各样的原因(不，它们并不是都有首字母“IE”)。浏览器支持即将到来，这里有两个元素，您将能够在不久的将来使用。

花哨的字体。在某种程度上，每个网页设计师都希望他们可以强迫每一台访问他们网站的计算机安装一些自己喜欢的字体。通过CSS3 @font-face属性，您将拥有这种能力。在这里，坚持的是Firefox(3.5版本之前)和Mobile Safari(3.5版本之前)iOS 4)。如果你有足够的访问者使用这些浏览器，你可能想要推迟一段时间。

然而，当您可以为不同的浏览器提供不同的字体时，没有真正的理由让每个用户代理呈现相同的站点。如果您想为那些能够处理这些字体的用户提供定制字体，并为那些不能处理这些字体的用户提供备份，那么您需要检查Font Squirrel的@font-face生成器。

阴影和曲线。更让设计师满意的特性还包括文本阴影、框阴影和框上的径向角。同样，如果你能处理好你的网站在每个浏览器上没有像素完美的相同呈现方式，你可以从今天开始使用这些。在CSS3生成器的帮助下，这里有一些示例。

圆角边框(Firefox 3+， Safari 3.1+， Opera 10.5+， Chrome 4+， IE 9+):

-webkit-border-radius: 10 px;

-moz-边界半径：10px的;

边界半径：10px的;

文本阴影（的火狐3.5和Safari 1.1+，歌剧9.6+，铬4+）：

文字阴影：为5px 5px的3px的#CCC;

Box shadows (Firefox 3.5+， Safari 3+， Opera 10.5+， Chrome 4+):

-webkit-box-shadow: 10px 10px 5px #666;

-moz-的box-shadow：10px的10px的为5px＃666;

的box-shadow：10px的10px的为5px＃666;

有一天你会使用哪些HTML5特性

这一类别包括的元素和功能，网站设计者和开发者们想了很多年。不幸的是，它可能是一个几年有足够的前真实世界的支持，以便能够使用它们。

才华横溢的形式。我前面提到了更智能的表单，这使得这些新的表单字段成为真正的virtuosos——如果它们得到广泛支持的话。

一个水平滑块控制允许用户将滑块移动到挑一些：

输入类型="range" min="0" max="100" step="2" value="50">

颜色选择器：

输入类型= "颜色" >

日期字段(其他类型的有效值有月、周、时间、日期时间和日期-本地):

日期< input type = " " >

如果您需要一些与这些字段不匹配的内容，那么您可以使用RegExp(正则表达式)模式创建自己的内容。这是一张信用卡账单:

< input type = " text "模式= "[0 - 9]{13、16}" >

最后，一种方法来告诉浏览器的一个给定的字段必须有一个输入的数值：

需要< input type = " text " >

这些标签都还没有提供它们需要的跨浏览器和跨平台支持，但是当那个时候到来的时候，您将会非常期待它们。

Print-like布局。CSS3的另一个特性是多列布局，如果完全实现，它将延长设计者的寿命。它目前仅在Firefox和Safari中作为测试用例实现。

-moz列数：3;

-moz柱 - 间隙：20像素;

-webkit列数：3;

-webkit柱 - 间隙：20像素;

位置检测。随着人们对Gowalla和Foursquare等基于位置的服务越来越感兴趣，浏览器了解用户的位置非常有用。很明显，这首先是在移动浏览器中实现的，但是Firefox 3.5和Safari 5已经开始提供对地理位置的支持。(Chrome的地理定位支持目前是通过Gears实现的，Gears正在被逐步淘汰，取而代之的是HTML5。)

离线工作，与本地存储。在云中保护数据是一个好主意 - 直到你发现自己没有上网。或者，也许你有一个Web应用程序，处理大量的数据，超过你想要的作品要连续倒来倒去到服务器。或者，也许你有你的移动设备上有限的数据计划，所以你想要做尽可能多的脱机工作成为可能。无论这个问题，答案是利用使用同步备份到云端，当你重新连接本地存储的离线Web应用程序。

目前支持离线工作的浏览器有Firefox 3.5+、Safari Mobile 3.1+、Safari 4+和Chrome 4+。

快捷键HTML5的前沿

如果你迫不及待地等着IE8老死，有很多方法可以跳过它——同样，这取决于你的网站日志对访问者的描述。例如，谷歌的Chrome框架插件将一个Chrome实例放入IE浏览器中。如果你知道你的ie网站访问者很可能已经安装了GCF，你可以强制使用它与这个小增加到你的页面头部:

< meta http-equiv =“X-UA-Compatible”内容=“chrome = 1”>

也就是说，再加上一点点的JavaScript（由谷歌提供）未安装GCF将用户重定向，是所有你可能需要的工作围绕IE浏览器的限制。

本文中列出的元素只是目前包含在HTML5或CSS3中的一小部分。如果您现在必须开始使用某个特性，那么很有可能有一个开源项目正在研究如何使其在性能较差的浏览器上运行。

许多关于HTML5的媒体报道都集中在政治上，“直到2022年”，或者HTML5作为“Flash杀手”的前景上。的reality of HTML5 is simply that it's the long-needed and long-overdue update to HTML4 -- and you can start to implement it today.

这个故事，“如何在你的网站上使用HTML5今天”是最初发表信息世界。

加入网络世界社区有个足球雷竞技appFacebook的和LinkedIn对最重要的话题发表评论。

软件

工资调查:结果在