(1) 离线&存储
Html5加入了应用程序缓存,意味着web应用可以进行缓存,并可在没有因特网连接时进行访问。目前主浏览器除了IE均支持应用程序缓存。
启用应用程序缓存,在文档<html>标签中包含manifest属性,
如<html manifest=”demo.appache”>
请注意,manifest文件需要配置正确的MIME-type,即“text/cache-manifest”。必须在web服务器上进行配置。
有关Manifest文件,请参考链接:
http://www.w3school.com.cn/html5/html_5_app_cache.asp
(2)存储
H5提供了两种在客户端存储数据的新方法
LocalStorage-没有时间限制的数据存储
SessionStrorage-针对一个session的数据存储;
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
localStorage.lastname="Smith";
document.write(localStorage.lastname
);
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname
);
(3) 多媒体
Audio(音频),video(视频),progress(进度条),meter(条状图,类似进度条)
-
-
虽然
html5
中的多媒体标签有各种不好,但我们还是需要拥抱这项新的技术,因为他的用法,真的十分简单
-
audio标签
在w3c中对于
audio
的说明是这样的audio标签
1
2
|
<audio src=
"song.ogg"
controls=
"controls"
autoplay loop>
</audio>
|
-
示例代码2:
-
src:音频的地址
-
由于音频格式在不同浏览器中支持情况不同,考虑兼容性问题,我们需要使用下述代码
-
source:指定多个音频,如果找到了当前浏览器支持的,那么会直接使用,如果所有的
source
标签格式都不支持,会显示最后的文本内容
-
1
2
3
4
5
|
<audio controls=
"controls"
>
<source src=
"song.ogg"
type=
"audio/ogg"
>
<source src=
"song.mp3"
type=
"audio/mpeg"
>
你的浏览器不支持此种格式
</audio>
|
Video标签
Video
标签用来播放视频,用法跟audio
标签十分类似
1
2
|
<video src=
"movie.ogg"
controls autoplay loop width =
"200px"
height =
"200px"
>
</video>
|
-
示例代码2:
-
src:视频的地址
-
由于视频在不同浏览器中支持情况不同,考虑兼容性问题,我们需要使用下述代码
-
source:指定多个视频,如果找到了当前浏览器支持的,那么会直接使用,如果所有的
source
标签格式都不支持,会显示最后的文本内容
-
1
2
3
4
5
|
<video width=
"320"
height=
"240"
controls=
"controls"
>
<source src=
"movie.ogg"
type=
"video/ogg"
>
<source src=
"movie.mp4"
type=
"video/mp4"
>
你的浏览器不支持video标签
</video>
|
两种进度条
在html5之前如果我们想要使用进度条,可以通过一些前端框架,或者自己使用控件搭建出类似的外观,但是在html5中推出了两个进度条控件,接下来就让我们来看看如何使用它们
process
-
外观
-
如果只是定义该元素
<progress><progress/>
不设置任何内容,显示效果如下图
-
-
作用:
-
用来显示任务的进度(进程)
-
如果想要用来显示
度量值
(比如容量使用情况)请使用meter
标签
-
-
属性:
-
max: 总工作量
-
value: 已完成工作量
-
-
兼容性:
-
为了保证显示效果,可以再
progress
标签中写入内容,在当前浏览器无法显示该控件时,会转而显示内容
-
meter
-
外观:
-
通过属性值的搭配能够显示出多重不同的变化
-
-
常见属性:
-
high:规定较高的值
-
low:规定较低的值
-
max:规定最大值(可以超过,但是进度条已经满了)
-
min:规定最小值
-
value:规定度量的值
-
-
示例代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
</head>
<body>
<meter
class
=
"class1"
high=
"80"
low=
"30"
max=
"100"
min=
"10"
value=
"21"
></meter>
<br/>
<meter
class
=
"class2"
high=
"80"
low=
"30"
max=
"100"
min=
"10"
value=
"60"
></meter>
<br/>
<meter
class
=
"class3"
high=
"80"
low=
"30"
max=
"100"
min=
"10"
value=
"90"
></meter>
<br/>
<meter
class
=
"class4"
high=
"80"
low=
"30"
max=
"100"
min=
"10"
value=
"100"
optimum=
"10"
></meter>
<br/>
</body>
</html>
|
-
显示效果即截图
总结
两种进度条都能够用来显示进度,由于兼容性以及语义性的问题,在实际开发中需要
结合实际情况
决定是否使用它们(或者是使用对应的前端框架)。
(3) web sockets
WebSocket是HTML5开始提供的一种在单个TCP 连接上进行全双工通讯的协议web workers;
长久以来,创建实现客户端和用户端之间双工通讯的web app都会造成HTTP轮询的滥用: 客户端向主机不断发送不同的HTTP呼叫来进行询问。
实现原理
在实现websocket连线过程中,需要通过浏览器发出websocket连线请求,然后服务器发出回应,这个过程通常称为“握手” 。在 WebSocket API,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中,为我们实现即时服务带来了两大好处:
1. Header
互相沟通的Header是很小的-大概只有 2 Bytes
2. Server Push
服务器的推送,服务器不再被动的接收到浏览器的请求之后才返回数据,而是在有新数据时就主动推送给浏览器。
详见链接:http://write.blog.csdn.net/postedit/78064799
(4) history
//单纯从历史中前进一页
History.forword();
//单纯从历史中后退一页
History.back();
//从历史中前进一页或者后退一页,如果数据发生变化那么页面内容也随之改变
History.go(1|-1);
Html5中提供了两个新方法:1、history.pushState(); 往历史里增加当前页
2、history.replaceState();将历史里最顶层的历史页替换成当前页
Canvas目前只能2d绘图,但是通过2d绘图也能绘出3d的效果
详见:http://cssass.com/blog/2011/976.html
(6)新属性
属性 | 描述 |
规定元素内容是否可编辑。 | |
规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 | |
用于存储页面或应用程序的私有定制数据。 | |
规定元素是否可拖动。 | |
规定在拖动被拖动数据时是否进行复制、移动或链接。 | |
规定元素仍未或不再相关。 | |
规定是否对元素进行拼写和语法检查。 | |
规定是否应该翻译元素内容。 |