首页 web前端 H5教程 html5整理

html5整理

Dec 05, 2016 am 10:57 AM
html5

HTML5新的Input类型 
输入类型:color,data,datetime,datetime-local,email,month,number,range,search,tel,time,url,week 
HTML Web存储 localStorage 
没有时间限制的数据存储 
以键/值对的形式表示 
setItem(),getItem() 
localStorage.name="Smith"; 
sessionStorage 
当用户关闭浏览器窗口时,数据会被删除 
以键/值对的形式表示 
setItem(),getItem() 
sessionStorage.setItem('name','smith'); 
Web SQL数据库(略) 
核心方法: 
openDatabase 使用现有的数据库或新建的数据库创建一个数据库对象 
transaction 这个方法使我们能够控制一个事务,以及基于这种情况执行提交或者回滚 
executeSql 这个方法用于执行实际的SQL查询 
一个完整实例 
 
 
 
 
 
 

状态信息
 
 
 
复制代码 
应用程序缓存(略) 
如需启用应用程序缓存,请在文档的标签中包含manifest属性: 
 
 
... 
 
复制代码 
Manifest文件 
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存 
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面) 
完整的Manifest文件实例 
CACHE MANIFEST 
# 2012-02-21 v1.0.0 
/theme.css 
/logo.gif 
/main.js 
NETWORK: 
login.php 
FALLBACK: 
/html/ /offline.html 
复制代码 
Web Workers 
web worker是运行在后台的javascript,独立于其他脚本,不会影响页面的性能 
function startWorker(){ 
if(typeof(Worker) != "undefined"){ 
if(typeof(w) == "undefined"){ 
w=new Worker('demo_worker.js'); 

w.onmessage=function(event){ 
document.getElementById('result').innerHTML=event.data; 
}; 


function stopWorker(){ 
w.terminate(); 
w = undefined; 

复制代码 
/*demo_worker.js*/ 
var i=0; 
function timedCount(){ 
i=i+1; 
postMessage(i); 
setTimeout('timedCount()',500); 

timedCount(); 
复制代码 
服务器发送事件(SSE) 
Server-Sent 事件指的是网页自动获取来自服务器的更新。 
WebSocket 
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 
在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。 
当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。 
var Socket = new WebSocket(url, [protocal]) 
WebSocket属性 
Socket.readyState 
0 - 表示连接尚未建立 
1 - 表示连接已建立,可以进行通信 
2 - 表示连接正在进行关闭 
3 - 表示连接已经关闭或者连接不能打开 
WebSocket事件 
Socket.onopen - 连接建立时触发 
Socket.onmessage - 客户端接收服务端数据时触发 
Socket.onerror - 通信发生错误时触发 
Socket.onclose - 连接关闭时触发 
WebSocket方法 
Socket.send() 
Socket.close() 

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 表格边框指南。在这里,我们以 HTML 中的表格边框为例,讨论定义表格边框的多种方法。

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距指南。在这里,我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符指南。在这里,我们讨论 HTML 输入占位符的示例以及代码和输出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

在 HTML 中移动文本 在 HTML 中移动文本 Sep 04, 2024 pm 04:45 PM

HTML 中的文本移动指南。在这里我们讨论一下marquee标签如何使用语法和实现示例。

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

See all articles