1. 新的文档类型(Doctype)

html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

上面这个既麻烦又难记的XHTML文档类型你还在使用吗？如果还是这样的话，现在该切换到新的HTML5文档类型了。HTML5文档类型：

html>

现在只要这么简单的15个字符就可以了。(注意：你的doctype的申明需要出现在你html文件的第一行。)2. 图形(Figure)元素你还在考虑用下面的代码来标记图片吗？

Image of Mars. 

上面的代码它不能以简单而且富有语义关联的方式与图形的标题关联，因为它仅仅是用段落标记以及图片元素包裹，而 HTML5通过引进

3. 重新定义原来你可以利用元素来创建与logo密切相关的副标题。不过，现在HTML5修改了这个用法，元素被重新定义了，或者更恰当地说，它现在用来代表小字或其他边注(如，网站底部的版权声明)。4. 不再需要脚本、链接类型很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。在HTML5中，这已经不再需要了。意味着说这两个标签分别代表着样式和脚本。因此，我们可以将它们的类型属性都删除掉。代码如下：5. 使用还是不使用引号记住，HTML5与XHTML不同，如果你不喜欢的话你不必用引号将属性包裹起来。不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。

 Start the reactor.

6. 使你的内容可编辑HTML5其中一个非常强大的功能就是"contenteditable"，顾名思义它将允许用户编辑元素(包括他的子元素)内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。

html>untitled

 To-Do List 

 Break mechanical cab driver.  Drive to abandoned factory Watch video of self 或者，按照第五条技巧所说的，你也可以将第九行的代码写成这样(不用引号)：7. 电子邮件输入如果我们应用"电子邮件"类型来指定输入的形式，我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。虽然说内置的表单验证很快就会到来，但是我们也不能完全依靠这个。比较旧的浏览器不理解这种"电子邮件"类型，它们只会简单地返回到普通的文本框。

html>untitledEmail: Submit Form 

在说到浏览器所支持和不支持的元素以及属性时，你必需知道当前所有浏览器都不是那么可靠。例如，Opera只有在你指定name属性时才支持电子邮件验证。不过，它不支持占位符属性(下面即将要讲到的)。最后，虽然你可以使用这种形式的验证，不过不要过分依赖它。8. 占位符此前，我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适，但是只要用户删除了该文本，输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。9. 本地存储多亏了HTML5的 local storage ，我们可以让高级浏览器"记住"我们输入的内容，就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持，但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。10. 语义性的Header和Footer

上面的代码一去不复返。Divs从根本上来说并没有任何语义结构，即使应用上了ID还是如此。而在HTML5中，我们可以使用和元素，上面的代码就可以替换为：

……

不过注意不要将这两个元素与网站的头部和脚部混淆起来。它们只是代表它们的容器。

来源 | web前端开发

审核 | 吕梁 曾琦 李明辉(总编辑)

监制 | 方正

山东传媒职业学院信息工程系

新媒体中心