前端复习之HTML5

  HTML5 Day01：
   *概念：
     *HTML5之后，声明不在出现版本信息
     *HTML5永远不可能离开JavaScript。
     *HTML5在移动端支持好于PC端
   *HTML新表单：

     *input新类型：

1     *email类型 - 验证是否包含“@”
2     *url类型 - 验证是否包含"http://"
3     *tel类型 - 只在移动端显示
4     *number类型
5     *range类型
6     *date类型
7     *color类型

*表单新元素：

 1     *datalist元素 - 类似于select元素
 2         *datalist元素 - 预定义数据内容（option）
 3         *使用<input>元素的list属性
 4     *prograss元素 - 进度条
 5         *max - 设置最大值
 6         *value - 设置当前进度
 7     *meter元素 - 刻度
 8         *min、max - 最小最大值
 9          *value - 设置当前值
10         *low - 设置低预警
11     *output元素

*表单新属性：

1     *placeholder - 提供默认提示内容
2     *multiple - 允许输入多个值，多个值之间使用","
3     *autofocus - 自动获取焦点
4     *form - 允许表单元素定义在表单之外

*表单新验证
         *验证属性：

 1        *required属性
 2         *验证当前元素值是否为空
 3        *pattern属性
 4         *使用正则表达式验证当前元素是否匹配
 5         *注意 - 并不能验证当前元素值是否为空
 6        *min和max属性
 7         *验证当前元素最小值或最大值
 8         *一般适用于number、range
 9        *minlength和maxlength属性
10         *minlength - 验证当前元素值的最小长度
11            *输入值时，允许输入小于指定值
12            *提交表单时，验证元素值最小长度
13            *注意
14             *minlength并不是HTML5新属性
15         *maxlength - 验证当前元素值的最大长度
16            *输入值时，长度不能大于指定值
17        *validity属性
18         *表单验证HTML5提供一种有效状态
19         *有效状态通过validityState对象获取到
20         *validityState对象可通过.validity属性而得到

*验证（有效）状态：

 1     *validityState对象提供了一系列的有效状态
 2        *通过这些有效状态，进行判断
 3        *注意
 4         *所有验证状态必须配合上述的验证属性使用
 5        *验证状态
 6          *valid
 7            *作用 - 判断当前元素值是否正确
 8            *注意
 9             *该状态返回true，表示正确
10         *valueMissing
11            *作用 - 判断当前元素值是否为空
12            *用法 - 配合required属性使用
13         *typeMismatch
14            *作用 - 判断当前元素值的类型是否匹配
15            *用法 - 配合email、number、url等
16         *patterMismatch
17            *作用 - 判断当前元素值是否与指定正则表达式
18            匹配
19            *用法 - 配合pattern属性使用
20         *tooLong
21            *作用 - 判断当前元素值得长度是否正确
22            *用法 - 配合maxlength属性
23            *注意
24             *使用maxlength属性后，实际不可能出现长度大于maxlength的值
25             *toolLong很难出现这种情况
26         *rangeUnderflow
27            *作用 - 判断当前元素值是否小于min属性
28            *用法 - 配合min属性
29            *注意 - 并不能与max属性值进行比较
30         *stepMismatch
31            *作用 - 判断当前元素值是否与step设置相符
32            *用法 - 配合step使用
33            *注意 - 并不能与min或max属性值进行比较
34         *customError
35            *用法 - 配合setCustomValidity（）方法
36            *setCustomValidity（）方法
37             *作用 - 设置自定义的错误提示内容
38             *问题 - 使用该方法设置错误信息
39                 *当输入正确时，调用该方法将信息设置为空("")
40                 *不能使用上述有效状态的任何一种判断输入是否正确（所以状态）

 HTML5 Day02：
    *音频处理
    *视频处理

*Flash技术处理HTML页面中的视频内容
     *包含音频、动画、网页游戏等
     *特点：
   　　*浏览器原生不支持
   　　*性能不好
  　　 *智能移动端不支持
*HTML5 - 目前用于替代Flash技术的最好选择
     *几乎所有浏览器原生支持<vedio>元素
     *性能更好
     *支持智能移动端

*视频处理

 1 　　　　　　*<vedio>元素
 2                *如果当前浏览器不支持<video>元素
 3                   在<video>元素内编写提示内容
 4                *属性
 5                   *src - 引入视频文件的路径
 6                   *autoplay - 自动播放视频
 7               *使用<source>元素
 8               <vedio>
 9                 <source src="一种视频格式"/>
