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的行列,并准备采取新的挑战,功能及创新。