HTML5影响了我们的思考方式以及使用web的方式，但是现在又能用HTML5做什么呢？在这篇文章中将来看下在你网站上运用HTML5的几种方式。
消除Internet Explorer中的HTML5的兼容性问题
不可否认，微软IE9的HTML5支持是高于先前的版本的。但是仍然还有很多开发者在使用IE7和8（更悲剧是IE6）。 Remy Sharp的HTML5的启用脚本允许开发者在他们的网页上运用任何HTML5的元素。他是这样被放置在 <HEAD> 标签内的，可以这样引用：
1
2
3
4
5
|
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" ><!--[
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >if
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >lt IE 9]>
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" ><script src=
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >"
http://html5shim.googlecode.com/svn/trunk/html5.js"
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >></script>
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" ><![endif]-->
de>
|
Remy已经将脚本精缩了，所以下载额外的字节的数量是最少的， 如果用户不使用IE浏览器，也不会有一个额外的HTTP。 它是在谷歌代码服务器上被托管的，所以你不用担心被关闭服务器。 另外，你可以下载代码,并把它保存到自己的服务器 ，包含到自己的网页内。（您可能需要右键点击链接并选择“另存为保存文件，而不是查看）为什么不把这个应用到当前页面上？让所有的样式都可以正常工作在任何浏览器下。那是因为CMS不允许我们在<HEAD>标签中添加任何东西。
HTML5表格增强
Web开发人员已加强和调整网站上的表格。这涉及一些JavaScript的使用，如自动获取焦点（在一个特定的表单字段接收焦点加载页面时）和Placeholders （那里是说明性的文字，在文字型窗体域已经建立的影响，但是当用户点击内领域，文字消失）。运用HTML5的开发人员不再需要使用这些特殊的技术 - 在HTML5中，他们是作为规范的参数工作，以网页形式运行，非常地自然。
使用HTML5自动获取焦点
如果您使用的浏览器支持HTML5的话.你可能已经注意到了，这是它的使用范例：
在这一区域自动获取焦点：
这很简单，请注意跟HTML4唯一不同的代码就是一个词：自动焦点获取 。
1
|
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" ><
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >input
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >id
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >=
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >"example1"
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >name
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >=
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >"example1"
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >type
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >=
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >"text"
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >autofocus />
de>
|
在Placeholders中使用HTML5
往往当我们正在创建一个表单，甚至当这种表单是一个单一的领域时，我们都希望让用户知道他们有望进入的表单的信息类型。 然而，我们不希望他们有手动删除表单域文本，才可以进入自己的文字。 以前我们不得不使用JavaScript 才能这样做，但现在我们可以这样做的：
1
|
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" ><
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >input
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >id
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >=
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >"example2"
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >name
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >=
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >"example2"
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >type
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >=
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >"text"
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >placeholder
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >=
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >"suggestive text"
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >/>
de>
|
这里是它在运行中所呈现的样子，尝试一下：
用HTML5的contenteditable元素编辑表格内容
HTML5的另一个新功能是能够将访客编辑的内容放置在网页上，如果你使用支持HTML5的浏览器，你可以尝试这样编辑内容： 用你的鼠标选中文本，然后改变它。
我听到有关contenteditable元素最大的问题是：“我为什么要这么做？” 答案会落到HTML5的另一个功能——本地存储功能。通过将本地存储功能和contenteditable元素一起使用，开发人员可以使网站的访问者编辑列表项，段的内容，几乎任何文本它都可以保存到自己的电脑上。 这对游戏和应用程序都非常有益，并很有可能在不久的将来是非常，非常有用。下面就是使用contenteditable元素展示的代码：
1
|
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" ><
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >p
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >contenteditable
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >=
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >"true"
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >>Put your mouse cursor in this text and change it!</
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >p
de>
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" >>
de>
|
我不得不承认，不使用本地存储与contenteditable元素，我没有其他更好的方式去实现它。就因为这样，你就该使用HTML5，它会让你感到如此轻松。
使用HTML5的DOCTYPE声明
通过使用HTML5的DOCTYPE， 你让浏览器知道从您的文档读取什么。HTML4需要一个DOCTYPE引用的DTD（文档类型声明），并有三个不同的DTD可以使用。 HTML5并不需要这样的参考，它很简单只需这么做:
1
|
de style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #f6ffeb; border-style: dashed; border-color: #beec85; border-image: initial; vertical-align: baseline; background- initial; background-repeat: initial initial; border-width: 1px; padding: 0px; margin: 0px;" ><!DOCTYPE HTML>
de>
|
就是这样！你把它放置在HTML文件上方，HTML标签的前面。当您使用它的时候，你不会注意到有什么不同，但这标志着您已加入使用HTML5的行列，并准备采取新的挑战，功能及创新。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
