现代的浏览器都支持 HTML5。
此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为内联元素自动处理。
让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 :
block:header, section, footer, aside, nav, main, article, figure {
display: block;
}
HTML5的新的元素兼容:html5shiv.js 引用代码必须放在 <head> 元素中,因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。或者使用document.createElement解决。
设置元素为可拖放
首先,为了使元素可拖动,把 draggable 属性设置为 true :
<p draggable="true"></p>
<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<audio> 与</audio> 标签之间插入的内容是提供给不支持 audio元素的浏览器显示的。(video/audio用法类似)
<audio controls> <source src="lif.ogg" type="audio/ogg"> <source src="test.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio>
客户端存储数据的两个对象为:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 对象! // 一些代码..... } else { // 抱歉! 不支持 web 存储。 }
不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
1、保存数据:localStorage.setItem(key,value);
2、读取数据:localStorage.getItem(key);
3、删除单个数据:localStorage.removeItem(key);
4、删除所有数据:localStorage.clear();
5、得到某个索引的key:localStorage.key(index);
提示: 键/值对通常以字符串存储,你可以按自己的需要转换该格式。
localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。(不删除都在)
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。(关闭就不在)
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
1、离线浏览 - 用户可在应用离线时使用它们
2、速度 - 已缓存资源加载得更快
3、减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。