Q13：HTML5中Canvas、WebWorkers、Storage三者出现的意义？使用方式（使用代码展示）？优点？
Canvas为了客户端矢量图形而设计，自己没有行为，但却把一个绘图API展现给客户端JavaScript以使脚本能够把想绘制的东西都绘制在一块画布上；
使用：大多数canvas绘图API都没有定义在<canvas>元素本身上，而是定义在通过画布的getConText（）方法获得的一个绘图环境对象上；canvas也使用了路径的表示法，但是路径有一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用beginPath（）和arc（）方法；一旦定义了路径，其他的方法如fill（），都是对此路径操作，绘图环境的各种属性，比如fillstyle，说明了这些操作如何使用；
代码：
优点：动态创建图形图像，图形是在一个特定的上下文中创建的，而上下文对象目前有两种：2D上下文，可移植性原始的绘图操作：设置填充，描边颜色和模式；绘制矩形；绘制路径；绘制文本；创建渐变和模式；3D上下文，即WebGL（从OpenGL ES2.0移植到浏览器中，OpenGL ES2.0是游戏开发人员在创建计算机图形图像时经常使用的一种语言）上下文，支持比2D上下文更丰富的更强大的图形图像处理能力：用GLSL（OpenGL Shading Language ，OpenGL着色语言）编写的顶点和片段着色器；支持类型化数组，既能够将数组中的数据限定为某种特定的数值类型；创建和操作纹理。（2D上下文浏览器基本都支持，WebGLobal目前只有Firefox 4+和Chrome支持）
Web Workers:当在HTML页面中执行脚本时，页面的状态是不可相应的，直到脚本已经完成；Web workers是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能，可以继续做任何愿意做的事情，点击 选取内容等等，而此时web workers在后台进行。
代码：
优点：作为在后台运行的JavaScript脚本 ，不会影响页面的性能。
Storage：可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大得多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB。
Web Storage 分为两种：session Storage和local storage；
保存数据：localStorage.setItem(key,value)
读取数据：localStorage.getItem(key)
删除单个数据：localStorage.removeItem(key)；
删除所有数据：localStorage.clear()
得到某个索引的key：localStorage.key(index)
示例代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Web Storage</title>
</head>
<body>
<div style = "border:2px dashed #ccc;width:320px;text-align:center">
<label for = "user_name">姓名：</label>
<input type = "text" id = "user_name" name = "user_name" class = "text" />
<br />
<label for = "mobilephone">手机：</label>
<input type = "text" id = "mobilephone" name = "mobilephone" />
<br />
<input type = "button" onclick = "save()" value = "新增记录" />
<hr />
<label for = "search_phone">输入手机号：</label>、
<input type = "text" id = "search_phone" name = "search_phone" />
<input type = "button" onclick = "find()" value = "查找机主" />
<p id = "find_result"><br /></p>
</div>
<br />
<div id = "list">
</div>
</body>
<script>
//保存数据
function save(){
var mobilephone = document.getElementById("mobilephone").value;
var user_name = document.getElementById("user_name").value;
localStorage.setItem(mobilephone,user_name);
}
//查找机主
function find(){
var search_phone = document.getElementById("search_phone").value;
var name = localStorage.getItem(search_phone);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_phone + "的机主是：" + name;
}
//将所有存储在localStorage中的对象提取出来，并展现到界面上
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length > 0){
var result = "<table border = ‘1‘>";
result += "<tr><td>姓名</td><td>手机号码</td></tr>"
for(var i = 0;i < localStorage.length;i ++){
var mobilephone = localStorage.key(i);
var name = localStorage.getItem(mobilephone);
result += "<tr><td>" + name + "</td><td>" + mobilephone +"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "目前数据为空，赶紧加入联系人吧";
}
}
</script>
</html>
Q14：HTML5为什么适合做移动端？目前移动端框架有哪些？
Html5 可以直接在网页上调试和修改，在移动设备上支持媒体，引进新功能可以真正改变用户跟文档的交互方式。（新的解析规则增强了灵活性，新属性，淘汰过时的冗余的属性，一个html5文档到另一个文档间的拖放功能，离线编辑，信息传递增强，详细的解析规则，多用互联网邮件扩展和协议处理程序注册，在SQL数据库中存储数据的通用标准、。。。）
目前移动端框架：PhoneGap（开源开发框架，使用html，css，和JavaScript来构建跨平台的移动应用程序）、Sencha Touch（让Web APP看起来像Native App，美丽的用户界面组件个丰富的数据管理全部基于最新的HTML5和css3的web标准全面兼容Android和iOS设备，是开发者最常用的UI工具箱）、Media Queries（提供了一种基于不同的平台写css的技术，能很快让网站兼容移动设备，保证产品实现最快的跨平台的兼容性和多平台的可用性。）、Zepto.js（专为mobile webkit浏览器而开发的JavaScript框架开发理念是简约，帮助开发人员简单快速的完成开发 交付任务，超轻量级，语法借鉴且兼容jQuery）、bootstrap（Twitter推出的开源的用于前端开发的工具包，是一个css/html框架，提供了优雅的HTML和css规范，由动态css语言less写成，与css框架blueprint存在很多相似之处，2.0版本添加响应式布局，更新了一些进度拦及可定制的图片缩略图，增加了一些新样式，非常轻量级的框架）、SeaJs（遵循CMD规范的模块加载框架，可以加载任意JavaScript模块和css模块，SeaJs很小巧，两个核心：模块的定义以及加载）、MEtro UI（自成体系，也可以与其他框架一起用，使用less创建，拥有网络系统，排版样式，表格 按钮 和 图片也拥有内建的JavaScript组件，生成片状，菜单，边栏，进度条和提示）、Hype（可以在网页上做出悦目的动画效果，无需Flash插件，是第一个可用的创作HTML5产品的可视化工具，HTML5的应用程序更加倾向于工具生成）、IScroll（使用原生JavaScript编写的一个模拟滚动效果的小类库）
原文：http://www.cnblogs.com/Decmber/p/4741003.html