HTML5

最新推荐文章于 2022-05-08 12:17:30 发布

LEIQINGQI

最新推荐文章于 2022-05-08 12:17:30 发布

阅读量333

点赞数

本文链接：https://blog.csdn.net/LEIQINGQI/article/details/81514687

版权

https://www.w3cschool.cn/html5/

HTML5

HTML5

简介

HTML5 是HTML 最新的修订版本，2014年10月由W3C 完成标准指定，

目的是为了在移动设备上支持多媒体

声明必须放在html5 文档的第一行

<!DOCTYPE html>

Canvas

canvas 是HTML5 的新元素，通过这个元素，可以在网页上绘制所需要的图形

通过脚本（JavaScript）来完成

创建画布

一个画布在网页上是一个矩形框

<canvas id="myCanvas" width="200" height="100"></canvas>

<canvas id="myCanvas" width="200" height="100" 
style="border:1px solid #000000;"> 
</canvas>

绘制

canvas 本身没有绘制能力，绘制要在JavaScript中进行

<script> 
var c=document.getElementById("myCanvas");   //找到canvas 元素
var ctx=c.getContext("2d");          // 创建context对象
ctx.fillStyle="#FF0000"; 
ctx.fillRect(0,0,150,75); 
</script>

坐标

左上角坐标为（0，0）

画直线

使用以下两种方法

moveTo(x,y ) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

定义开始坐标（0，0）和结束坐标（200，100），然后使用stroke() 方法绘制线条：

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.moveTo(0,0); 
ctx.lineTo(200,100); 
ctx.stroke();

画圆

arc(x,y,start,stop)

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(95,50,40,0,2*Math.PI); 
ctx.stroke();

本文

font 定义字体
fillText（text,x,y）在canvas 绘制实心的文本
strokeText(text,x,y) 在vanvas 上绘制空心文本

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.font="30px Arial"; 
ctx.fillText("Hello World",10,50);

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.font="30px Arial"; 
ctx.strokeText("Hello World",10,50);

渐变

渐变可以填充在举行，圆形，线条，文本等等

createLinearGradient(x,y,x1,y1) -创建线条渐变
createRadialGradient(x,y,x1,y1,r1) 创建一个径向渐变

addColorStop() 指定颜色停止，

线性渐变

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 

// Create gradient 
var grd=ctx.createLinearGradient(0,0,200,0); 
grd.addColorStop(0,"red"); 
grd.addColorStop(1,"white"); 

// Fill with gradient 
ctx.fillStyle=grd; 
ctx.fillRect(10,10,150,80);

径向渐变

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 

// Create gradient 
var grd=ctx.createRadialGradient(75,50,5,90,60,100); 
grd.addColorStop(0,"red"); 
grd.addColorStop(1,"white"); 

// Fill with gradient 
ctx.fillStyle=grd; 
ctx.fillRect(10,10,150,80);

将图像放在画布上

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
var img=document.getElementById("scream"); 
ctx.drawImage(img,10,10);

SVG

可缩放矢量图形，基于可扩展标记语言

SVG 指可伸缩矢量图形（Scalable Vector Graphics）
用于定义用于网络的基于矢量的图形
使用XML 格式定义图形
在放大或者改变尺寸的情况下其图形质量不会有损失
是W3C 的标准

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

</body>
</html>

SVG 和Canvas 区别

svg 是一种使用xml描述2d图形的语言

canvas 通过JavaScript来描绘2d图形

svg基于xml，这意味者svg dom 中的每个元素都是可用的，可以为某个元素附加JavaScript时间处理器

在svg 中，每个被绘制的图形都被视为对象，如果svg对象的属性发生变化，浏览器能够自动重现图形

canvas 是逐像素进行渲染的，在canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注，如果其位置发生变化，那么整个场景需要重新绘制，包括任何被图形覆盖的对象

MathML

一种数学标记语言，一种基于XML的标准，可以在互联网上书写数学符号和公式的置标语言

<!DOCTYPE html><html>
   <head>
      <meta charset="UTF-8">
      <title>W3Cschool在线教程(w3cschool.cn)</title>
   </head>

   <body>

      <math xmlns="http://www.w3.org/1998/Math/MathML">

         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>

            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>

            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>

      </math>

   </body>
</html>

<!DOCTYPE html><html>
   <head>
      <meta charset="UTF-8">
      <title>W3Cschool在线教程(w3cschool.cn)</title>
   </head>

   <body>

      <math xmlns="http://www.w3.org/1998/Math/MathML">

         <mrow>         
            <mrow>

               <msup>
                  <mi>x</mi>
                  <mn>2</mn>
               </msup>

               <mo>+</mo>

               <mrow>
                  <mn>4</mn>
                  <mo>⁢</mo>
                  <mi>x</mi>
               </mrow>

               <mo>+</mo>
               <mn>4</mn>

            </mrow>

            <mo>=</mo>
            <mn>0</mn>

         </mrow>
      </math>

   </body></html>

