HTML笔记（2）——HTML5新属性

时间 2019-11-19

标签 html 笔记 html5 属性栏目 HTML 繁體版

原文原文链接

HTML5 DAY01:javascript

基本内容java

HTML5目前最新的规范(标准)是2014年10月推出web

2005年左右出现HTML5版本(非标准)正则表达式

W3C组织(两个组织定义H5规范)canvas

学习(研究)HTML5是学习将来(未来主流)api

HTML版本 - 第一阶段主要学习仍是4版本(包含5版本)浏览器

<header><nav>安全

HTML5版本以后,声明再也不出现版本信息服务器

有意地版本,之后可能再也不会有新版本网络

HTML5的规范内容实时更新

注意

HTML5永远都不可能离开javascript.

HTML5在移动端支持好于PC端

HTML5新表单

1、input新类型

①email类型

语法：<input type=”email” />

做用 - 验证是否包含"@"

问题 - 验证逻辑并不完整

②url类型

语法：<input type=”url” />

做用 - 提交表单时,验证是否包含"http://"

问题 - 验证逻辑并不完整

③tel类型 - 只在移动端显示

④number类型

语法：<input type=”number” />

min - 最小值

max - 最大值

step - 步长,默认值为1

⑤range类型

语法：<input type=”range” min=”1” max=”100” value”50”/>

min - 最小值

max - 最大值

tep - 步长

value - 当前值

⑥date类型

语法：<input type=”date” />

⑦week类型

语法：<input type=”week” />

⑧month类型

语法：<input type=”month” />

⑨color类型

语法：<input type=”color” />

search类型--输入搜索关键字操做的文本框

语法：<input type=”search” />

2、表单新元素

①datalist元素--定义备选项(并不显示)

配合<input>元素使用

定义list属性 - 属性值等于<datalist>元素的id属性值

效果 - 和<select>下拉列表相似

特色 - 数据与结构的分离

数据 - 预约义数据内容<datalist>

结构 - 显示在HTML页面中的元素<input>

优势 - 使用<datalist>元素定义的数据,能够重复使用

②progress元素---进度条

max - 设置进度条的最大值

没有min属性 - 最小值为0

value - 表示当前的进度值

③meter元素--刻度

min - 最小值

max - 最大值

value - 当前值

low - 低预警值

high - 高预警值

④output元素--输出

3、表单新属性

①placeholder属性 - 提供默认提示内容

语法：<input type=”text” placeholder=”提示文本 ” />

做用 - 相似于value属性

区别

value属性值

显示为黑色

确实存在文本框中

placeholder属性值

显示为灰色

相似于背景存在

②multiple属性 - 容许输入多个值

语法：<input type=”text” multple/>

做用 - 容许输入多个值

注意 - 多个值之间使用","

用法 - 只定义属性名,没有属性值

③autofocus属性 - 自动获取焦点

语法：<input type=”text” autofocus />

做用 - 自动获取焦点

用法 - 只定义属性名,没有属性值

④form 属性- 容许表单元素定义在表单以外

语法：<form id=”myform”></form>

本来的HTML页面中定义表单元素

全部的表单元素,必须定义在<form>元素中

做用 - 容许将表单元素定义在<form>元素外

<form>元素外的表单元素,使用该属性

form属性值等于<form>元素的id属性值

4、表单新验证

(1)验证属性

①required属性：验证当前元素值是否为空

语法：<input type=”text” required />

②pattern属性:使用正则表达式验证当前元素值是否匹配

语法：<input type=”text” pattern=”[0-9a-zA-Z]{6,16}” />

注意 - 并不能验证当前元素值是否为空

③min和max属性：验证当前元素值最小值或最大值

通常适用于number、range等元素

语法：<input type=”number” min=”1” max=”50” />

④minlength和maxlength属性

语法：<input type=”text” maxlength=”10” minlength=”1” />

minlength - 验证当前元素值的最小长度

输入值时,容许输入小于指定值

提交表单时,验证元素值最小长度

注意：minlength并非HTML5新属性

maxlength - 验证当前元素值的最大长度

输入值时,长度不能大于指定值

⑤validity属性

语法：指定元素.validity.validityState

如：Elem.validity.valid

表单验证HTML5提供一种有效状态

有效状态经过validityState对象获取到

validityState对象可经过validity属性获得

验证(有效)状态

validityState对象提供了一系列的有效状态

经过这些有效状态,进行判断

