1.H5新元素兼容问题
a.旧版本的浏览器正确显示这些元素,可以设置 CSS 的 display 属性值为 block
b.
以上代码是一个注释,作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件,并解析它。
注意:国内用户请使用百度静态资源库(Google 资源库在国内不稳定):
html5shiv.js 引用代码必须放在 <head> 元素中,因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。
2.H5定了新的元素
a.新元素
canvas:基于javascript的绘图api,定义图形,图表和其他图像
b.新媒体元素
audio:定义音频内容
video:定义视频内容
source:定义多媒体资源video和audio
embed:定义嵌入的内容如插件 <embed src="helloworld.swf">(被嵌入的flash动画)
track:为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。例如中英文切换
c.新表单元素
datalist:与input配合使用,为input添加可选的下拉选项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值为字符串形式