HTML5 新元素总结
1.H5新元素兼容问题
a.旧版本的浏览器正确显示这些元素，可以设置 CSS 的 display 属性值为 block
b.
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。
注意：国内用户请使用百度静态资源库（Google 资源库在国内不稳定）：
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。
2.H5定了新的元素
a.新元素
canvas：基于javascript的绘图api，定义图形，图表和其他图像
b.新媒体元素
audio：定义音频内容
video：定义视频内容
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
source：定义多媒体资源video和audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
embed：定义嵌入的内容如插件 <embed src="helloworld.swf">（被嵌入的flash动画）
track:为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。例如中英文切换
<video width="320" height="240" controls> <source src="forrest_gump.mp4" type="video/mp4"> <source src="forrest_gump.ogg" type="video/ogg"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> </video>
c.新表单元素
datalist：与input配合使用，为input添加可选的下拉选项datalist中描述了其可能的值
<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
3.web存储
localStorage：没有时间限制的数据存储
sessionStorage：针对一个对话的数据存储
使用前应该先检测浏览器是否支持：
if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 对象! // 一些代码..... } else { // 抱歉! 不支持 web 存储。 }
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
注意：key值为字符串形式