注意：全部验证状态必须配合上述的验证属性使用

做用：用来替换本来手工实现的逻辑

(2)验证状态

①valid

做用 - 判断当前元素值是否正确

注意：该状态返回true,表示验证成功；该状态返回false,表示验证失败

②valueMissing

做用 - 判断当前元素值是否为空

用法 - 配合required属性使用

③typeMismatch

做用 - 判断当前元素值的类型是否匹配

用法 - 配合email、number、url等

④patternMismatch

做用 - 判断当前元素值是否与指定正则表达式匹配

用法 - 配合pattern属性使用

⑤tooLong

做用 - 判断当前元素值的长度是否正确

用法 - 配合maxlength属性

注意：使用maxlength属性后,实际不可能出现长度大于maxlength的值；tooLong很难出现这种状况

⑥rangeUnderflow

做用 - 判断当前元素值是否小于min属性值

用法 - 配合min属性

注意 - 并不能与max属性值进行比较

⑦stepMismatch

做用 - 判断当前元素值是否与step设置相符

用法 - 配合step使用

注意 - 并不能与min或max属性值进行比较

⑧customError

用法 - 配合setCustomValidity()方法

若是使用该方法,该状态返回true

setCustomValidity()方法

做用 - 设置自定义的错误提示内容

存在的问题：一旦使用该方法修改默认错误提示信息后

即便输入正确,错误提示依旧存在(逻辑错误)

解决：判断若是用户输入正确的话，调用该方法将信息设置为空("")

不能使用上述有效状态的任何一种判断输入是否正确(全部状态返回false)

HTML Day02

1、视频处理 <video></video>

①基本内容：使用Flash技术处理HTML页面中的视频内容

包含音频、动画、网页游戏等

特色

浏览器原生不支持(IE浏览器要求安装ActiveX组件)

性能很差(不能过多地使用)

智能移动端并不支持Flash技术

命运

Flash的母公司Adobe公开宣布放弃

目前用于替代Flash技术最好的选择 - HTML5

几乎全部浏览器原生支持<video>元素

性能更高

智能移动端支持很是好

②如何实现视频处理

<video>元素

若是当前浏览器不支持<video>元素

在<video>元素内编写提示内容

属性

src - 引入视频文件的路径

autoplay - 自动播放视频

使用<source>元素

<video>

</video>

③<video>支持的视频格式

MP4格式 - 目前比较主流

OGG格式 - 多用于移动端

WebM格式 - 目前惟一支持超高清格式

在HTML页面中支持超高清格式(HTML5)

由Google公司推出的

④<video>元素的属性

src - 引入视频文件的路径

autoplay - 自动播放视频

controls - 提供控制面板

loop - 表示循环播放

poster - 设置播放以前显示的图片

width和height - 设置显示视频的宽度和高度

preload - 预加载

auto - (默认值)自动加载

none - 不加载

metadata - 只加载视频的基本信息(不含视频)

⑤高级内容

方法

play() - 播放视频

pause() - 暂停视频

load() - 加载视频

canPlayType() - 判断当前浏览器是否支持指定视频格式

事件

play - 当视频播放时被触发

pause - 当视频暂停时被触发

ended - 当视频结束时被触发

error - 当视频错误时被触发

canplay - 不考虑总体状况下,只要能播放,就播放

canplaythrough - 考虑总体状况下,只要能播放,就播放

progress - 表示视频加载的进度

属性 - 用于判断

paused - 表示判断当前视频是否暂停

返回Boolean值,true表示暂停,false表示播放

ended - 表示判断当前视频是否播放完毕

返回Boolean值,true表示完毕

duration - 表示当前视频的时长

currentTime - 表示当前视频播放的位置

二、音频处理<audio></audio>

第一种 - 只支持一种音频格式

第二种 - 同时引入多个音频格式

<audio>

</audio>

<audio>元素支持音频格式

MP3 - 目前最主流

OGG

WAV

3、画布<canvas></canvas>

①基本内容

简单来讲,HTML5提供的新元素<canvas>

Canvas在HTML页面提供画布的功能，在画布中绘制各类图形

Canvas绘制的图形与HTML页面无关

没法经过DOM获取绘制的图形

没法为绘制的图形绑定DOM事件

只能使用Canvas提供的API

Canvas用途

在HTML页面中绘制图表(例如柱状图、饼状图等)

网页游戏 - Flash技术

使用HTML5中的Canvas

如何使用Canvas

在HTML页面中定义<canvas>元素

