首页 > 其他分享 >【整理】html5知识点4

【整理】html5知识点4

时间:2023-05-22 13:37:07浏览次数:50  
标签:知识点 缓存 浏览器 文件 manifest html5 整理 document HTML5


1、==================================================================HTML5 语义元素
HTML5中新的语义元素
许多现有网站都包含以下HTML代码: <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部.
HTML5提供了新的语义元素来明确一个Web页面的不同部分:
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>


解释图片:http://www.runoob.com/html/html5-semantic-elements.html


2、==================================================================HTML5 Web 存储
HTML5 web 存储,一个比cookie更好的本地存储方式。


什么是 HTML5 Web 存储?
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。


localStorage 和 sessionStorage 
There are two new objects for storing data on the client:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储


【localStorage 对象存储的数据没有时间限制】。第二天、第二周或下一年之后,数据依然可用。
【localStorage demo1】

<!DOCTYPE html>

 <html>

 <body>

 <div id="result"></div>

 <script>

 if(typeof(Storage)!=="undefined")

   {

   localStorage.lastname="Smith";

   document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;

   }

 else

   {

   document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";

   }

 </script>

 </body>

 </html>



 【localStorage demo2】

 <!DOCTYPE html>

 <html>

 <head>

 <script>

 function clickCounter()

 {

 if(typeof(Storage)!=="undefined")

   {

   if (localStorage.clickcount)

     {

     localStorage.clickcount=Number(localStorage.clickcount)+1;

     }

   else

     {

     localStorage.clickcount=1;

     }

   document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

   }

 else

   {

   document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";

   }

 }

 </script>

 </head>

 <body>

 <p><button οnclick="clickCounter()" type="button">Click me!</button></p>

 <div id="result"></div>

 <p>Click the button to see the counter increase.</p>

 <p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>

 </body>

 </html>



【sessionStorage 对象】
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。


localStorage和sessionStorage 区别在于 关闭浏览器程序 前者保存的内容不会删除 后者会删除


3、==================================================================HTML5 Web SQL 数据库
Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。
如果你是一个 Web 后端程序员,应该很容易理解 SQL 的操作。
Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。


核心方法
以下是规范中定义的三个核心方法:
openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
executeSql:这个方法用于执行实际的 SQL 查询。


打开数据库
我们可以使用 openDatabase() 方法来打开已存在的数据库,如果数据库不存在,则会创建一个新的数据库,使用代码如下:


var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);


openDatabase() 方法对应的五个参数说明:
数据库名称
版本号
描述文本
数据库大小
创建回调
第五个参数,创建回调会在创建数据库后被调用。

<!DOCTYPE HTML>

 <html>

    <head>

       <meta charset="UTF-8">  

       <script type="text/javascript">

       

          var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

          var msg;

          

          db.transaction(function (tx) {

             tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

             tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');

             tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');

             msg = '<p>数据表已创建,且插入了两条数据。</p>';

             document.querySelector('#status').innerHTML =  msg;

          });



          db.transaction(function (tx) {

               tx.executeSql('DELETE FROM LOGS  WHERE id=1');

               msg = '<p>删除 id 为 1 的记录。</p>';

               document.querySelector('#status').innerHTML =  msg;

          });



          db.transaction(function (tx) {

              tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');

               msg = '<p>更新 id 为 2 的记录。</p>';

               document.querySelector('#status').innerHTML =  msg;

          });



          db.transaction(function (tx) {

             tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {

                var len = results.rows.length, i;

                msg = "<p>查询记录条数: " + len + "</p>";

                document.querySelector('#status').innerHTML +=  msg;

                

                for (i = 0; i < len; i++){

                   msg = "<p><b>" + results.rows.item(i).log + "</b></p>";

                   document.querySelector('#status').innerHTML +=  msg;

                }

             }, null);

          });

          

       </script>

       

    </head>

    

    <body>

       <div id="status" name="status">状态信息</div>

    </body>

 </html>



