1、畫布 -- 非常重要，H5能夠展現優秀圖表的源泉
I、定義畫布元素
<canvas id="" width="" heght="">
II、js繪製圖像
a、獲取元素 getElement
b、初始化Context - element.getContext("2d");
c、繪製
i、繪製路徑（多邊形） moveTo lineTo stroke
ii、繪製矩形 fillRect
iii、繪製圓形 arc
iv、字符 fillText
v、增加圖形 drawImage
vi、漸變 （徑向|線性） createLinearGradient/createRadialGradient
Canvas 座標體系是，按照 左上角位置(x,y) 右下角位置(x,y)
畫布是透明的，可以放到頁面任何一個元素之上，這樣就可以實現任何界面組合功能；如果需要樣式，可以指定border/background 等等
III、矢量圖形
H5可以嵌入矢量圖形
<svg >
<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>
2、存儲增強 - 本地存儲 | 本地數據庫 | 離線數據
-- 特別是本地存儲和本地數據庫，比原先的cookie功能增加了非常多的可用性；同cookie一樣，localStorage/sessionStorage也是window的對象。本地存儲特別是對移動端，減少了cookie來回交互的帶寬流量(主要指HTTP頭)
I、本地存儲 localStorage | sessionStorage
存儲在本地瀏覽器中，每個域(domain)可以存 5M
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 對象!
// 一些代碼.....
}
else
{
// 抱歉! 不支持 web 存儲。
}
a、存儲方式：
因爲是一個對象，所以可以用對象的存儲方式 . []
或者數組訪問 localStorage[key]= value; 設置和獲取值;也可以對象訪問 localStorage.key = value
同時也提供了 方法操作
可以直接設置值 localStorage.setItem(key, value);
b、數據處理
localStorage.length -- 存儲的數據數目
localStorage.key(index);
localStorage.removeItem(key);
localStorage.clear();
c、存儲內容
雖然是基本的 key-value，只能在localStorage存儲字符串；但可以通過存儲json字符串，來實現數組、對象等存儲
localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
stickiesArray = JSON.parse(localStorage["stickiesArray"]);
localStorage VS sessionStorage
屬性方法都是一樣的，區別是 sessionStorage 是會話級別的，關閉了瀏覽器窗口存儲的數據就丟失了
II、瀏覽器提供了一個本地的 SQL 數據庫
a、打開數據庫
var db = openDatabase('databasename','version','desc',size,callback);
--有則打開，沒有則創建
b、執行操作
db.transaction(function (tx){
tx.executeSql(sql);
});
sql也可以使用動態綁定的方式
c、獲取數據
tx.executeSql(sql, [], function(tx,results){
results.rows.item(i).column
III、離線文件
緩存文件 *.appcache 包含內容，讓瀏覽器緩存服務器的一些文件
a、CACHE MANIFEST - 緩存內容
CACHE MANIFEST
/js.js
/css.css
b、NETWORK -- 需要屏蔽的內容
NETWORK:
*
c、FALLBACK -- 失敗（無法訪問）時替換
FALLBACK
/html/ /offline.xml
使用緩存的注意事項
I、HTTP 響應時消息頭需要設置成 MME-type = "text/cache-manifest"
II、文件更新後，客戶端不會自動更新，必須 更新manifest 文件
3、多線程 - Web Workers
通過 WebWorker是可以獨立執行一些 腳本，在主線程之外。不過這個線程有限制
不能使用 DOM 的引用；發送給工作線程的對象也是拷貝的副本；可以訪問本地存儲，也可以使用ajax請求數據
I、啓動線程
var worker = new Worker("worker.js"); -- 就能啓動一個 Web工作線程
II、消息交互
worker.postMessage("ping"); -- 發送消息，可以發送任意對象，但不能發送函數指針，防止有DOM應用
worker.onmessage = function(event) -- 等待worker 線程完成 計算任務後，發送消息回來
worker.onerror = function(error) -- worker線程 發送錯誤回來
III、停止線程
worker.terminate -- 終止工程線程
Web工作線程有一個全局函數，可以引用其他的js文件
importScripts
(
"xx.js",
"xxx.js"
)
工程線程中可以使用setInterval 間隔執行。去完成一些定時任務，比如喂狗；一般用工作線程，做一些CPU計算任務。
Web 工作線程中也可以創建子線程
主線程
worker.postMessage("ping");
worker.onmessage = function(event) {
var message = "Worker " + " says " + event.data;
document.getElementById("output").innerHTML = message;
// var worker = event.target; 可以獲取worker線程的引用
}
worker.js -- 工作Web線程
onmessage = pingpong; //onmessage 是 Worker的屬性
function pingpong(event) {
if (event.data == "ping") {
postMessage("pong");
}
}
4、交互事件模式的變化 SSE | WebSocket
傳統服務器和客戶端交互，主要是通過 拉 模式，客戶端通過 整頁定時刷新；或者利用 ajax 部分頁面定時請求刷新的方式；這種方式的最大問題是，對服務器資源的消耗，所有流程都要通過端口調度來分發處理。
H5新增了模式， 和消息中間件一樣 提供了 推 模式，即一旦建立連接後，數據由服務端推送到客戶端，要實現這部分功能至少需要如下基礎：
a、服務器和客戶端(瀏覽器) 要保持長鏈接 - HTTP1.1 / HTTP2.0 keep-alive
b、服務器要不斷給客戶端發送數據 - 佔用線程
一般服務器給客戶端的響應有幾種方式，一種是基於 IO的，請求的Servlet 給客戶端發送數據；另一種基於NIO，只有一個線程，服務端輪詢給客戶端發送數據；通過定時器不斷髮送數據
I、SSE - 服務端推送事件
基於HTTP協議之上的一個 文本協議，所以一般用來傳遞 文本數據（當然也可以傳2進制數據）
a、客戶端
i、打開一個請求連接 -- 對應的有 open事件
var source=new EventSource("demo_sse.php");
source 有一個 readyState屬性 0 正在鏈接 1 已建立連接 2 鏈接關閉
ii、接收數據 - message 事件 / error 事件
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
event.data | event.origin (URL協議部分) | lastEventId --服務器發送的數據編號可選
iii、關閉連接 - cloase
source.close
iv、自定義事件
source.addEventListener("my",function(event){},false);
--所有事件都是JS的兩種方式： onXXX 或者通過 addEventListener("XXX");
b、服務端
i、發送HTTP消息頭
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
ii、發送數據
data: message \n\n (雙回車作爲結束)
id: key (數據編號，可選）
event: my (自定義事件時使用, 可選）
retry: 1000 (服務端超時時間，重新請求，可選）
服務端需要通過定時器，定時發送數據
II、WebSocket - 新增的基於TCP 的交互協議
基於HTTP，只有單向的通訊，即瀏覽器客戶端向服務端請求；如果需要有交互的就比較麻煩了；H5新增了，基於TCP的雙向交互協議，是2進制協議。
a、客戶端
i、打開WebSocket -- 對應有 open事件
var ws = new WebSocket("ws://localhost:9998/echo");
ii、發送數據
ws.send
iii、接收數據 - 對應message 事件 | onerror
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("數據已接收...");
};
iv、關閉 - 對應close事件
ws.onclose = function()
b、服務端
JavaEE7開始支持，tomcat和jetty都是7 以後支持
5、新增的元素
I、語義元素
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>
II、數學運算符
math ...
III、拖拽功能
拖拽功能幾步驟
a、設置元素可以拖拽
<div draggable="true">
b、拖拽的內容是什麼
ondragstar 屬性定義拖拽內容
ev.dataTransefer.setData
c、拖拽目的地
ondragover
獲取拖拽內容 ev.dataTransfer.getData
然後放置位置 ev.target.appendchild
6、表單增強
I、表單元素
a、datalist -- 在Input基礎上，提供類似 搜索的下來列表功能
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
b、keygen - 密鑰和公鑰
<keygen> 元素的作用是提供一種驗證用戶的可靠方法。
<keygen>標籤規定用於表單的密鑰對生成器字段。
當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。
私鑰（private key）存儲於客戶端，公鑰（public key）則被髮送到服務器。公鑰可用於之後驗證用戶的客戶端證書（client certificate）。
<form action="demo_keygen.asp" method="get">
用戶名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
c、output - 用於表達式計算輸出
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
II、input屬性
a、顏色拾色器
<input type="color">
b、日期類型
<input type="datetime"> 日期
<input type="datetime-local"> 日期+時間
<input type="month"> 年月
<input type="time"> 時間
<input type="week"> 年周
c、email地址
<input type="email>
d、數字
<input type="number" name="quantity" min="1" max="5"> - 數字 + 上下箭頭
<input type="range" name="quantity" min="1" max="5"> - 數字 + 橫向滾動條
e、搜索
<input type="search"> -- 站點搜索？？？
f、url
<input type="url">
III、表單屬性
autocomplete -- 主要是瀏覽器系統記憶 以前輸入的值
novalidate -- 不校驗表單域
autofocus -- 自動獲取焦點/默認焦點
form屬性 -- 如果指定了 form屬性，則該表單域無論是否在此表單中，都是該表單域的
formaction -- 覆蓋 以前HTML 默認的 action 屬性
formenctype -- 對提交到表單的數據進行編碼（主要是特殊字符）
formmethod -- 覆蓋 原先 method 屬性(get/post)
formnovalidate -- 覆蓋前面的 novalidate 屬性
formtarget -- 覆蓋 原先的target屬性，新彈出框顯示提交後的結果
input 中 image 類型的 height/width屬性
前面表單元素 的 datalist / list
multiple 屬性，可以選擇多個值，特別是 input /file 類型非常實用
pattern 檢驗 input 元素的值
placeholder -- 灰化的默認值，特別是搜索導航框裏面出現
required -- 提交之前必須有輸入
7、多媒體
I、視頻
<video controls -- 提供播放器的控件
autoplay
src-"xx.mp4"
width height
poster -- 不播放時顯示的圖片
loop -- 循環
preload
id>
三種視屏格式
容器MP4 (H264)
容器Ogg .ogv
容器webm .webm
解決這個問題
取消掉 vdeio 的 src 資源，使用子元素<source src type codecs> 提供多個編碼視屏供選擇
對於其他格式的非HTML5熟悉的，或者早期的flash 可以使用 <object>
II、音頻
音頻同樣有多種格式
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
8、地理定位
主要是返回經緯度，因爲涉及隱私，很多瀏覽器或者用戶不支持
var x=document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
x.innerHTML="該瀏覽器不支持獲取地理位置。";
}
}
function showPosition(position) {
x.innerHTML="緯度: " + position.coords.latitude +
"<br>經度: " + position.coords.longitude;
}