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值为字符串形式