<!DOCTYPE html><html>
   <head>
      <meta charset="UTF-8">
      <title>W3Cschool在线教程(w3cschool.cn)</title>
   </head>

   <body>
      <math xmlns="http://www.w3.org/1998/Math/MathML">

         <mrow>
            <mi>A</mi>
            <mo>=</mo>

            <mfenced open="[" close="]">

               <mtable>
                  <mtr>
                     <mtd><mi>x</mi></mtd>
                     <mtd><mi>y</mi></mtd>
                  </mtr>

                  <mtr>
                     <mtd><mi>z</mi></mtd>
                     <mtd><mi>w</mi></mtd>
                  </mtr>
               </mtable>

            </mfenced>
         </mrow>
      </math>

   </body></html>

拖放

<!DOCTYPE HTML> 
<html> 
<head> 
<script> 
function allowDrop(ev) 
{ 
ev.preventDefault(); 
} 

function drag(ev) 
{ 
ev.dataTransfer.setData("Text",ev.target.id); 
} 

function drop(ev) 
{ 
ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 
} 
</script> 
</head> 
<body> 

<div id="div1" ondrop="drop(event)" 
ondragover="allowDrop(event)"></div> 

<img id="drag1" src="img_logo.gif" draggable="true" 
ondragstart="drag(event)" width="336" height="69"> 

</body> 
</html>

设置元素为可拖放

<img draggable="true">

拖放什么 setData

ondragstart 属性调用了一个函数，drag(event), 它规定了被拖动的数据，dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)        
{
ev.dataTransfer.setData("Text",ev.target.id);       
}

放到何处 ondragover

默认地，无法将数据/元素放置到其他元素中，如果需要设置允许放置，我们要阻止对元素的默认处理方式

*event*.preventDefault()

进行放置 ondrop

当放置被托数据时，会发生drop事件

function drop(ev)        
{        
ev.preventDefault();        
var data=ev.dataTransfer.getData("Text");        
ev.target.appendChild(document.getElementById(data));        
}

调用preventDefault() 来避免浏览器对数据的默认处理（drop事件的默认行为是以链接形式打开）
通过dataTransfer.getData(“text”) 方法获得被拖数据，方法将返回在setData() 方法中设置为相同的类型的任何数据
被拖数据是被拖元素的id
把被拖元素追加到放置元素中

地理定位

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }

function showPosition(position)
  {
  var latlon=position.coords.latitude+","+position.coords.longitude;

  var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
  +latlon+"&zoom=14&size=400x300&sensor=false";
  document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
  }

function showError(error)
  {
    switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="用户拒绝对获取地理位置的请求。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="位置信息是不可用的。"
      break;
    case error.TIMEOUT:
      x.innerHTML="请求用户地理位置超时。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="未知错误。"
      break;
    }
  }
</script>
</body>
</html>

watchPosition() 返回用户的当前位置，并继续返回用户移动时的更新位置

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;   
  }
</script>
</body>
</html>

Video

html5 规定一种通过视频元素来包含视频的标准方法

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

<video> 提供了播放、暂停、音量控件来控制视频

视频格式

当前，元素支持三种视频格式： MP4, WebM, 和 Ogg:

使用DOM 进行控制

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="/statics/demosource/mov_bbb.mp4" type="video/mp4">
    <source src="/statics/demosource/mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
  </video>
</div> 

<script> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 

function makeBig()
{ 
myVideo.width=560; 
} 

function makeSmall()
{ 
myVideo.width=320; 
} 

function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 

</body> 
</html>

Audio

到今天大多数音频是通过插件播放的，但不是所有浏览器都拥有同样的插件

使用 <audio>

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool在线教程(w3cschool.cn)</title> 
</head>
<body>

<audio controls>
  <source src="/statics/demosource/horse.ogg" type="audio/ogg">
  <source src="/statics/demosource/horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

</body>
</html>

control 添加播放、暂停、音量控制

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

Input

有了新的输入类型

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

表单元素

新的表单元素

<datalist>
<keygen>
<output>

表单属性

`<form>` 新属性

autocomplete
novalidate

`<input> 新属性`

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

autocomplete 属性

规定input 应该拥有的自动完成功能

novalidata

提交表单时不应该验证form 或input

autofocus

页面加载时，域自动地获得焦点

form

规定输入域所属的一个或多个表单

formaction

用于描述表单提交的url地址，会覆盖form 中的action属性

formenctype

描述了表单提交到服务器的数据编码

formmethod

表单提交的方式

formnovalidata

描述了input 元素在表单提交时无需被验证

formtarget

指明表单提交数据接收后的展示

height width

高度和宽度

list

规定输入域的datalist datalist 时输入域的选项列表

min 和max 属性

为包含数字和日期的input 规定约束

multiple

适用于email 和file ，可以选择多个值

pattern

使用正则表达式验证input元素的值

placeholder

提供一种提示，描述输入域所期待的值

required

规定必须在提交之前填写的输入域

step

输入域规定合法的数字间隔

语义元素

一个语义元素能够清楚的描述其意义给浏览器和开发者。

HTML 5 提供新的语义元素

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

`<section>`

章节、页眉、页脚或文档中的其他部分

`<article>`

定义独立的内容

`<nav>`

用于定义页面的导航链接部分区域

`<aside>`

定义页面主区域内容之外的内容（侧边栏）