10                 <source src="一种视频格式"/>
11                 <source src="一种视频格式"/>
12               </vedio>

 1          *<video>支持的视频格式
 2             *MP4格式 - 目前比较主流
 3             *OGG格式 - 多用于移动端
 4             *WebM格式 - 目前唯一支持超高清格式 - 2015
 5                *HTML页面中支持超高清格式(HTML5)
 6                *由Google公司推出的
 7          *<video>元素的属性
 8             *src - 引入视频文件的路径
 9             *autoplay - 自动播放视频
10             *controls - 提供控制面板
11             *loop - 表示循环播放
12             *poster - 设置播放之前显示的图片
13             *width和height - 设置显示视频的宽度和高度
14             *preload - 预加载
15                 *auto - 自动加载
16                 *none - 不加载
17                 *metadata - 只加载视频的基本信息（不含视频）

 1         *高级内容
 2             *方法
 3                 *play() - 播放视频
 4                 *pause() - 暂停视频
 5                 *load() - 加载视频
 6                 *canPlayType() - 判断当前浏览器是否支持指定视频格式
 7             *事件
 8                 *play - 当前视频播放时被触发
 9                 *pause - 当视频暂停时被触发
10                 *ended - 当视频结束时被触发
11                 *error - 当视频错误时被触发
12                 *canplay - 不考虑整体情况下，只要能播放，就播放
13                 *canplaythrough - 考虑整体情况下，只要能播放就播放
14                 *progress - 表示视频加载的进度
15             *属性 - 用于判断
16                 *paused - 表示判断当前视频是否暂停
17                 *返回值Boolean值，true暂停，false播放
18                 *ended - 表示判断当前视频是否播放完毕
19                 *返回值Boolean值，true表示完毕
20                 *duration - 表示当前视频的时长
21                 *currentTime - 表示当前视频播放的位置

*音频处理

 1      *<audio>
 2          *第一种 - 只支持一种音频格式
 3             <audio src="路劲" controls></audio>
 4             auto /play/controls
 5          *第二种 - 同时引入多个音频格式
 6             <audio>
 7                <source src="一种音频格式"/>
 8                <source src="一种音频格式"/>
 9                <source src="一种音频格式"/>
10             </audio>
11         *<audio>元素支持音频格式
12             *MP3 - 目前最主流（mpeg音频解码器）
13             *OGG -           ogg
14             *WAV        wav

*Canvas(画布)
    *基本内容

 1      *简单来说，HTML5提供的新元素<canvas>
 2           *Canvas在HTML页面提供画布的功能
 3          *在画布中绘制各种图形
 4           *Canvas绘制的图形与HTML页面无关
 5             *无法通过DOM获取绘制的图形
 6          *无法weight绘制的图形绑定DOM事件
 7           *只能用Canvas提供的API
 8           *Canvas用途
 9          *在HTML页面中绘制图表（例如柱状图，饼状图）
10          *网页游戏 - Flash技术
11              *使用HTML5中的Canvas

 1      *如何使用Canvas
 2           *在HTML页面中定义<canvas>元素
 3           *在JavaScript代码中
 4          *获取<canvas>元素
 5              *使用width和height属性 - 没有问题
 6              *使用CSS样式
 7             *通过style属性设置 - 绘制图形被拉伸
 8             *通过style元素设置 - 按比例放大
 9          *创建画布对象
10              *getContext("2d")方法
11             *参数必须是"2d"或"3d"(目前只绘制2d效果)
12          *使用Canvas提供的API

 1      *绘制图形
 2          *绘制矩形
 3              *fillRect(x,y,width,height)
 4             *x和y - 绘制矩形的左上角的坐标值
 5             width和height - 矩形的宽度和高度
 6              *strokeRect(x,y,width,height) - 空心矩形
 7              *clearRect(x,y,width,height) - 清除指定区域的矩形
 8          *设置颜色
 9              *fillstyle - 设置填充颜色