在javascript代码中

获取<canvas>元素

建立画布对象

getContext('2d')方法

使用Canvas提供的API

②绘制图形

绘制矩形

fillRect(x,y,width,height) - 实心矩形

x和y - 矩形的左上角坐标值

width - 设置矩形的宽度

height - 设置彗星的高度

strokeRect(x,y,width,height) - 空心矩形

clearRect(x,y,width,height) - 清除指定区域的矩形

设置颜色

fillStyle - 设置填充颜色

strokeStyle - 设置描边颜色

globalAlpha - 设置透明度(0-1)

设置渐变

线型渐变 - createLinearGradient(x1,y1,x2,y2)

具备基准线 - 起点(x1,y1)和终点(x2,y2)

1. 设置线型渐变

createLinearGradient(x1,y1,x2,y2)

x1和y1 - 基准线的起点坐标值

x2和y2 - 基准线的终点坐标值

该方法返回渐变对象

2. 经过渐变对象,设置渐变颜色

addColorStop(postion,color)方法

postion - 设置渐变颜色的位置

该值的范围为 0-1

color - 设置渐变的颜色

3. 设置填充颜色 - 渐变对象

4.绘制矩形

扇形(射线)渐变 - createRadialGradient(x1,y1,r1,x2,y2,r2)

具备柱形(锥形) - 两个圆的面积

参数

x1和y1 - 第一个圆的圆心坐标值

r1 - 第一个圆的半径

x2和y2 - 第二个圆的圆心坐标值

r2 - 第二个圆的半径

1. 设置扇形渐变

createRadialGradient(x1,y1,r1,x2,y2,r2)

x1和y1 - 第一个基准圆的圆心坐标值

r1 - 第一个基准圆的半径

x2和y2 - 第二个基准圆的圆心坐标值

r2 - 第二个基准圆的半径

该方法返回渐变对象

2. 设置渐变颜色

3. 设置填充颜色为渐变

4. 绘制矩形

③绘制文字

方法：

fillText(text,x,y) - 实心文字

text - 绘制的文字内容

x和y - 绘制的坐标值

strokeText(text,x,y) - 空心文字

属性

font - 相似于CSS中的font属性

textAlign - 设置文字的水平方向对齐

left - 左对齐

center - 水平居中

right - 右对齐

textBaseline - 设置文字的垂直方向对齐

top - 顶部对齐

middle - (垂直)居中对齐

bottom - 底部对齐

hanging - 悬挂基线

alphabetic - 字母基线

注意

不管是水平方向仍是垂直方向对齐,基准线对齐,并非文字对齐

不管是水平方向仍是垂直方向对齐,并非必要的属性(不使用也是能够的)

④阴影效果

shadowColor - 设置阴影颜色

shadowOffsetX - 设置水平方向阴影

shadowOffsetY - 设置垂直方向阴影

shadowBlur - 设置阴影的模糊程度

⑤建立路径

(标识)方法

beginPath() - 表示开始建立路径

closePath() - 表示结束建立路径

设置方法

rect(x,y,width,height) - 设置矩形形状

x和y - 设置矩形的左上角坐标值

width和height - 设置矩形的宽度和高度

arc(x,y,radius,startAngle,endAngle,direction) - 设置圆形形状

x和y - 设置圆形的圆心坐标值

radius - 设置圆形的半径

startAngle和endAngle - 设置圆形的起始位置

direction - 按照顺时针或逆时针绘制

绘制方法

stroke() - 绘制轮廓

fill() - 绘制填充

绘制线条(直线和折线、多边形) - 建立路径

moveTo(x,y) - 设置这条线的起点坐标值

lineTo(x,y) - 设置这条线的终点(折点)坐标值

⑥设置线条

lineWidth - 设置线条的宽度

默认值为1(px)

lineCap - 设置线条端点的形状

butt - 默认值,平直

round - 圆角

square - 正方向

lineJoin - 设置两条线焦点的形状

miter - 默认值,尖角

round - 圆角

bevel - 斜角

miterLimit - 配合lineJoin使用

lineJoin设置为miter,该属性值设置尖角的延伸范围

4、Canvas处理图片

绘制图片

drawImage(img,x,y) - 按照图片原大小加载

img - 当前加载(绘制)的图片

x和y - 绘制图片的坐标值(左上角)

drawImage(img,x,y,width,height) - 按照指定大小加载图片

img - 当前加载(绘制)的图片