4、==================================================================HTML5 应用程序缓存
HTML5 应用程序缓存
使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。
什么是应用程序缓存(Application Cache)?
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。


Cache Manifest 基础
如需启用应用程序缓存,请在文档的<html> 标签中包含 manifest 属性:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
manifest 文件的建议的文件扩展名是:".appcache"。
Remark 请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。


Manifest 文件
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)


CACHE MANIFEST
第一行,CACHE MANIFEST,是必需的:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的。
NETWORK
下面的 NETWORK 小节规定文件 "login.php" 永远不会被缓存,且离线时是不可用的:
NETWORK:
login.php
可以使用星号来指示所有其他其他资源/文件都需要因特网连接:
NETWORK:
*


FALLBACK
下面的 FALLBACK 小节规定如果无法建立因特网连接,则用 "offline.html" 替代 /html5/ 目录中的所有文件:
FALLBACK:
/html/ /offline.html
注意: 第一个 URI 是资源,第二个是替补。
更新缓存
一旦应用被缓存,它就会保持缓存直到发生下列情况:
用户清空浏览器缓存
manifest 文件被修改(参阅下面的提示)
由程序来更新应用缓存


实例 - 完整的 Manifest 文件

CACHE MANIFEST

 # 2012-02-21 v1.0.0

 /theme.css

 /logo.gif

 /main.js



 NETWORK:

 login.php



 FALLBACK:

 /html/ /offline.html


Remark提示:以 "#" 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。


关于应用程序缓存的说明
请留心缓存的内容。
一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。
注意: 浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)。


5、==================================================================HTML5 Web Workers
什么是 Web Worker?
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
web worker 是运行在后台的 JavaScript,不会影响页面的性能。


<!DOCTYPE html>

 <html>

 <body>

 <p>计数: <output id="result"></output></p>

 <button οnclick="startWorker()">开始工作</button> 

 <button οnclick="stopWorker()">停止工作</button>

 <p><strong>注意:</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>

 <script>

 var w;

 function startWorker() {

     if(typeof(Worker) !== "undefined") {

         if(typeof(w) == "undefined") {

             w = new Worker("demo_workers.js");

         }

         w.onmessage = function(event) {

             document.getElementById("result").innerHTML = event.data;//接收返回的数据

         };

     } else {

         document.getElementById("result").innerHTML = "抱歉,你的浏览器不支持 Web Workers...";

     }

 }

 function stopWorker() { 

     w.terminate();

     w = undefined;

 }

 </script>

 </body>

 </html>




创建 web worker 文件
现在,让我们在一个外部 JavaScript 中创建我们的 web worker。
在这里,我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中:
var i=0;

function timedCount()

 {

 i=i+1;

 postMessage(i); //这个很重要

 setTimeout("timedCount()",500);

 }



 timedCount();




Web Workers 和 DOM
由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:
window 对象
document 对象
parent 对象


6、==================================================================HTML5 服务器发送事件(Server-Sent Events)
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。


Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。


<!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>菜鸟教程(runoob.com)</title>

 </head>

 <body>

 <h1>获取服务端更新数据</h1>

 <div id="result"></div>

 <script>

 if(typeof(EventSource)!=="undefined")

 {

var source=new EventSource("demo_sse.php");

source.onmessage=function(event)

{

document.getElementById("result").innerHTML+=event.data + "<br>";

};

 }

 else

 {

document.getElementById("result").innerHTML="抱歉,你的浏览器不支持 server-sent 事件...";

 }

 </script>

 </body>

 </html>




服务器端代码实例
为了让上面的例子可以运行,您还需要能够发送数据更新的服务器(比如 PHP 和 ASP)。
服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在,您可以开始发送事件流了。
实例

<?php 

 header('Content-Type: text/event-stream'); 

 header('Cache-Control: no-cache'); 



 $time = date('r'); 

 echo "data: The server time is: {$time}nn"; 

 flush(); 

 ?>



 ASP 代码 (VB) (demo_sse.asp):

 <%

 Response.ContentType="text/event-stream"

 Response.Expires=-1

 Response.Write("data: " & now())

 Response.Flush()

 %>