10              *strokeStyle - 设置描边颜色
11              *globalAlpha - 设置透明度（0-1）
12          *渐变效果
13              * 线型渐变
14             createLinearGradient(x1,y1,x2,y2)
15                 *x1和y1 - 基准线的起点坐标
16                 *x2和y2 - 基准线的终点坐标
17              *扇形（射线）渐变
18             createRadiaGradient(x1,y1,r1,x2,y2,r2)
19                 *x1,y1，r1 - 第一个基准圆的元素坐标值，半径
20                 *x2,y2,r2 - 第二个基准圆的元素坐标值，半径
21              *设置渐变颜色
22             addColorStop(position，color)
23                 *position - 设置渐变颜色的位置（0-1）
24                 *color - 设置渐变颜色

HTML5 Day03：
  *Canvas
      *绘制图形

 1        *方法
 2             *fillText(text,x,t) - 实心文字
 3               *text - 绘制的文字内容
 4               *x和y - 绘制的坐标值
 5             *strokeText(text,x,t) - 空心文字
 6        *属性
 7             *font - 类似于CSS中的font属性
 8             *textAlign - 设置文字的水平方向对齐
 9                *left - 左对齐
10                *center - 水平居中
11                *right - 右对齐
12             *textBaseline - 设置文字的垂直方向对齐
13                *top - 顶部对齐
14                *middle - （垂直）居中对齐
15                *bottom - 底部对齐
16             *hanging - 悬挂基线
17             *alphaetic - 字母基线
18           *注意
19             *无论是水平方向还是垂直方向对齐，基准线对齐并不是文字对齐

1       *阴影效果
2          *shadowColor - 设置阴影颜色
3          *shadowOffsetX - 设置水平方向阴影（0-没有阴影，负值-阴影向左，正值-阴影向右）
4          *shadowOffsetY - 设置垂直方向阴影
5          *shadowBlur - 设置阴影的模糊程度

 1     *创建路劲
 2         *（标识）方法
 3             *beginPath() - 表示开始创建路径（必要）
 4             *closePath() - 表示结束创建路径
 5         *设置方法
 6             *Rect(x,y,width,height) - 设置矩形形状
 7                *x和y - 设置矩形的左上角坐标值
 8                *width和height - 设置矩形的宽度和高度
 9             *arc(x,y,radius,startAngle,endAngle,direction) -设置圆形形状
10                *x和y - 设置圆形的圆心坐标
11                *radius - 设置圆形的半径
12                *direction - 按照顺时针或逆时针绘制
13                *startAngle和endAngle - 设置圆形的起始和终点位置
14        *绘制方法
15             *stroke() - 绘制轮廓
16             *fill() - 绘制填充

1      *绘制线条（直线和折线）
2             *moveTo(x,y) - 设置这条线的起点坐标值
3             *lineTo(x,y) - 设置这条线的终点（折点）坐标值

 1     *设置线条
 2         *lineWidth - 设置线条的宽度
 3             *默认值1px
 4         *lineCap - 设置线条端点的形状
 5             *butt - 默认值-平直
 6             *round - 圆角
 7             *square - 正方向键帽
 8         *lineJoin - 设置两条线的交点
 9             *round - 圆角
10             *miter - 尖角（默认）
11             *bevel - 斜角
12         *miterLimit - 配合lineJoin使用
13             *lineJoin设置为miter时，该属性值设置尖角的延伸范围

*Canvas处理图片

 1   *绘制图片
 2         *drawImage(img,x,y) - 按照图片原大小加载
 3             *img - 当前加载（绘制）的图片
 4             *x和y - 绘制图片的坐标值（左上角）
 5         *drawImage(img,x,y,width,height) - 按照指定大小加载图片
 6   *加载图片
 7         *img - 当前加载（绘制）的图片
 8         *x和y - 绘制图片的坐标值（左上角）
 9         *width、height - 图片宽高
10            *注意
11         *必须保证图片加载（onload）完毕后，再来绘制
12   *平铺图片
13             *createPattern(image,type)
14              *type - 平铺方式
15                  *repeat、no-repeat、repeat-x、repeat-y
16           *注意
17         *必须加载先（onload()）
18   *切割图片
19         *clip() - 切割（按创建路径方法使用）
20         *方法-context.beginPath();context.rect()或arc();context.clip();
21   *画布方法
22         *scale() - 缩放
23             *x - 表示水平方向的缩放
24             *y - 表示垂直方向的缩放
25             *参数的取值
26             *1：不缩放
27             *<1：缩小
28             *>1：放大
29         *translate(x,y) - 重新定位（x,y）
30             *x和y：新的坐标
31         *rotate(旋转角度) - 旋转当前画布
32             *公式：degrees*Math.PI/180
33         *save() - 保存当前的画布属性、状态
34         *restore（） - 回复画布属性、状态