x和y - 绘制图片的坐标值(左上角)

width和height - 设置绘制图片显示的宽度和高度

注意：必须保证图片加载完毕(onload事件)后,再绘制图片

平铺图片

createPattern(img,type)

img - 平铺的图片

type - 平铺的方式

repeat - 平铺

no-repeat - 不平铺

repeat-x - 水平方向平铺

repeat-y - 垂直方向平铺

注意：必须保证图片加载完毕(onload事件)后,再绘制图片

切割图片

clip() - 切割(按照建立路径使用)

画布方法

scale(x,y) - 缩放(缩小或放大)

x - 表示水平方向的缩放

y - 表示垂直方向的缩放

参数的取值

若是为1的话,表示不缩放(原大小)

若是小于1的话,表示缩小

若是大于1的话,表示放大

translate(x,y) - 从新定位(x,y)

x和y - 新的坐标值

注意 - x和y是相对于上次定位坐标值

rotate(旋转角度) - 旋转画布

公式为 degrees*Math.PI / 180;

5、Chart.js - Canvas的JS库

做用 - 提供各类图表

如何使用

①.在HTML页面中引入Chart.js文件

②.在HTML页面中定义<canvas>元素

③.在javascript代码中

获取<canvas>元素

建立画布对象

var context = canvas.getContext("2d");

经过画布对象,建立Chart对象

var chart = new Chart(context);

利用Chart对象调用API方法

var data = [];

④. chart.Pie(data);

提供6种图表

柱状图 - Bar(data,options)

饼状图 - Pie(data,options)

曲线图 - Line(data,options)

环形图 - Doughnut(data,options)

雷达图 - Radar(data,options)

极地区域图 - PolarArea(data,options)

HTML5 DAY04:

SVG

1、基本内容

SVG并不属于HTML5专有内容

HTML5提供有关SVG原生的内容

在HTML5出现以前,就有SVG内容

SVG,简单来讲就是矢量图

SVG文件的扩展名为".svg"

SVG使用的是XML语法

2、概念

SVG是一种使用XML技术描述二维图形的语言

SVG的特色:

SVG绘制图形能够被搜索引擎抓取

SVG在图片质量不降低的状况下,被放大

3、**SVG与Canvas的区别

SVG

不依赖分辨率

支持事件绑定

大型渲染区域的程序(例如百度地图)

不能用来实现网页游戏

Canvas

依赖分辨率

不支持事件绑定

最合适网页游戏

保存为".jpg"格式的图片

4、用途

网页中一些小的图标

网页中动态特效(动画效果)

5、绘制图形

①矩形元素

绘制矩形 - <rect />

x和y - 绘制矩形的左上角坐标值

width和height - 绘制矩形的宽度和高度

必须使用属性方式,不能使用style样式方式

默认颜色为黑色

设置颜色 - 既可使用属性,还可使用样式

fill - 设置填充颜色

stroke - 设置描边颜色

设置线条宽度

stroke-width

注意

svg绘制的图形,使用style方式设置样式,使用的不是CSS属性,而是SVG属性

②圆形元素

绘制圆形 - <circle>

cx和cy - 圆形的圆形坐标值

r - 圆形的半径

③椭圆元素

绘制椭圆 - <ellipse>

rx - 横向的半径；ry - 纵向的半径

④直线元素

stroke-width 线条粗细；stroke 直线颜色

⑥折线元素

points - 设置起点、折点及终点

x和y之间使用","分隔

多个点之间使用空格分隔

折线的特色

默认将折线中的区域(起点到终点),默认提供黑色

⑦多边形元素

6、特效元素

①渐变 - 渐变元素定义在<defs>元素内

线型渐变 - <linearGradient> 该元素是起始元素

<defs>

</linearGradient>

</defs>

将上面设置线型渐变,添加在下面的矩形中

扇形(射线)渐变 - <radialGradient>

②滤镜 - 高斯模糊

滤镜使用<filter>元素

<feGaussianBlur>元素 - 高斯模糊

<defs>

</filter>

</defs>

stdDeviation - 设置模糊程度

注意 - 定义在<defs>元素中

将上面的高斯模糊与下面的元素进行关联

