前端複習之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          *無狀態