*Chart.js - Canvas的js库

 1 *Chart.js - Canvas的js库
 2         *作用 - 提供各种图表
 3         *如何使用
 4              *在HTML页面中映入Chart.js文件
 5         *在HTML页面中定义<canvas>元素
 6         *在JavaScript代码中
 7             *获取<canvas>元素
 8             *创建画布对象 - var context=canvas.getContext("2d")
 9             *通过画布对象，创建Chart对象var chart=new Chart(context)
10             *利用Chart对象调用API方法
11                var data=[];chart.Pie(data);
12         *提供6种图表
13             *柱状图 - Bar(data,options)
14             *饼状图 - new Chart(ctx).Pie(data,options)
15             *曲线图 - Line()
16             *环形图 - Doughnut()
17             *雷达图 - Radar()
18             *极地区域图 - PolarArea()

 HTML Day04：
 *SVG

 1      *基本内容
 2            *svg并不属于HTML5专有内容-HTML5提供有关svg原生的内容
 3            *svg简单说就是矢量图
 4            *后缀名“.svg”
 5            *svg使用的是XML语法
 6      *概念
 7          *svg是一种使用XML技术描述二维图形的语言
 8          *svg特点
 9            *svg绘制图形可以被搜索引擎抓取
10            *svg在图片质量不下降的情况下，被放大

 1    *svg与canvas区别
 2       *svg
 3          - 不依赖分辨率
 4          - 支持事件处理器
 5          - 最适合带有大型渲染区域的应用程序
 6          - 不适合游戏
 7       *canvas
 8          - 依赖分辨率
 9          - 不支持事件处理器
10          - 能够以“.png”或“.jpg”格式保存结果图形
11          - 最适合图形密集型游戏
12    *用途
13         *网页中的一些小的图标
14         *网页中的动态特效

 1  *绘制图形
 2      *矩形元素
 3           <rect x="" y="" width="" height =""/>
 4      *圆形元素
 5         <circle cx="" cy="" r=""/>
 6      *椭圆元素
 7         <ellipse cx="" cy="" rx="" ry=""/>
 8      *直线元素
 9         <line x1="" y1="" x2="" y2=""/>
10      *折线元素
11         <polyline points="起点x，起点Y 折点x，折点y 终点x,终点y" />
12            *points - 设置起点折点终点，xy之间“，”，多点之间用“ ”
13         *折线的特点 - 默认将折线中的区域（起点到终点），
14                     默认提供黑色（改变fill="white"
15      *多边形元素
16         <polygon points=  />

 1  *特效元素
 2     *渐变
 3         *线型渐变 - <linearGradient>定义在<defs>元素中
 4            *offset - 渐变颜色的位置
 5            *stop-color 渐变颜色
 6            *stop-opacity - 设置渐变颜色的透明度
 7          <svg><defs> <linearGradient x1="%"y1=""x2=""y2="">
 8                <stop offset="%"stop-color="red"/>
 9             <stop offset=""stop-color="green"/>
10             <stop offset=""stop-color="blue"/>
11         <linearGradient/></defs></svg>
12         *放射性渐变 - <radialGradient>
13     *滤镜 - 高斯模糊
14         *滤镜使用<filter>元素
15         *<feGaussianBlur>元素 - 高斯模糊
16             *in="SourceGraphic"
17             *stdDeviation - 设置模糊程度
18         *注意 - 定义在<defs>元素中

*TWO.js

 1   *基本内容
 2         *js库介绍
 3               *three.js - 专门用于绘制三维图形
 4               *two.js - 专门用于绘制二维图形
 5        *two.js支持的格式
 6           *svg - 默认
 7           *Canvas -
 8           *WebGL - 专门用于绘制图像
 9        *如何使用js库
