HTML 基础

真真-真真

已于 2023-08-17 20:09:21 修改

阅读量798

点赞数

分类专栏： HTML基础文章标签： html5

于 2014-09-25 15:42:54 首次发布

本文链接：https://blog.csdn.net/saoraozhe3hao/article/details/39548049

版权

HTML基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5

HTML5包含了新的元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。这套技术往往被称作 HTML5 和它的朋友们，通常简称为 HTML5。

有关 HTML5 技术可归类成若干组：

语义（Semantics）：元素语义化，让HTML文档更加清晰，可阅读性更强，更利于SEO。输入框增加类型属性等。
通信Connectivity）：和服务器之间进行通信，Web Sockets，XHR 2，SSE。
离线 & 存储（Offline & Storage）：在客户端存储数据以及更高效地离线运行。本地存储，数据库，文件等操作。
多媒体（Multimedia）：使 video 和 audio 成为了在所有 Web 中的一等公民。
绘图 & 动画（2D/3D Graphics & Effects）：提供了更加分化范围的呈现选择。canvas，SVG，webGL等。
性能 & 集成（Performance & Integration）：显著性能优化和更有效使用计算机硬件。拖放，全屏，postMessage(),history.hash等。
设备访问（Device Access）：能够处理各种输入和输出设备。camera API，触控，地理位置等。
样式（Styling）:CSS 3

性能 & 集成：Web Worker
web worker在后台运行，不阻塞浏览器线程。
woker脚本文件中，在需要输出数据的地方使用postMessage(“data”);


var w=new Worker("demo_workers.js"); // 创建worker对象：
// worker的事件：
w.onmessage = function(event){
console.log(event.data);
};
// worker的方法：
w.terminate();

/* postMessage */
window.addEventListener('message', function (e) {    // 监听消息
	console.log(e)
})
window.parent.postMessage(data, '*')  // iframe 发送消息
window.opener.postMessage(data, '*')  // 子窗口 发送消息

通信：server-sent event（SSE）
Server-Sent 事件指的是网页自动获取来自服务器的更新。是浏览器提供的实现Comet交互的API。


var source=new EventSource("demo_sse.php"); // 创建SSE对象：
// SSE的事件：
source.onopen=function(event)
{
console.log("onopen");
};
source.onmessage=function(event)
{
console.log(event.data);
};
source.onerror=function(event)
{
console.log("onerror");
};

通信 Web Socket

let ws = new WebSocket("ws://localhost:8080");
ws.onopen = function () {
    ws.send("hello");
};
ws.onmessage = function (e) {　
    console.log(e.data);
};
ws.onclose = function (e) {
};
ws.onerror = function (e) {
}

ApplicationCache（应用缓存、本地缓存、离线缓存、离线存储、离线应用）

应用可以向浏览器指定需要缓存的文件，使得离线时可以使用这些文件，在线时也不会重新请求这些文件。

一、定义manifest 文件

manifest 文件（缓存清单）是简单的文本文件，它告知浏览器被缓存的内容以及不缓存的内容。

        manifest 文件可分为四个部分：

       1、CACHE MANIFEST，指定需要缓存的资源

             CACHE MANIFEST
             /theme.css
             /logo.gif
             /main.js

         2、NETWORK，指定不缓存的文件，可以用星号来表示其他所有资源

               NETWORK:
               login.asp

              NETWORK:
              *
        3、FALLBACK，指定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件，用 offline.js 替代 online.js

             FALLBACK:
             /html5/ /404.html

online.js offline.js

4、注释，以#号开头的行

二、使用manifest 文件

<html manifest="demo.appcache">，demo.appcache为manifest 文件，其MIME-type需要配置为"text/cache-manifest"。

指定了 manifest ，则浏览器默认的文件缓存规则（200 from cache）不再生效。

三、更新manifest 文件

缓存清单上的文件一旦被缓存，浏览器会持续使用已缓存的版本，即使服务器上的对应的文件已经修改。为了让浏览器更新缓存，需要更新 manifest 文件，如修改一行注释。

四、使用 applicationCache 对象

applicationCache.update() // 从新下载 manifest 文件

applicationCache.onUpdateReady = function(){ //缓存文件更新完毕事件的回调函数 }; // 另外还有 onDownloading, onError等事件

Web Storage（Web 存储、DOM存储）

一、localStorage（本地存储）

本地存储类似于cookie，也是键值对。window.localStorage是全局对象，改变localStorage对象的内容，即改变了本地存储的内容。本地存储除非清空，否则永久有效。

保存数据：localStorage.key="value"; 或localStorage.setItem(key,value);

        读取数据：localStorage.key 或localStorage.getItem(key);
        删除单个数据：localStorage.removeItem(key);
        删除所有数据：localStorage.clear();

二、sessionStorage（会话存储）

会话存储也是键值对。window.sessionStorage是全局对象，改变sessionStorage对象的内容，即改变了会话存储的内容。用户关闭浏览器窗口后，数据会被删除。对数据的操作和本地存储一样。

本地数据库

一、Web SQL Database

本地的SQL数据库。

二、IndexedDB

本地的NoSQL数据库。

本地文件

一、File API

操作用户选中或拖入的文件，参考在 web 应用程序中使用文件 - Web API 接口参考 | MDN

二、File System API

操作本地文件系统

cookie

读取cookie: document.cookie
写cookie：document.cookie="key=value;max-age=3;path=/;domain=xxx.com;secure"，这只是设置一个字段，对其他字段不会有影响
为了让cookie可以在子域名之间共享，可以把cookie设置为.顶级域名