html5参考入门
2013-10-20 13:46:48 
阿炯
本文就HTML 5的使用做一个入门介绍，汲及它的最常见运用，10条总结经验。
1. HTML5 新的 DocType 和 Charset 是什么？
HTML5 现在已经不是 SGML 的子集，DocType 简化为：
<!doctype html>
HTML5 指定 UTF-8 编码的方式如下：
<meta charset="UTF-8">
2. 如何在 HTML5 页面中嵌入音频?
HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg：
<audio controls>
<source src="jamshed.mp3" type="audio/mpeg">
Your browser does'nt support audio embedding feature.
</audio>
3. 如何在 HTML5 页面中嵌入视频？
和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg：
<video width="450" height="340" controls>
<source src="jamshed.mp4" type="video/mp4">
Your browser does'nt support video embedding feature.
</video>
4.除了音频和视频，HTML5 还支持其他什么新的媒体元素？
HTML 5 对媒体支持很强，除了 audio 和 video 外，还提供：
<embed> 作为外部应用的容器
<track> 定义媒体的文本跟踪
<source> 对多种媒体源的支持很有帮助
5.为什么使用HTML 5画布元素?
<canvas>是在HTML5这我们可以用来帮助绘制图形的脚本组件(这是最可能的JavaScript)。
这个组件元素的行为像一个窗口中，可以通过脚本可为图形和其他组件所使用。我们可以像画布，图表和一点动画等使用<canvas>元素。
<canvas id="canvas1" width="300" height="100"></canvas>
6. HTML5 有哪些不同类型的存储？
HTML 5 支持本地存储，在之前版本中是通过 Cookie 实现的。HTML5 本地存储速度快而且安全。
有两种不同的对象可用来存储数据：
localStorage 适用于长期存储数据，浏览器关闭后数据不丢失
sessionStorage 存储的数据在浏览器关闭后自动删除
7. HTML5 引入什么新的表单属性？
HTML5 引入大量新的表达属性：
datalist
datetime
output
keygen
date
month
week
time
number
range
email
url
8. 与 HTML4 比较，HTML5 废弃了哪些元素？
废弃的元素包括：
frame
frameset
noframe
applet
big
center
basefront
9. HTML5 标准提供了哪些新的 API？
HTML 5 提供很多新的 API，包括：
Media API
Text Track API
Application Cache API
User Interaction
Data Transfer API
Command API
Constraint Validation API
History API
10. HTML5 应用缓存和常规的 HTML 浏览器缓存有何差别？
HTML5 的应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括 HTML、CSS、图像和 JavaScript 脚本并存在本地。该特性加速了网站的性能，可通过如下方式实现：
<!doctype html>
<html manifest="example.appcache">
.....
</html>
与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。
html5 中的 Web Storage 包括了两种存储方式：sessionStorage 和 localStorage。
sessionStorage 用于本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面才能访问，会话结束后数据也随之销毁。localStorage 用于存储一个域名下的需要永久存在本地的数据，这些数据可以被一直访问，直到这些数据被删除。因此sessionStorage 和 localStorage 的主要区别在于他们存储数据的生命周期，sessionStorage 存储的数据的生命周期是一个会话，而 localStorage 存储的数据的生命周期是永久，直到被主动删除，否则数据永远不会过期的。
localStorage 和 sessionStorage 有着统一的API接口，这为二者的操作提供了极大的便利。下面以 localStorage 为例来介绍一下 API 接口使用方法，同样这些接口也适用于 sessionStorage。
添加键值对
localStorage.setItem(key, value)，setItem 用于把值 value 存储到键key上，除了使用 setItem ，还可以使用 localStorage.key = value 或者 localStorage['key'] = value 这两种形式。另外需要注意的是，key和value值必须是字符串形式的，如果不是字符串，会调用它们相应的toString()方法来转换成字符串再存储。当我们要存储对象是，应先转换成我们可识别的字符串格式（比如JSON格式）再进行存储。
// 把一个用户名(lilei)存储到 name 的键上
localStorage.setItem('name', 'lilei');
// localStorage.name = 'lilei';
// localStorage['name'] = 'lilei';
// 把一个用户存储到user的键上
localStorage.setItem('user', JSON.stringify(id:1, name:'lilei'));
获取键值
localStorage.getItem(key)，getItem 用于获取键 key 对应的数据，和 setItem 一样，getItem 也有两种等效形式 value = localStorage.key和 value = localStorage['key'] 。获取到的 value 值是字符串类型，如果需要其他类型，要做手动的类型转换。
// 获取存储到 name 的键上的值
var name = localStorage.getItem('name');
// var name = localStorage.name;
// var name = localStorage['name'];
// 获取存储到user的键上的值
var user = JSON.parse(localStorage.getItem('user'));
删除键值对
localStorage.removeItem(key)，removeItem 用于删除指定键的项，localStorage 没有数据过期的概念，所有数据如果失效了，需要开发者手动删除。
var name = localStorage.getItem('name'); // 'lilei'
// 删除存储到 name 的键上的值
localStorage.removeItem('name');
name = localStorage.getItem('name'); // null
清除所有键值对
localStorage.clear()，clear 用于删除所有存储的内容，它和removeItem不同的地方是removeItem 删除的是某一项，而clear是删除所有。
// 清除 localStorage
localStorage.clear();
var len = localStorage.length; // 0
获取 localStorage 的属性名称(键名称)
localStorage.key(index)，key 方法用于获取指定索引的键名称。需要注意的是赋值早的键值对应的索引值大，赋值完的键值对应的索引小，key方法可用于遍历 localStorage 存储的键值。
localStorage.setItem('name','lilei');
var key = localStorage.key(0); // 'name'
localStorage.setItem('age', 10);
key = localStorage.key(0); // 'age'
key = localStorage.key(1); // 'name'
获取 localStorage 中保存的键值对的数量
localStorage.length，length 属性用于获取 localStorage 中键值对的数量。
localStorage.setItem('name','lilei');
var len = localStorage.len; // 1
localStorage.setItem('age', 10);
len = localStorage.len; // 2
1. HTML5 新的 DocType 和 Charset 是什么？
HTML5 现在已经不是 SGML 的子集，DocType 简化为：
<!doctype html>
HTML5 指定 UTF-8 编码的方式如下：
<meta charset="UTF-8">
2. 如何在 HTML5 页面中嵌入音频?
HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg：
<audio controls>
<source src="jamshed.mp3" type="audio/mpeg">
Your browser does'nt support audio embedding feature.
</audio>
3. 如何在 HTML5 页面中嵌入视频？
和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg：
<video width="450" height="340" controls>
<source src="jamshed.mp4" type="video/mp4">
Your browser does'nt support video embedding feature.
</video>
4.除了音频和视频，HTML5 还支持其他什么新的媒体元素？
HTML 5 对媒体支持很强，除了 audio 和 video 外，还提供：
<embed> 作为外部应用的容器
<track> 定义媒体的文本跟踪
<source> 对多种媒体源的支持很有帮助
5.为什么使用HTML 5画布元素?
<canvas>是在HTML5这我们可以用来帮助绘制图形的脚本组件(这是最可能的JavaScript)。
这个组件元素的行为像一个窗口中，可以通过脚本可为图形和其他组件所使用。我们可以像画布，图表和一点动画等使用<canvas>元素。
<canvas id="canvas1" width="300" height="100"></canvas>
6. HTML5 有哪些不同类型的存储？
HTML 5 支持本地存储，在之前版本中是通过 Cookie 实现的。HTML5 本地存储速度快而且安全。
有两种不同的对象可用来存储数据：
localStorage 适用于长期存储数据，浏览器关闭后数据不丢失
sessionStorage 存储的数据在浏览器关闭后自动删除
7. HTML5 引入什么新的表单属性？
HTML5 引入大量新的表达属性：
datalist
datetime
output
keygen
date
month
week
time
number
range
url
8. 与 HTML4 比较，HTML5 废弃了哪些元素？
废弃的元素包括：
frame
frameset
noframe
applet
big
center
basefront
9. HTML5 标准提供了哪些新的 API？
HTML 5 提供很多新的 API，包括：
Media API
Text Track API
Application Cache API
User Interaction
Data Transfer API
Command API
Constraint Validation API
History API
10. HTML5 应用缓存和常规的 HTML 浏览器缓存有何差别？
HTML5 的应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括 HTML、CSS、图像和 JavaScript 脚本并存在本地。该特性加速了网站的性能，可通过如下方式实现：
<!doctype html>
<html manifest="example.appcache">
.....
</html>
与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。
html5 中的 Web Storage 包括了两种存储方式：sessionStorage 和 localStorage。
sessionStorage 用于本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面才能访问，会话结束后数据也随之销毁。localStorage 用于存储一个域名下的需要永久存在本地的数据，这些数据可以被一直访问，直到这些数据被删除。因此sessionStorage 和 localStorage 的主要区别在于他们存储数据的生命周期，sessionStorage 存储的数据的生命周期是一个会话，而 localStorage 存储的数据的生命周期是永久，直到被主动删除，否则数据永远不会过期的。
localStorage 和 sessionStorage 有着统一的API接口，这为二者的操作提供了极大的便利。下面以 localStorage 为例来介绍一下 API 接口使用方法，同样这些接口也适用于 sessionStorage。
添加键值对
localStorage.setItem(key, value)，setItem 用于把值 value 存储到键key上，除了使用 setItem ，还可以使用 localStorage.key = value 或者 localStorage['key'] = value 这两种形式。另外需要注意的是，key和value值必须是字符串形式的，如果不是字符串，会调用它们相应的toString()方法来转换成字符串再存储。当我们要存储对象是，应先转换成我们可识别的字符串格式（比如JSON格式）再进行存储。
// 把一个用户名(lilei)存储到 name 的键上
localStorage.setItem('name', 'lilei');
// localStorage.name = 'lilei';
// localStorage['name'] = 'lilei';
// 把一个用户存储到user的键上
localStorage.setItem('user', JSON.stringify(id:1, name:'lilei'));
获取键值
localStorage.getItem(key)，getItem 用于获取键 key 对应的数据，和 setItem 一样，getItem 也有两种等效形式 value = localStorage.key和 value = localStorage['key'] 。获取到的 value 值是字符串类型，如果需要其他类型，要做手动的类型转换。
// 获取存储到 name 的键上的值
var name = localStorage.getItem('name');
// var name = localStorage.name;
// var name = localStorage['name'];
// 获取存储到user的键上的值
var user = JSON.parse(localStorage.getItem('user'));
删除键值对
localStorage.removeItem(key)，removeItem 用于删除指定键的项，localStorage 没有数据过期的概念，所有数据如果失效了，需要开发者手动删除。
var name = localStorage.getItem('name'); // 'lilei'
// 删除存储到 name 的键上的值
localStorage.removeItem('name');
name = localStorage.getItem('name'); // null
清除所有键值对
localStorage.clear()，clear 用于删除所有存储的内容，它和removeItem不同的地方是removeItem 删除的是某一项，而clear是删除所有。
// 清除 localStorage
localStorage.clear();
var len = localStorage.length; // 0
获取 localStorage 的属性名称(键名称)
localStorage.key(index)，key 方法用于获取指定索引的键名称。需要注意的是赋值早的键值对应的索引值大，赋值完的键值对应的索引小，key方法可用于遍历 localStorage 存储的键值。
localStorage.setItem('name','lilei');
var key = localStorage.key(0); // 'name'
localStorage.setItem('age', 10);
key = localStorage.key(0); // 'age'
key = localStorage.key(1); // 'name'
获取 localStorage 中保存的键值对的数量
localStorage.length，length 属性用于获取 localStorage 中键值对的数量。
localStorage.setItem('name','lilei');
var len = localStorage.len; // 1
localStorage.setItem('age', 10);
len = localStorage.len; // 2