10         *在HTML页面中引入two.js文件
11         *在HTML页面中定义容器(<div>)
12         *在JavaScript代码中
13            *获取HTML中的容器
14            *创建two对象，讲该对象添加到容器中
15             new Two(params).appendTo(Element);
16            *使用two.js提供的API方法进行绘制
17             *利用two.js提供的方法设置图像
18             *利用update()方法进行绘制
19         *创建two对象
20            *构造器 - new Two (params)
21            *params参数 - 设置当前对象信息
22               *type - 设置当前使用格式
23             　　*svg - 默认值
24             　　*canvas
25             　　*webgl
26             *width和height - 宽高
27             *fullscreen - 设置是否全屏
28            　　 *boolean值，true - 全屏
29            *设置样式
30               *fill
31               *stroke
32               *linewidth
33            *方法
34               *makeLine() - 线条
35               *makeCircle() -
36               *makeEllipse() - 椭圆
37               *makePolygon() - 多边形
38               *makeStar() - 星
39               *makeRectangle() - 矩形
40            *分组操作
41               *var group=two.makeGropu(objects);
42            *动画方法
43               *update() - 更新动画
44               *play() - 添加动画（循环）
45               *pause() - 删除动画
46         *设置绘制图形的样式
47            *调用Two对象的绘制方法绘制图形时，返回该图形对象
48            *通过该图形对象，设置相关属性值 

 1   *实际开发中
 2      *多用svg
 3         *不失真
 4         *可被搜索
 5         *页面优化 - 减少外部链接
 6            *<a href= "">
 7            *<img src="">
 8      *Canvas - HTML绘制图形
 9         *实际运行中，是以图片方式出现（。png）
10            *不能被搜索引擎抓取
11            *放大后失真
12         *游戏版本
13            *480*680
14            *1024*768
15        *svg内容
16           *内容量大
17         　　*静态绘制图形
18         　　*动态动画效果
19         　　*专门提供事件
20         *网上关于svg的资料很少（没有书籍）
21         *svg的规范（w3c英文）
22        *svg或canvas在页面中定义
23           *是只能定义一个元素，还是可以多个元素？
24         　　　　*在一个HTML页面中可以定义多个<svg>或<canvas>元素
25           *svg还是canvas都是允许同时定义（绘制）多个图形
26        *在实际中开发中的使用
27           *使用率不高
28           *svg图片一般都是由UI设计师完成
29           *svg即使是由我们自己来设计
30        　　　　 *目前网络上很多专门提供现成的svg图片的网站
31           *使用js库

 HTML5 Day05:
     *Geolocation(地理定位)

 1 *基站定位
 2        *地理定位 - 地球经度纬度的相交点
 3        *实现地理定位的方式
 4           *GPS - 美国的，依靠卫星定位
 5           *北斗定位 - 纯国产，惯性定位和卫星技术
 6           *基站定位 - 移动运营商创建基站（提供信号源）
 7           *基于互联网 - IP地址（PC端和移动端）
 8           *目前很多浏览器都具有定位功能
 9     *HTML5中地理定位
10        *地理定位功能并不是属于HTML5转悠内容
11           *由Google公司提供
12           *Google Map产品
13         *中国 - 国内不能使用Google公司所有服务和产品
14           *百度地图和高德地图
15     *百度地图
16        *地址 - http://developer.baidu.com/map/
17     *如何使用百度地图
18        *在HTML页面中
19           *引入百度地图的js
20         <script type="text/javascript"
21              src="http://api.map.baidu.com/apiv=2.0&ak=ShVq3Rof0jD6GhFyTBkSqxegqC2jhbBX">
22         </script>
23           *定义显示地图的容器
24         <div id="" style=""></div>
25        *在JavaScript代码中
26           *创建百度地图的Map对象
27         var map =new BMap.Map(容器id);
28           *进行地图的初始化
29         map.centerAndZoom();
30     *百度地图的组件
31        *核心类 - Map类
32           *构造器 - BMap.Map(容器ID)；
33           *方法
34        　　 *centerAndZoom() - 初始化方法
35        　　 *addControl() - 添加控件
36         　　*addOverlay() - 添加标注
37        *Control类 - 控件类
38           *ScaleControl类 - 表示地图的比例尺
39         　　*构造器 - 创建比例尺对象
40           *NavigationControl类 - 表示移动缩放控件
41        　　 *构造器 - 创建移动缩放控件
42        *Overlay类 - 遮盖物类
43           *Maker类 - 表示地图的一个标注
44         　　*构造器 - Maker(point)
45        *Point类 - 标注类

*拖放（拖拽）API

 1   * 实现拖拽效果
 2       * 要拖拽的文件 - 源元素
 3       * 拖拽到哪去 - 目标元素
 4   * 目前实现拖拽效果
 5       * 使用原生DOM就能实现 - 最麻烦
 6       * 使用jQuery的插件 - 拖拽效果
 7       * HTML5中提供的拖拽功能
 8     * HTML5拖拽
 9       * 源元素事件