使用filter属性,值为url(#id)

设置当前图形的滤镜

TWO.js

1.基本内容

JS库介绍

three.js - 专门用于绘制三维图形

two.js - 专门用于绘制二维图形

two.js支持的格式

SVG - 默认

Canvas

WebGL - 专门用于绘制图像

2.如何使用two.js

①在HTML页面中引入two.js文件

②在HTML页面中定义容器(<div>)

③在javascript代码中

获取HTML页面中的容器

建立Two对象,将该对象添加到容器中

new Two(params).appendTo(Element);

使用two.js提供的API方法进行绘制

利用two.js提供的方法,设置图形

two.makeCircle 设置圆形

two.makeRectangle 设置矩形

利用update()方法进行绘制

3.建立Two对象

构造器 - new Two(params)

params参数 - 设置当前对象的信息

type - 设置当前使用的格式(Two.Types.svg)

svg - 默认值

canvas

webgl

width和height - 设置宽度和高度

fullscreen - 设置是否全屏

Boolean值,true表示全屏

图形方法

makeLine() - 绘制线条

makeRectangle() - 绘制矩形

makeCircle() - 绘制圆形

makeEllipse() - 绘制椭圆

动画方法

update() - 更新动画

play() - 添加动画(循环)

pause() - 删除动画

4.设置绘制图形的样式

调用Two对象的绘制方法绘制图形时,返回该图形对象

经过该图形对象,设置相关属性值

分组操做

Two.Group

若是在HTML页面绘制多个图形,而且每一个图形设置样式相同或相似

默认方式 - 每一个图形从新设置一次(代码重复)

分组操做(Two.Group) - 当前案例

将绘制的圆形和矩形分为一组

针对这一组,统一设置显示样式

实际操做

利用Two对象的makeGroup(objects)方法进行分组

objects - 设置分为一组的图形

格式 - 容许传递多(不定)个参数

该方法返回Group对象

经过Group对象,统一针对这一组设置样式

动画效果

bind(event,callback)方法 - 事件绑定

event - 绑定事件名称

update - 对应update()方法的做用

全部的DOM事件均可以绑定

callback - 事件处理函数

two.bind("update",function(){

//实现动画逻辑代码

}).play();

上述写法相似于DOM中的setInteval()

setInterval(function(){

实现动画逻辑

},时间);

HTML5 DAY05:

1、Geolocation(地理定位)

基本内容

地理定位 - 地球的经度和纬度的相交点

实现地理定位的方式

GPS - 美国的,依靠卫星定位

北斗定位 - 纯国产,惯性定位技术和卫星定位

基站定位 - 移动运营商建立基站(提供信号源)

基于互联网 - IP地址(PC端和移动端)

目前不少浏览器都具备定位功能

HTML5中地理定位

地理定位功能并非属于HTML5专有内容

HTML5的地理定位技术,由Google公司提供的

Google Map产品

中国 - 国内不能使用Google公司全部服务和产品

百度地图和高德地图

百度地图

百度地图 - http://developer.baidu.com/map/

注册百度开发者帐户

http://developer.baidu.com/

条件 - 必须能链接互联网

目的 - 掌握如何使用百度地图

JS库或百度地图

提供的API帮助文档

提供的Demo示例代码

学习目的

学习的百度地图的功能

百度地图的使用特色

如何使用百度地图

在HTML页面中

引入百度地图的JS

http://api.map.baidu.com/api?v=2.0&ak=秘钥

定义显示地图的容器

在javascript代码中

建立百度地图Map对象

var map = new BMap.Map(容器id);

进行地图的初始化

map.centerAndZoom();

百度地图的组件

核心类 - Map类

构造器 - BMap.Map(容器id);

方法

centerAndZoom() - 初始化方法

addControl() - 添加控件

addOverlay() - 添加标注

Control类 - 控件类

ScaleControl类 - 表示地图的比例尺

构造器 - 建立比例尺对象

NavigationControl类 - 表示移动缩放控件

构造器 - 建立移动缩放控件

Overlay类 - 遮盖物类

Marker类 - 表示地图的一个标注

构造器 - Marker(point)

Point类 - 标注类

2、拖放(拖拽)API

实现拖拽效果

要拖拽的文件是什么? - 源元素

要拖拽到哪里去? - 目标元素

目前实现拖拽效果

使用原生DOM就能实现 - 最麻烦

使用jQuery的插件 - 拖拽效果

HTML5中提供的拖拽功能

HTML5中拖拽

源元素事件

dragstart - 当鼠标开始拖放时被触发

drag - 当鼠标拖放过程当中,相似于mousemove事件

dragend - 当鼠标结束拖放时被触发

目标元素事件

dragenter - 当鼠标拖放进入到目标元素内被触发

dragover - 当鼠标到达目前元素被触发

为该事件增长event.preventDefault();

drop - 当鼠标实现拖放效果时被触发

默认状况下,该事件没有被触发

缘由 - HTML页面默认状况下,不容许拖放

称之为HTML页面的默认行为

解决 - 阻止页面的默认行为

事件对象event.preventDefault()方法

dragleave - 当鼠标拖放离开目标元素被触发

dataTransfer对象

做用 - 相似于window系统的剪切板的功能

功能

能够将源元素的信息(数据),存储在这里

将存储在该对象的源元素信息,提供给目标元素

方法

setData() - 设置(源元素)数据

在源元素事件中使用

getData() - 获取设置的数据

在目标元素事件中使用

clearData() - 清除(设置的)数据

全部的数据内容,存储在浏览器内存中

当使用完毕数据内容时,清除

setDragImage()方法

做用 - 修改拖放过程当中,鼠标跟随的图片效果

用法 - drag、dragstart等事件

注意 - 实际操做中,该方法几乎不用

Web Worker

基本内容

单线程与多线程

Worker能够模拟多线程的效果

定义 - 运行在后台的javascript

注意 - 不能使用DOM

在Worker中只能使用javascript中的ECMA

目前主流浏览器都支持Worker,除IE8以前

Worker提供API

检测当前浏览器是否支持Worker

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

说明当前浏览器支持Web Worker

}else{

说明当前浏览器不支持Web Worker

}

