摘要：
Web SQL数据库API实际上未包含在HTML 5规范之中，它是一个独立的规范，它引入了一套使用SQL操作客户端数据库的API。假设你是一名优秀的Web开发人员，那毫无疑问，你对SQL和数据库的相关概念已经很熟悉了，如果你对SQL不熟悉，那在继续阅读本文之前，最好先学习一下SQL相关的教程。最新版本的Chrome，Safari和Opera浏览器都支持Web SQL数据库。核心方法本文将介绍规范中定义的三个核心方法：1、openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。2、transaction：这个方法允许我们根据情况控制事务提交或回滚。3、executeSql： 阅读全文
摘要：
Cache Manifest是HTML 5的一种缓存机制，文章作者直接用博客当测试环境，虽然应用起来非常简单，但效果却出奇的好。缓存后的速度，简直是惊人的快。像Yslow显示，打开一个缓存过的页面，只要0.729秒，比不缓存的差不多快了10倍。一、Cache Manifest基础知识作为一个Web开发相关的人员，都不会少听到、看到Cache这个词。是的，上面也已经说了，它是一种缓存的机制。它可以通过一个.manifest文件来配置需要缓存的或者一定要保持联网缓存的文件。而重点就是这个.manifest文件，这里进行了简单的整理：◆MIME TYPE：text/cache-manifest◆需要 阅读全文
摘要：
22个HTML5 技巧二：上面一章讲到了HTML5的几个技巧，现在我们来学习新的技巧。8. 占位符此前，我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适，但是只要用户删除了该文本，输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。<input name=”email” type=”email” placeholder=”xingyuyu27@163.com” />9. 本地存储多亏了HTML5的 local storage ，我们可以让高级浏览器"记住"我们输入的内容，就算后来浏览器关闭或者重新刷新也不受影响。尽管不 阅读全文
摘要：
22个HTML5 技巧三：我们继续讲解HTML5的技巧。16. 视频支持音频元素 <audio>非常像，在新的浏览器上也支持HTML5视频。事实上，就在最近YouTube宣布了一项新的 HTML5视频嵌入。可惜的是，由于HTML5说明文件并没有为视频指出某个特定的编码器，所以都主要取决于浏览器来决定了。尽管Safari和IE9可以支持H.264 格式的视频，Firefox 和Opera却仍然坚持Theora 和Vorbis格式。因此，显示HTML5视频的时候，你必须提供两种格式。17. 视频预先加载你首先需要决定是否需要浏览器来预先加载视频。是否有需要？假设，一个访客进入某个专门用 阅读全文
摘要：
这个示例的目的是向你展示如何使用HTML5和jQuery创建一个灰度/彩色图像的鼠标悬浮效果。在HTML5出现前，实现这个效果需要两幅图像，彩色的和灰度的版本。现在HTML5让创建这个效果更加容易和高效，因为灰色图像将会直接从原始文件生成。我希望你会发现这个脚本在例如陈列橱或者相片册的设计里相当有用。 下面的jQuery代码会找寻目标图像并生成一个灰度的版本。当鼠标悬浮在图像上，代码将会把灰度图像渐变为彩色的。<mce:scriptsrc="jquery.min.js"mce_src="jquery.min.js"type="text/j 阅读全文
摘要：
HTML5 技巧一：当今科技发展的速度真惊人，稍不留神，就可能无法跟上它的步伐。新一代的HTML-HTML5的发展也不停的带给我们新的惊喜，我们将通过这篇文章向大家介绍一些HTML技巧。1. 新的文档类型（Doctype）<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>上面这个既麻烦又难记的XHTML文档类型你还在使用吗？ 如果还是这样的话，现在该切换到新的HTML5文档类型了。<!DO 阅读全文
摘要：
HTML5 canvas 元素详细教程六：组合。之前的例子里面，我们总是将一个图形画在另一个之上，大多数情况下，这样是不够的。比如说，它这样受制于图形的绘制顺序。不过，我们可以利用globalCompositeOperation属性来改变这些做法。globalCompositeOperation我们不仅可以在已有图形后面再画新图形，还可以用来遮盖，清除（比clearRect方法强劲得多）某些区域。globalCompositeOperation= typetype是下面 12 种字符串值之一：注意：下面所有例子中，蓝色方块是先绘制的，即“已有的 canvas 内容”，红色圆形是后面绘制，即“新 阅读全文
摘要：
HTML5 canvas 元素详细教程七：基本的动画。由于我们是用脚本去操控 canvas 对象，这样要实现一些交互动画也是相当容易的。只不过，canvas 从来都不是专门为动画而设计的（不像 Flash），难免会有些限制。可能最大的限制就是图像一旦绘制出来，它就是一直保持那样了。如果需要移动它，我们不得不对所有东西（包括之前的）进行重绘。重绘是相当费时的，而且性能很依赖于电脑的速度。基本动画的步骤 Basic animation steps画一帧，你需要以下一些步骤：清空 canvas除非接下来要画的内容会完全充满 canvas （例如背景图），否则你需要清空所有。最简单的做法就是用clea 阅读全文
摘要：
HTML5 canvas 元素详细教程五：上一节讲了应用风格和颜色，这一节我们讲canvas的变形。状态的保存和恢复 Saving and restoring state在了解变形之前，我先介绍一下两个你一旦开始绘制复杂图形就必不可少的方法。save()restore()save和restore方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。Canvas 状态是以堆(stack)的方式保存的，每一次调用save方法，当前的状态就会被推入堆中保存起来。这种状态包括：当前应用的变形（即移动，旋转和缩放，见下）strokeSty 阅读全文
摘要：
JS让浏览器支持HTML5 用JS脚本，让你的网站兼容IE浏览器。HTML5 SHIV的调用和下载html5.js一定要加在<head></head>里调用 (因为浏览器必须先解释了这个脚本才能解析后面的html5标签，所以不能放在页面底部）下面是下载地址:http://html5shiv.googlecode.com/svn/trunk/html5.js你可以直接调用这个js脚本，用IE条件注释来调用这个js文件，这样像FireFox等非IE浏览器就会忽视这段代码，也就不会有无谓的http请求了。下面这段代码仅会在IE浏览器下运行:复制内容到剪贴板<!--[if 阅读全文