注:本文翻译自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:
<script type="text/javascript"src="jquery.js"></script>
实际结果是,即使文档中包含“text/javascript”设置,浏览器却从未关注过哪怕一丁点儿type属性的设置,因此HTML5中舍弃了这一点,script定义变成了这样:
<script src="jquery.js"></script>
3) 从style元素中删除type属性
你猜对了!link元素要链接到一个CSS文件也不再需要type属性了,这同样起作用,然而你还是需要设置rel属性:
<link rel="stylesheet"href="bootstrap.css" />
4) 简化内容类型的 meta 声明
同样,head部分的另外一些标记也可以简化,丢弃那些复杂的内容类型声明,只需要简单地写成下面这样就行了:
<meta charset="UTF-8">
当然,如果你的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属性有了一整套新的可设置的值,试一下下面的代码:
<input type="email" />
<input type="phone" />
<input type="url" />
<input type="search" />
不支持这些值的浏览器会回退到以前的方式,解析为标准的文本输入框。但无论在外观还是在功能上,它们都会给你一个不小的惊喜。为你的标记增加这些富裕的功能当然不会对你有什么不利。
当你向网页里添加HTML5功能时,还可以使用好多小技巧。这当然不是一个“非此即彼”的情况。当这些和其他的特色对你变得有用,你会发现自己已经开始接纳这些了。要想更深入的理解,建议你阅读Jeremy Keith的新书《HTML5 for Web Designers》