六步学习HTML5-CSDN博客

注：本文翻译自AndyHume的博客，原文地址：http://blog.andyhume.net/html5-in-six-steps/，本人第一次翻译专业类文章，如有词不达意，请各位帮助改正，深表感谢。标题实在不知道该如何翻译，故仍采用原文标题。

28 January 2013

下面的六步会让你只花几分钟就能学会HTML5，这也是开始HTML5的第一步。无论是作为开发者的你，还是你的用户，这里的每一项会对你们有些许帮助。

1)升级 DOCTYPE

很多年以来，选择一个文档类型定义和DOCTYPE需要深思熟虑。你是选择HTML还是XHTML？如果选择XHTML，使用Transitional还是Strict？Strict1.0还是Strict1.1？每一个选择都会有细微的差别。现在，这些简单了，HTML5的DOCTYPE定义是这样的：

<!DOCTYPE html>

要让最新的浏览器以标准模式来解析你的页面，这是最基本的要求，这才是你现在要使用的DOCTYPE。

2) 从script元素中删除type属性

曾经，你需要使用下面这样的方式定义script：

实际结果是，即使文档中包含“text/javascript”设置，浏览器却从未关注过哪怕一丁点儿type属性的设置，因此HTML5中舍弃了这一点，script定义变成了这样：

3) 从style元素中删除type属性

你猜对了！link元素要链接到一个CSS文件也不再需要type属性了，这同样起作用，然而你还是需要设置rel属性：

4) 简化内容类型的 meta 声明

同样，head部分的另外一些标记也可以简化，丢弃那些复杂的内容类型声明，只需要简单地写成下面这样就行了：

当然，如果你的HTTP请求里同时也包含一个Content-Type头，那是一个较好的习惯。

5) 给input标记添加placeholder属性

多年以来，我们一直使用JavaScript显示或删除文本输入框中的提示，现在这些完全是多余的了。最新的浏览器支持placeholder属性，而老浏览器可以忽略它。因此，你不用再操心使用JavaScript来支持这样的功能了。同样，别忘了继续包含label元素。

<label for="city">What city do you livein:
<input id="city" type="text" placeholder="e.g.,London" />
</label>

6) 合理使用input类型

input标记的type属性有了一整套新的可设置的值，试一下下面的代码：

不支持这些值的浏览器会回退到以前的方式，解析为标准的文本输入框。但无论在外观还是在功能上，它们都会给你一个不小的惊喜。为你的标记增加这些富裕的功能当然不会对你有什么不利。

当你向网页里添加HTML5功能时，还可以使用好多小技巧。这当然不是一个“非此即彼”的情况。当这些和其他的特色对你变得有用，你会发现自己已经开始接纳这些了。要想更深入的理解，建议你阅读Jeremy Keith的新书《HTML5 for Web Designers》