代码解释:
把报头 "Content-Type" 设置为 "text/event-stream"
规定不对页面进行缓存
输出发送日期(始终以 "data: " 开头)
向网页刷新输出数据


EventSource 对象
在上面的例子中,我们使用 onmessage 事件来获取消息。不过还可以使用其他事件:
事件 描述
onopen 当通往服务器的连接被打开
onmessage 当接收到消息
one rror 当发生错误


妈的实际上是个轮询,不断发送请求,忽悠我呢。。。

标签:知识点,缓存,浏览器,文件,manifest,html5,整理,document,HTML5
From: https://blog.51cto.com/u_13128132/6323339

相关文章

  • 【整理】jQuery知识点4
    ★★★=============================================================jQuery-AJAXAJAX是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。关于jQuery与AJAXjQuery提供多个与AJAX有关的方法。通过jQueryAJAX方法,您能够使用H......
  • 【整理】html5知识点3
    1、====================================================================HTML5新的Input类型HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。本章全面介绍这些新的输入类型:colordatedatetimedatetime-localemailmonthnu......
  • 【整理】html知识点
    1、链接target属性_blank在新窗口中打开<ahref="http://www.runoob.com/"target="_blank">访问菜鸟教程!</a>2、链接id属性在HTML文档中插入ID:<aid="tips">有用的提示部分</a>在HTML文档中创建一个链接到"有用的提示部分(id="tips......
  • 《操作系统》知识框架整理
    文章目录第1章计算机系统概述1.1操作系统的基本概念1.1.1操作系统的三大功能1.1.2操作系统的四大特征1.2操作系统的分类1.3操作系统的运行机制和体系结构1.3.1运行机制和体系结构1.3.2中断和异常1.3.3系统调用第2章进程管理2.1进程与线程2.1.1进程的定义、特征、组成......
  • c语言程序设计知识点总结03
    c语言程序设计知识点总结03地址(Address):计算机的内存由若干个字节内存单元构成,每个字节内存单元都有一个唯一的地址用于区分和存取单元中的数据。形式上,地址是一个无符号整数,从0开始,依次递增,在表达和交流时,通常把地址写成十六进制数。指针(Pointer):一个变量,它存有另外一......
  • WEB—漏洞必懂知识点
     CTF,SRC,红蓝对抗,实战等SRC:针对与网站上面的漏洞,进行提交漏洞并证实可以获得相应的佣金。偏向于实战,重点掌握获取网站权限 漏洞等级划分高危:SQL注入,文件上传,文件包含,代码执行,未授权访问——直接影响到网站权限和数据库权限,能够直接获取数据或者获取到一些敏感信息只要涉......
  • 2023上半年软考系统分析师科目一整理-01
    (2023上半年软考系统分析师科目一整理-01)1.面向对象面向对象分析中,对象是类的实例。对象的构成成分包含了(A),属性和方法(或操作)。A.标识 B.消息 C.规则 D.结构对象的三要素为:属性(数据)、方法(操作)、对象ID(标识)。面向对象分析中,类与类之间的“IS-A”关系的是一种(C),......
  • 基于 HTML5 WebGL 的垃圾分类系统
    前言垃圾分类,一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运,从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值,力争物尽其用。垃圾在分类储存阶段属于公众的私有品,垃圾经公众分类投放后成为公众所在小区或社区的区域性准公共资源,垃圾......
  • HTML5 + WebGL 实现的垃圾分类系统
    前言垃圾分类,一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运,从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值,力争物尽其用。垃圾在分类储存阶段属于公众的私有品,垃圾经公众分类投放后成为公众所在小区或社区的区域性准公共资源,垃圾......
  • 基于 HTML5 + WebGL 实现的垃圾分类系统
    前言垃圾分类,一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运,从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值,力争物尽其用。垃圾在分类储存阶段属于公众的私有品,垃圾经公众分类投放后成为公众所在小区或社区的区域性准公共资源,垃圾......