10         * dragstart - 当鼠标开始拖放时被触放
11         * drag -  当鼠标拖放过程中，类似于mousemove事件
12         * dragend - 当鼠标结束拖放时被触放
13       * 目标元素事件
14         * dragenter - 当鼠标拖放进入到目标元素内被触发
15         * dragover - 当鼠标到达目标元素被触发
16         * drop - 当鼠标实现拖放效果被触发
17           * 默认情况下，该事件没有被触发
18         　　　　* 原因 - html页面默认情况下，不允许拖放
19         　　　　* 解决 - 阻止页面的默认行为
20           　　　　* 事件对象event.preventDefault()方法
21         * dragleave - 当鼠标拖放离开目标元素被触发
22       * dataTransfer对象
23         * 作用 - 类似于window系统的剪切板的功能
24         * 功能
25           * 可以将源元素的信息（数据），存储在这里
26           * 将存储在该对象的源元素信息，提供给目标元素
27         * 方法
28           * setData() - 设置（源元素）数据
29         　　　　* 在源元素事件中使用
30           * getData() - 获取设置的数据
31        　　　　 * 在目标元素事件中使用
32           * clearData() - 清除（设置的数据）
33         　　　　* 所有的数据内容，存储在浏览器内存中
34       * setDragImage()
35         * 作用 - 修改拖放过程中，鼠标跟随的图片效果
36         * 用法 - drag、dragstart等事件
37         * 注意 - 实际操作中，该方法几乎不用

HTML5 DAY06：

* Web Worker

 1 * 基本内容
 2      * 单线程与多线程
 3        * Worker可以模拟多线程的效果
 4      * 定义 - 运行在后台的JavaScript
 5      * 注意 - 不能访问页面和使用DOM
 6        * 在Worker中只能使用JavaScript中的ECMA
 7        * 目前主流浏览器都支持Worker，除IE8之前
 8 * Worker提供API
 9      * 检测当前浏览器是否支持Worker
10       if(typeof(Worker)!=='undefined'){
11         说明当前浏览器支持Web Worker
12       }else{
13         说明当前浏览器不支持Web Worker
14       }
15      * 创建WebWorker对象
16       new Worker(worker文件)
17      * Worker对象
18        * onmessage事件
19        * postMessage()方法
20        * terminate()方法

* Web存储API

 1  * 基本内容
 2      * 数据仓库 - 用于存储数据
 3      * HTML5存储系统
 4        * localStorage(本地存储) - 替代 Cookie
 5        * sessionStorage(会话存储) - 替代Session（类似于内存）
 6      * sessionStorage
 7        * setItem(key,value)方法
 8          * 作用 - 设置数据(新增数据)
 9          * 参数 -
10              * key - 作为存储数据的标识（唯一，不可重复）
11          * vakue - 存储的数据内容（number|string）
12        * getItem(key)方法
13          * 作用 - 获取参数（读取数据）
14          * 参数
15           * key - 根据key获取对应的数据内容
16          * 返回值 - key对应的value
17        * key（index）方法
18        * remove(key)方法
19          * 作用 - 删除数据
20          * 参数
21          * key - 根据key删除指定数据内容
22        * clear()方法
23          * 作用 - 将存储系统的所有数据删除（清空）
24        * length属性
25          * 作用 - 返回当前存储系统的数据个数
26      *localStorage
27        *
28      * 对于数据的操作
29        * 新增 - setItem()
30        * 查询 - getItem()
31          * length属性
32          * key(index)
33        * 删除
34          * key(index) - key
35          * getItem() - value
36          * setItem(key,新value)
37        * sessionStorage与localStorage
38          * sessionStorage存储系统存储数据的特点
39           * 当浏览器窗口关闭时，数据全部丢书
40           * 当再次打开浏览器窗口时，数据不能使用
41          * localStorage存储
42          * 当浏览器窗口关闭时，数据依旧使用
43         * 当再次打开浏览器窗口时，数据继续使用
44         * 数据只能由用户删除

* Web Socket

 1  * 基本内容
 2      * socket - 是一种网络协议
 3        * 网络协议 - SERVER&HTTP课程中的http
 4      * Websocket
 5        * 表示在HTML5页面中允许支持socket协议
 6      * 浏览器-服务器
 7        * 使用的网络协议 - http协议
 8        * http协议的问题
 9          *短连接
10          *无状态