SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让Canvas可享用到现有丰富的SVG素材，并不失SVG矢量无级缩放的特点。 《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果，但你也可以直接拖拽SVG格式的图片进行显示，只不过普通图片的格式数据为data:...
html5新增了在客户端存储数据的新方法：1.localStorage - 没有时间限制的数据存储；2.sessionStorage - 针对一个session的数据存储，当用户关闭浏览器窗口后，数据会被删除。浏览器支持程度注意到，IE8以及以上版本是支持localStorage和sessionStorage的，但是需要注意的是，IE8-IE10中是需要服务器或者localhost才能使用。使用方法localStorage和sessionStorage的使用方法是一致的，区别在于：localStorage方法存储的数据没有时间...
HTML5 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。localStorage 方法localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。<script type="text/javascript">localS...
1.html5介绍html5是基于html4之上的，功能更加完善更加强大，现在更多的浏览器都已经能够兼容html5许多新增功能。所有在html4的基础上我们需要完善对html5功能的了解和使用。1.1 新增语义标签在html4中，我们往往会使用div进行大盒子套小盒子的方法来进行页面布局，在做样式设置的时候会给div设置许多个className，并且className需要具有语义，设置的越多越容易会出现样式的错乱。所以在html5中，给我们新增了许多具有语义的标签，...
HTML5<article>元素用来定义页面文档的独立内容。实例：<article class="pageArticle"> <h2>article</h2> <header> <h2>article header</h2> </header> <aside> <h2>article aside</h2> </aside> <p>这个页面是我开始用html5进行布局的。</p> <footer>article footer</footer> </article> 元素' ref='nofollo...
原文：http://zhouhaitao.iteye.com/blog/2200450
一、Web Storage与cookies的比较 cookie：保存在浏览器端的信息，可以在有限期内持久化地存储少量的数据，但是也有一定的局限： 1.每一次HTTP请求都会发送cookie信息。这样一次又一次无意义地传输同样的数据，占用了用户带宽。 2.每一次HTTP请求中发送的cookie信息都以未加密的形式在因特网上传输，这样很不安全（除非整个Web应用都是基于SSL的）。 3.Cookie信息量最大不能超过4KB，这足以拖慢Web应用。但是Cookie默认...
定义和用法<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。注意：section 不是一个专用来做容器的标签，如果仅仅是用于设置样式或脚本处理，专用的是 divsection 里应该有 标题（h1~6），但文章中推荐用 article 来代替一条简单的准则是，只有元素内容会被列在文档大纲中时，才适合用section元素。section的作用是对页面上的内容进行分块，如各个有标题的版块、功能区或对文章进行分段，...
fillRect(100,100,100,100) 前2个100是指坐标，后2个100是指宽和高。 今天学习html5 的canvas，发现fillRect的坐标和大小一直不对，研究了半天，发现canvas的宽度和高度必须内联在canvas标签中才对。郁闷了半天。 错误的方式1: 复制代码代码如下:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #mycanvas{ width: 200px; height: 200px; background: yellow; } </style> </head...
在来自不同域名的页面间传递消息一般统称为跨文档消息传送，简称XDM。如，www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum域名中的页面通信。在XDM机制出现之前，要毫无压力地实现这种通信需要用很长时间。XDM把这种机制规范化，让咱们能够既稳妥又简单地实现跨文档通信。 XDM的核心是postMessage()方法。对于XDM而言，”另一个地方”指的是包含在当前页面中的iframe标签，或者有当前页面弹...
http://zccst.iteye.com/blog/2194344 HTML5本地存储的前身就是Cookie，HTML5的本地存储是使用localStorage对象将WEB数据持久化在本地。相比较而言HTML5本地存储中每个域的存储大小默认是5M，比起Cookie的4K要大的多。而且存储和读取数据的代码极为简练： Window.localStorage.setItem(key,value);//存储数据 Window.localStorage.getItem(key);//读取数据 Window.localStorage.removeItem(key);//删除数据项 Window.localStorage....
HTML5 创建canvas元素 复制代码代码如下:<!--<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。--> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset = utf-8"> <title>HTML5</title> <script type="text/javascript" charset = "utf-8"> <!--这个函数将在页面完全加载后调用--> function pageLoaded() { alert(‘HTML5 页面加载完毕!‘); } </script> </head> <body ...
读写方式data-*有两种设置方式，可以直接在HTML元素标签上书写<div id="test" data-age="24">Click Here</div>其中的data-age就是一种自定义属性，当然我们也可以通过JavaScript来对其进行操作，HTML5中元素都会有一个dataset的属性，这是一个DOMStringMap类型的键值对集合var test = document.getElementById(‘test‘);test.dataset.my = ‘Byron‘;这样就为div添加了一个data-my的自定义属性，使用JavaScript操作dataset有两个需...
HTML 5 Web Workersweb worker 是运行在后台的 JavaScript，不会影响页面的性能。什么是 Web Worker？当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。想了解更多可以学习JavaScript同步异步的运行机制。检测 Web Worker 支持在创建 web work...
前言 html5中对音频,视频播放原生支持.最近做了一个音乐播放器,得益于快过年了,才能抽出一点时间来总结一下.总的来说,html5对audio的支持非常强大, 难怪flash要死.浏览器上装播放插件的时代已经接近尾声了.目前大多数浏览器都支持了大部分常用的api,ie8及其以前除外(万恶的ie啊). HTML5 音频虽然很健壮，但有其局限性，这主要取决于它的实现。对于音乐播放器（点唱机播放器）或简单的声音效果，它很有效，但是对于声音密集的...