`<header>`

描述了文档的头部区域

`<footer>`

描述了文档的底部区域

`<figure>` 和 `<figcaption>` 元素

规定独立的流内容（图像、代码、图表）

caption ：标题

web 存储

在html5 之前，主要使用cookie 存储，缺点：需要在请求头上带着数据，存储大小不超过4k

web 存储数据以键/值对存在，web 网页的数据只允许该网页访问使用

localStorage 和 sessionStorage

localStorage 没有时间限制
sessionStorage 针对一个session 的数据存储

检查是否支持

if(typeof(Storage)!=="undefined")        
  {        
  // 是的! 支持 localStorage  sessionStorage 对象!         
  // 一些代码.....         
  }        
else        
  {        
  // 抱歉! 不支持 web 存储。         
  }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool在线教程(w3cschool.cn)</title>  
<script>
function clickCounter()
{
    if(typeof(Storage)!=="undefined")
    {
        if (localStorage.clickcount)
        {
            localStorage.clickcount=Number(localStorage.clickcount)+1;
        }
        else
        {
            localStorage.clickcount=1;
        }
        document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
    }
    else
    {
        document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
    }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
</body>
</html>

不管是localStorage，还是sessionStorage， API 都相同

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool在线教程(w3cschool.cn)</title> 
<script>
function clickCounter()
{
    if(typeof(Storage)!=="undefined")
    {
        if (sessionStorage.clickcount)
        {
            sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
        }
        else
        {
            sessionStorage.clickcount=1;
        }
        document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
    }
    else
    {
        document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 web 存储";
    }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
</body>
</html>

web sql

在浏览器上模拟数据库，可以使用js 来操作sql 完成对数据的读写

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。

executeSql：这个方法用于执行实际的 SQL 查询。

### 打开数据库

使用openDatabase() 打开已经存在的数据库，如果数据库不存在，会创建一个新的数据库

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

数据库名称
版本号
描述文本
数据库大小
创建回调，创建数据库后会调用回调函数

创建表

使用database.transaction() 函数

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

会创建一个LOGS 的表

插入数据

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "W3Cschool教程")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3cschool.cn")');
});

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS 
                        (id,log) VALUES (?, ?'), [e_id, e_log];
});

读取数据

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

db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "W3Cschool教程")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3cschool.cn")');
});

db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "
查询记录条数: " + len + "

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

      for (i = 0; i < len; i++){
         alert(results.rows.item(i).log );
      }

   }, null);
});

删除记录

db.transaction(function (tx) {
    tx.executeSql('DELETE FROM LOGS  WHERE id=1');
});

db.transaction(function(tx) {
    tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});

更新记录

db.transaction(function (tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cn\' WHERE id=2');
});

db.transaction(function(tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cn\' WHERE id=?', [id]);
});

cache manifest

引入了应用程序缓存，在web 应用可以进行缓存，在额米有因特网连接时进行访问

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

声明

<!DOCTYPE HTML>        
<html manifest="demo.appcache">        
...        
</html>

manifest 文件

简单的文本文件，他告知浏览器被缓存的内容

分为三部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

第一行 CACHE MANIFEST

有三个资源：一个CSS 文件一个gif图像一个JavaScript文件，当manifest 文件加载后，浏览器会在往回走那的

根目录下载这仨个文件，无论用户何时与因特网断开连接，这些资源都是有用的。

NWTWOEK

规定的文件不会被缓存

FALLBACK

如果无法建立因特网连接，使用声明的文件替代

更新缓存

用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存

完整的Manifest 文件

CACHE MANIFEST        
# 2012-02-21 v1.0.0       
/theme.css        
/logo.gif        
/main.js        

NETWORK:        
login.php        

FALLBACK:       
/html/ /offline.html

web worker

这是在后台运行的JavaScript，不会影响页面的性能，可以使用web worker 提供的一种简单的方法来为web 内容在后台线程中运行脚本，不会干扰用户界面

检测兼容性

 if(typeof(Worker)!=="undefined")
   {
   // 是的! Web worker 支持!
   // 一些代码.....
   }
 else
   {
   // //抱歉! Web Worker 不支持
   }

创建脚本

存储在一个js 文件中，例如“demo_workers.js ”

 var i=0;

 function timedCount()
 {
 i=i+1;
 postMessage(i);
 setTimeout("timedCount()",500);
 }

 timedCount();

使用postMessage() 方法向html 页面传回一段消息

使用web worker对象

检测是否存在worker，如果不存在，创建一个web worker，然后运行 “demo_workers.js” 中的代码

 if(typeof(w)=="undefined")
   {
   w=new Worker("demo_workers.js");
   }

然后添加一个onmessage 事件监听器

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

完整代码

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<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="Sorry, your browser does not support Web Workers...";
}
}

function stopWorker()
{ 
w.terminate();
}
</script>

</body>
</html>

SSE

基于websocket 协议的一种服务器向客户端发送事件和数据的单向通讯

websocket

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>W3Cschool教程(w3cschool.cn)</title>

      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");

               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");

               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };

               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };

               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }

            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>

   </head>
   <body>

      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>

   </body>
</html>