Html5(离线&存储，多媒体，Web Sockets,Web Workers,History API2D/3D绘图)

最新推荐文章于 2023-06-03 14:59:45 发布

Prince_fmx

最新推荐文章于 2023-06-03 14:59:45 发布

阅读量370

点赞数 1

本文链接：https://blog.csdn.net/Prince_fmx/article/details/78170945

版权

（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:
- 下面演示一种最简单的使用方式
- src:音频的地址
- controls:音频播放控制器
- autoplay:自动播放
- loop:循环
- poster:指定视频不播放时显示的封面

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:
- src:视频地址
- controls:控制器
- autoplay:自动播放
- loop:循环
- width:宽度
- height:高度

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/>不设置任何内容,显示效果如下图

progress.gif

作用:
- 用来显示任务的进度(进程)
- 如果想要用来显示度量值(比如容量使用情况)请使用meter标签
属性:
- max: 总工作量
- value: 已完成工作量
兼容性:
- 为了保证显示效果,可以再progress标签中写入内容,在当前浏览器无法显示该控件时,会转而显示内容

meter

外观:
- 通过属性值的搭配能够显示出多重不同的变化

常见属性:
- high:规定较高的值
- low:规定较低的值
- max:规定最大值(可以超过,但是进度条已经满了)
- min:规定最小值
- value:规定度量的值
示例代码:

 
      <!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> 
     

显示效果即截图

meter.png

总结

两种进度条都能够用来显示进度,由于兼容性以及语义性的问题,在实际开发中需要结合实际情况决定是否使用它们(或者是使用对应的前端框架)。

（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();将历史里最顶层的历史页替换成当前页

(5)绘图

Canvas目前只能2d绘图，但是通过2d绘图也能绘出3d的效果

详见：http://cssass.com/blog/2011/976.html

(6)新属性

属性	描述
contenteditable	规定元素内容是否可编辑。
contextmenu	规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-*	用于存储页面或应用程序的私有定制数据。
draggable	规定元素是否可拖动。
dropzone	规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden	规定元素仍未或不再相关。
spellcheck	规定是否对元素进行拼写和语法检查。
translate	规定是否应该翻译元素内容。

Prince_fmx

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5(离线&存储，多媒体，Web Sockets,Web Workers,History API2D/3D绘图)

（1）离线&存储Html5加入了应用程序缓存，意味着web应用可以进行缓存，并可在没有因特网连接时进行访问。目前主浏览器除了IE均支持应用程序缓存。启用应用程序缓存，在文档标签中包含manifest属性，如请注意，manifest文件需要配置正确的MIME-type，即“text/cache-manifest”。必须在web服务器上进行配置。有关Manifest文件，请
复制链接

扫一扫