How to use HTML5 on your website today

ByDori Smith

还有的是很多写了关于政治和新兴的HTML5规范的过程（见“What to expect from HTML5" and "How HTML5 will change the Web," as just two examples), but what working Web developers primarily want to know is: What can I do with HTML5, and when can I start using it? The good news is that there's a lot you can do with HTML5. The better news is that there's a lot that you can do with HTML5 today.

But first, one major caveat: You need to know your audience, though, of course, this is true whether or not you want to start using HTML5. If the majority of your site's visitors still use Internet Explorer 6, then you have no reason to rush. On the other hand, if your site is primarily for mobile browsers on iPhones and iPads, what are you waiting for? But if your site falls somewhere in the middle -- as most do -- here are some handy guidelines to ramping up to HTML5.

[ Read Neil McAllister's primer: "What you can expect from HTML5。" | Find outInfoWorld's peace plan for ending the iPhone's HTML5-versus-Flash war。]

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

Although the HTML5 specification is still a draft being worked on by a standard committee, significant portions are already deployed in Apple Safari, Google Chrome, Mozilla Firefox (with more to come in Firefox 4), and Opera -- and the forthcoming MicrosoftIE9 is expected to adopt much of the draft HTML5 specificationas well. TheWhen Can I Use site是一个很好的资源，提供的详细资料了每个主要的浏览器支持对HTML5和相关的新兴的Web标准。

Browser Security Deep Dive

Another site,The HTML5 Test, displays compatibility scores, based on the number of supported HTML5 capabilities (out of 300), for each browser (you need to visit the site in each browser you want scored). As of June 12, 2010, the scores were:

* 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

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

从顶部开始。现在，您可以使用HTML5的DOCTYPE;没有理由不这样做。你甚至可以做一个群众查找和整个网站取代，寻找（例如）：

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

Which can be turned into:

那不是更清晰和更straightf很多orward? If browsers rendered your pages as standards-compliant before, they will still do so afterward. (If the code in this article doesn't display properly, go to the original article atInfoWorld.com。)

Get moving with video. Much of the press about HTML5's video tag has been about the current format battles. There are four competitors --闪, H.264, Ogg, andWebM- 所有这些都希望成为未来的发挥其在所有浏览器的所有平台上的格式，没有。可悲的是，它不会出现浏览器厂商将在同意common future format任何时间很快。

Given that news, it's perfectly reasonable to jump to the conclusion that the video tag isn't ready for prime time. But wait: The bright folks behindHTML5已经预料到并提出视频格式无关。事实上，因为视频可以包含多个源标记，它结束了工作了相当不错。如果你的浏览器不支持第一个选项，它与第二再次尝试，然后再与第三个，依此类推。它甚至有效回落到Flash，并再次以一个单一的形象。

处理这种需要的HTML可以在视频中找到每个人，一个开源项目，以支持使用非JavaScript和浏览器嗅探基于Web的视频。

Semantically speaking. One of the biggest changes coming in HTML5 is semantically meaningful tags. Chances are, your site is full of tags like

and . HTML5 figures that when a preponderance of sites all have the same elements over and over, we should be using meaningful names like, well,

and

. And of course, we should then use CSS (cascading style sheets) to style those elements.

But wait, you say: No version of IE has ever shipped with support for these elements, and that's a huge chunk of people! Does that mean we're out of luck? Thankfully, there's a work-around here as well; all you have to do is paste this snippet into the head section of each of your pages:

HTML5希夫是基于一个简单的发现一个开源项目：如果您在IE中创建一个新的DOM元素，你就可以风格该名称的任何元素。也就是说，一旦你建立这样一个新的DOM元素：使用document.createElement（“富”）;.然后，您可以任意数量的标签添加到您的网页，和IE将他们的风格。HTML5希夫包含了所有的HTML5标签的列表，IE浏览器不（还）知道并创建逐一，让您再使用和样式到您的心脏的内容。这里有一些HTML5的新的语义标签，让你开始：文章，一节，页眉，页脚和导航。

Smart forms. Another feature of HTML5 is smarter form elements. If you're tired of writing the same old scripts that check (again) to see if visitors entered valid email addresses (or valid telephone numbers, valid URLs, and so on), you aren't alone. It should be reasonable for browsers to handle the most common types of data entry, right? Right.

Here's the syntax:

What about older/lesser browsers? Here's the cute part: If they see a type attribute with a value they don't understand, they set type to its default value, text -- which just happens to be what we'd want as a fallback for each of these.

HTML5-supporting browsers can validate each of these field types to varying degrees, but you'll still want to keep those validation scripts around, at least until IE9 is ubiquitous.

If you're wondering why bother changing if you'll still need those scripts, you've never filled out a Web form on aniPhone。If you have, you've noticed the keyboard change based on the type of input required: Email addresses get an @ sign up front, telephone numbers get a keypad, and so on. All you have to do to get that functionality is to change the type attribute on your input tags.

For even more smarts, there's a new attribute: placeholder. Its value is simply the placeholder text that you often see in Web forms, but now the browser handles it for you:

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

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

Not all of HTML5 is ready for the spotlight, for a variety of reasons (and no, they don't all have the initials "IE"). Browser support is coming, though, and here are two elements that you'll be able to use in the not too distant future.

Fancy fonts. At one point or another, every Web designer has wished that they could force every computer visiting their site to install some favorite font. With the CSS3 @font-face property, you'll have that power. The holdouts here were Firefox (before version 3.5) and Mobile Safari (beforeiOS 4). If you have enough visitors with those browsers, you may want to hold off for a while.

However, there's no real reason why you should be trying to make every user agent render your site identically when you can just offer different fonts to different browsers. If you want to offer custom fonts to those that can handle them, with fallbacks for those who can't, you'll want to check Font Squirrel's @font-face Generator.

阴影和曲线。另外设计师赏心悦目的功能即将下山的路是文本阴影，盒阴影，并在箱子径向角落。同样，如果你能处理你的网站在一个完美的像素相同的方式不呈现在每一个浏览器，你可以开始使用这些今天。下面是一些例子，从CSS3发生器帮助。

Rounded borders (Firefox 3+, Safari 3.1+, Opera 10.5+, Chrome 4+, IE 9+):

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

边界半径：10px的;

Text shadows (Firefox 3.5+, Safari 1.1+, Opera 9.6+, Chrome 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;

What HTML5 features you'll use, someday

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

Brilliant forms. I referred earlier to smarter forms, which makes these new form fields downright virtuosos -- when they're widely supported.

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

input type="range" min="0" max="100" step="2" value="50">

A color picker:

输入类型=“彩色”>

A date field (other valid values for type are month, week, time, datetime, and datetime-local):

If you need something that doesn't match any of these fields, you'll be able to create your own with RegExp (regular expression) patterns. Here's one for credit cards:

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

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

None of these tags yet have the cross-browser and cross-platform support they'll need to be usable, but when that time comes, you'll be looking forward to them.

打印样布局。另一个CSS3功能，全面实施将增加年设计师的生活，是多列布局。它目前只实现作为测试用例在Firefox和Safari。

-moz列数：3;

-moz柱 - 间隙：20像素;

-webkit列数：3;

-webkit柱 - 间隙：20像素;

Location detection. With the growing interest in location-based services such as Gowalla and Foursquare, it's useful for a browser to know where its user is. For obvious reasons, this was first implemented in mobile browsers, but Firefox 3.5 and Safari 5 have begun to provide support for geolocation. (Chrome's geolocation support is currently via Gears, which is in the process of being phased out in favor ofHTML5。)

Working offline, with local storage. Keeping your data in the cloud is a great idea -- until you find yourself without Internet access. Or maybe you have a Web app that works with large amounts of data, more than you want to be continuously shuffling back and forth to a server. Or perhaps you have a limited data plan on your mobile device, so you want to do as much work offline as possible. Whichever the issue, the answer is to utilize offline Web applications using local storage that sync back to the cloud when you reconnect.

目前支持HTML5的离线工作能力的浏览器是火狐3.5 +，Safari浏览器的移动3.1+和Safari 4+和Chrome 4+。

Shortcuts to HTML5's bleeding edge

If you're too impatient to wait for IE8 to die of old age, there are a number of ways to skip ahead -- again, depending on what your site logs say about your visitors. For instance, Google's Chrome Frame plug-in puts an instance of Chrome into IE browsers. If you know your IE-using site visitors are likely to have GCF installed, you can then force its usage with this small addition to the head of your pages:

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

本文中列出的元素是只有少数目前包括如HTML5或CSS3的一部分的人的。如果有一个功能，你只需要现在就开始使用，有很好的机会有是搞清楚如何使之成为-能力较差的浏览器中的一个开源项目。

Many of the media reports about HTML5 have focused on the politics, the "not until 2022" sound bite, or on HTML5's prospects as a "Flash killer." The 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.

This story, "How to use HTML5 on your website today" was originally published byInfoWorld 。

Join the Network World communities onFacebook和LinkedInto comment on topics that are top of mind.

Software

IT Salary Survey:res的ults are in