建立WebWorker对象

new Worker(worker文件)

Worker对象

onmessage事件

postMessage()方法

terminate()方法

Web存储API

基本内容

数据仓库 - 用于存储数据

HTML5存储系统

localStorage(本地存储) - 替代Cookie

sessionStorage(会话存储) - 替代Session(相似于内存)

sessionStorage

setItem(key,value)方法

做用 - 设置数据(新增|修改数据)

新增数据 - key值是新的

修改数据 - key值是存在的

参数 :key - 做为存储数据的标识(惟一,不可重复)

value - 存储的数据内容(number|string)

getItem(key)方法

做用 - 获取数据(读取数据)

参数 :key - 根据key获取对应的数据内容

返回值 - key对应的value值

key(index)方法

做用 - 根据索引值返回对应key

参数

index - 索引值

返回值 - 返回key值

removeItem(key)方法

做用 - 删除数据

参数

key - 根据key删除指定数据内容

clear()方法

做用 - 将存储系统的全部数据删除(清空)

length属性

做用 - 返回当前存储系统的数据个数

localStorage

提供的属性和方法与sessionStorage一致

storage事件

做用 - 实现多个窗口之间共享数据内容

问题：数据安全性低

目前除Safari浏览器支持该事件,其余全部浏览器都不支持

对于数据的操做

新增 - setItem()

查询 - getItem()

length属性

key(index)

删除 - removeItem()

clear()

修改

key(index) - key

getItem() - value

setItem(key,新value)

sessionStorage与localStorage

sessionStorage存储系统存储数据的特色

当浏览器窗口关闭时,数据所有丢失

当再次打开浏览器窗口时,数据不能使用

localStorage存储系统存储数据的特色

当浏览器窗口关闭时,数据依旧存储

当再次打开浏览器窗口时,数据继续使用

数据只能由用户删除

Web Socket(了解)

基本内容

socket - 是一种网络协议

网络协议 - SERVER&HTTP课程中的HTTP

WebSocket

表示在HTML5页面中容许支持socket协议

浏览器-服务器

使用的网络协议 - http协议

http协议的问题

短链接

无状态

WebSocket提供的API

建立WebSocket对象

var socket = new WebSocket(URL);

URL - 是以"ws://"开始的

建立Socket对象,创建链接

WebSocket对象的方法

send() - 向服务器端发送数据内容

close() - 关闭socket连接

WebSocket对象的事件

onmessage事件 - 当服务器端向客户端发送返回数据时被触发

onopen事件 - 当客户端与服务器端创建链接时被触发

完成初始化功能

onclose事件 - 当客户端与服务器端关闭连接时被触发

完成资源释放功能

WebSocket对象的属性

readyState属性 - 表示服务器端的通讯状态

CONNECTING(数字值为0)，表示正在链接。

OPEN(数字值为1)，表示已创建链接。

CLOSING(数字值为2)，表示正在关闭链接。

CLOSED(数字值为2)，表示已关闭链接。