一、總體變化
1、H5文檔結構
<!DOCTYPE html>
<html>
<head>
<title> 這是標題 </title>
<meta charset='utf-8' />
</head>
<body>
頁面內容部分
</body>
</html>2、語法變化
1）標籤不區分大小寫
2）元素可以省略結束標籤
3）允許省略屬性的屬性值 如：boolean值，有些則爲true，沒寫則爲false :<input checked /> 原來還需寫 checked="checked" ;
4）允許屬性值不使用引號
3、新增的常用結構性元素
1）section：定義文檔中的節。類似文章的段落。比如章節、頁眉、頁腳或文檔中 的其他部分。一般用於成節的內容，會在文檔流中開始一個新的節。
2）article：它是一個特殊的section標籤，它比section具有更明確的語義，它代表一個獨立的、完整的相關內容塊，可獨立於頁面其他內容使用。
3）nav：此標籤代表頁面的一個部分，表示頁面中導航鏈接的部分。
4）aside：它用來裝載非正文的內容，被視爲頁面裏一個單獨的部分。它包含的內容與頁面的主要內容是分開的，可以被刪除，而不會影響到網頁的內容、章節或是頁面所要傳達的信息。
5）hgroup：對網頁或區段section的標題元素(h1-h6)進行組合。
6）footer：定義是section 或文檔的頁腳，包含了與頁面、文章或是部分內容有關的信息
7）header：定義文檔的頁眉，通常是一些引導 和導航信息。它不侷限於寫在網頁頭部，也可以寫在網頁內容裏面。
8）figure：用於對元素進行組合。多用於圖片與圖片 描述組合
h5
4、新增的常用語義性元素：
1）mark:定義帶有記號的文本，需要突出顯示文本時使用 <mark>love</mark>2）progress:標籤定義運行 中的任務進度<progress value='23' max='100'></progress>
3）time：時間日期值<time>12:23</time>
4）details：規定了用戶可見的(open)或者隱藏的需求的補充細節,可配合<summary>這是會顯示的</summary> 不會 顯示的
5）datalist：定義了選項列表。請與input元素配合使用該元素，來定義input可能的值
<input list='browers'>
<datalist id='browers'>
<option value='ie'>
<option value='chrome'>
...
</datalist>6）ruby：定義ruby註釋，往往與<rt>和<rp>標籤一起使用
7）menu：菜單列表 (不大支持）
8）command：可以定義用戶可能調用 的命令(比如：單選按鈕、複選框或按鈕)--不大支持
5、廢除的相關元素
1）能用css代替的元素：basefont、big、center、font、s..2）不再使用frame框架：frameset、frame、noframes，只支持iframe
3）只有部分瀏覽器支持的元素：applet、blink...
4）其他：pre代替listing...
二、H5表單
1、新增的input輸入類型
1）email：定義用於輸入email地址的字段
<form action="#" method="get">
<input type='email' name='user_email'/>
<input type='submit' value='提交' /> --按鈕
</form>
2）url:定義用於輸入URL的字段
3）number：定義用於輸入數字的字段
4）range：定義用於精確值不重要的輸入數字的控件
5）DatePickers：date---定義date控件。month--定義month和year控件(不帶時區）。week--定義week和year控件。time定義用於輸入時間的控件。datetime：定義date和time控件，基於UTC時區。datetime-local--不帶時區
<form action="#" method="get"> //action值是URL，當確認按鈕被按下時，接受和處理表單數據的 URL；method--傳送數據的HTTP方法
<input type='date' /> --可以讓你自由 選擇年月日的控件
<input type='submit' value='提交' /> --按鈕
</form>6）search：定義用於輸入搜索字符串的文本字段
7）tel：定義用於輸入電話號碼的字段
8）color：定義拾色器
2、新增input屬性
1）autocomplete:規定<input>元素輸入字段是否應該啓用自動完成功能自動完成on/off 開啓關閉，開啓後會保存之前輸入的內容。當再次輸入時會自動顯示輸入過的
2）autofocus：規定當前頁面加載時<input>元素應該自動獲得 焦點
3）form：規定<input>元素 所屬的一個或多個表單。<input>可以放在外面，只要form屬性的值和<form>標籤的id一樣就行；這樣提交的action都是一樣的
新增的表單重寫屬性：formaction--規定當表單提交時處理輸入控件的文件的URL；
formenctype--規定當表單數據提交到服務器時如何編碼；
formmenthod--定義發送表單數據到action URL的HTTP方法；
formnovalidate--該屬性覆蓋<form>元素的novalidate屬性；
formtarget--規定表示提交表單後在哪裏顯示接收到響應的名稱或關鍵詞_blank新頁面；
除了formnovalidate屬性，其他屬性都是隻針對type="submit"和type="image"
4）新增的height和width屬性：規定<input>元素的寬高(只針對type="image")
5）list：屬性引用<datalist>元素，其中包含<input>元素的預定義選項
list="datalistId"--引用id爲datalistId的datalist(下拉列表)
6）新增的min、max、step屬性： min/max--輸入框所輸入的最小/大值；step--輸入框規定合法的數字間隔
7）multiple:屬性規定允許用戶輸入到<input>元素的多個值
8）pattern：規定用於驗證<input>元素的值的正則表達式
9）placeholder：規定可描述<input>字段預測值的簡短的提示信息
10）required：規定必須在提交表單之前填寫輸入字段
3、新增的form元素
1）datalist：用於爲輸入提供一個可選的列表，用戶可以直接選擇列表中的某一選項2）keygen:密鑰對生成器，能夠使用戶驗證更爲可靠。用戶提交表單時會生成兩個鍵，一個私鑰，一個公鑰，私鑰保存客戶端而公鑰會發送到服務端
3）output：用於瀏覽器中顯示計算結果或腳本輸出，包含完整的開始和結束標籤
<output name="">text</output>
4、新增的form屬性
1）autocomplete：當用於form元素時，則所有從屬與該form的元素都具有自動完成的功能；其中有默認不會開啓的元素(如密碼框），個別元素可自行設置
2）novalidate：用於提交表單時取消整個表單的驗證，即關閉對錶單內所有元素的有效檢查。個別元素可單獨設置
三、H5繪圖
Canvas元素概述：canvas是H5新增的專門用來繪製圖形的元素，通過Canvas技術，用戶可以在Web中繪製各種圖形。它是一塊無色透明的區域，只是一個容器，通過js可在 區域上任意繪圖
<canvas id="myCanvas" width="233" height="300">
您的瀏覽器不支持canvas元素(不支持 時顯示)
</canvas>繪製步驟：
A 在頁面中添加canvas，定義id屬性值以便調用
B 使用id尋找到元素 getElementById
C 通過canvas元素的getContext方法獲取 其上下文，創建Context對象，以獲取允許進行繪製的2D環境
var context=c.getContext("2d");
D 使用js腳本來進行繪製context.fillStyle="#f00"; //顏色填充樣式 context.fillRect(x,y,width,height); //繪製圖形(相對於畫布的位置)
1、繪製簡單圖形：參考：詳解
1）直線
beginPath()--定義了一個新的路徑繪製動作的開始
moveTo()--爲指定點創建了一個新的子路徑，這個點就變成了新的上下文點【起點】。
lineTo()--以上下文點爲起點，到方法參數中指定的點之間畫一條直線【終點】
stroke()--爲所畫的線條賦予顏色，並使其可見。如果沒有特別的指定顏色的話，默認爲黑色
相關屬性：lineWidth--直線的寬度、strokeStyle--直線的顏色、lineCap屬性--直線端點樣式： 1) butt(默認) 2) round 3)square
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext("2d"); //獲取2d場景
//畫直線
context.fillStyle='#ff0000'; //繪製樣式
//context.fillRect(50, 50, 50, 50);
context.beginPath(); //開始新的路徑繪製
context.moveTo(50, 50); //起點(x,y)
context.lineTo(150, 150); //終點(x,y)
context.lineWidth=10; //線條寬度
context.lineCap='round'; //端點樣式
context.strokeStyle='yellow';
context.stroke(); //使繪製的線條可見2）弧線和曲線
arcTo()--在畫布上創建介於兩個切線之間的弧/曲線
quadraticCur--繪製二次曲線，每條二次曲線要由上下文點，一個控制點和一個終止點來定義
bezierCurveTo()--繪製貝塞爾曲線使用此方法。每條貝塞爾曲線需要由上下文點、兩個 控制點和一個終止點來確定。由於貝塞爾曲線有兩個控制點，因此貝塞爾曲線可以比二次曲線更加的複雜多變
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext("2d"); //獲取2d場景
context.fillStyle='#ff0000'; //繪製樣式
//繪製弧線
context.beginPath(); //新的路徑
context.moveTo(20,20);
context.lineTo(100,20);
context.arcTo(150,20,150,70,50);
context.lineTo(150,120);
context.closePath();
context.stroke(); 3）繪製路徑：路徑是由多條子路徑連接構成的。每條子路徑的終止點就將作爲新的上下文點。 線條的連接樣式 1、miter--尖角(默認) 2、round--圓角 3、bevel--平角 利用lineJoin屬性設定
4）矩形：rect(x,y,width,height) 圓：arc(x, y, radius, startAngle, endAngle, anticlockwise);起始角度0，終止角度2*PI【0順1逆時針】 圖形的顏色填充：fillStyle屬性，默認黑色，用fill()完成填充
//圓角矩形
context.beginPath();
context.moveTo(250, 100);
context.arcTo(400, 100, 400, 400, 30); //(x1, y1, x2, y2, radius)
context.arcTo(400, 400, 100, 400, 30);
context.arcTo(100, 400, 100, 100, 30);
context.arcTo(100, 100, 400, 100, 30);
context.fillStyle='red';
context.fill();
context.stroke();
//繪製矩形
context.beginPath();
context.rect(150, 150, 40, 40); //(x, y, w, h)
context.fillStyle='blue'; //填充顏色
//陰影樣式--放在fill()方法之前
context.shadowColor='black'; //顏色
context.shadowBlur=20; //模糊度 0 顏色最深
context.shadowOffsetX=10; //陰影與圖形的水平距離
context.shadowOffsetY=23; //垂直距離
context.globalAlpha=0.3; //繪圖的圖形透明度0-1
context.fill();
context.stroke();//繪製圓
context.beginPath();
context.arc(300,300,50,0,2*Math.PI,0); //(x, y, radius, startAngle, endAngle, anticlockwise)
context.fillStyle='red';
context.fill();
context.stroke();
5）陰影 爲圖形添加陰影：shadowColor--陰影顏色 shadowBlur--陰影模糊度 shadowOffsetX/Y--設置或返回陰影與形狀的水平距離/垂直距離 透明度：globalAlpha屬性設置或返回繪圖的當前透明值(0-1)
6）線性漸變：1、createLinearGradient()創建canvasGradient對象 var grad=context.createLinearGradient(x1,y1,x2,y2);參數爲漸變的起點和終點 2、addColorStop方法定義色標的位置並上色 grad.addColorStop(position,color) 參數爲色標的相對位置(偏移量)
徑向漸變：1、createRadialGradient()創建對象 var grad=context.createRadialGradient(x1,y1,r1,x2,y2,r2); 兩個圓 2、addColorStop方法定義色標的位置並上色 grad.addColorStop(position,color) 參數爲色標的相對位置(偏移量)
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext("2d");
var clg=ctx.createLinearGradient(50,0, 200, 0); //水平漸變--類似拉一條直線漸變
clg.addColorStop(0, '#ff0000'); //紅綠藍漸變
clg.addColorStop(0.5,'#00ff00');
clg.addColorStop(1,'#0000ff');
ctx.fillStyle=clg;
//ctx.strokeStyle=grad;
ctx.fillRect(10, 10, 200, 200);
var crg=ctx.createRadialGradient(350,100,50, 350, 100,66); //徑向漸變--類似拉一條直線從圓心往外漸變
crg.addColorStop(0, '#000000'); //紅綠藍漸變
crg.addColorStop(0.5,'#ffffff');
crg.addColorStop(1,'#0000ff');
ctx.fillStyle=crg;
//ctx.strokeStyle=grad;
ctx.fillRect(230, 10, 200, 200);7）圖案填充：用上下文對象的createPattern()創建一個圖案填充對象--context.createPattern(image,type); 參數image爲圖片對象 type平鋪類型 爲repeat/repeat-x/repeat-y/no-repeat var pattern=context.createPattern(img,type); context.fillStyle=pattern;
2、繪製圖像
方法：1、context.drawImage(image, dx, dy[, dw][, dh]); 起止座標相對於canvas左上角 2、context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh); 對圖像實現裁剪之後再放置
3、繪製文本（參考：視頻詳解）
- 方法：context.fillText(text,x,y); 參數text是要繪製的文本
- 設置文本的字體、大小、樣式： 使用font屬性(normal、italic、bold)
- 文本顏色：fillStyle屬性設置
- 描繪文本邊緣：使用strokeText()替代fillText(),同時使用strokeStyle屬性替代fillStyle屬性
- 繪製文本對齊：textAlign屬性(start/end--從左到右排版，左/右對齊；left/right-- 左/右;center居中對齊
- 文本度量：measureText()
- 文本換行：創建一個自定義的函數
4、圖形的變換
1）移動座標空間：translate()將繪圖原點橫向和縱向的移動指定的距離(x,y),結果表現爲整張圖像的移動
2）旋轉座標空間：rotate(angle); 參數爲旋轉的弧度，整個canvas將以座標原點[由translate()確定的原點爲圓心]，進行旋轉
3）縮放圖形：scale(x,y); 參數爲橫/縱向的縮放比例，都是浮點數[1.0--不縮放；<1.0縮小；>1.0放大]
4）保存與恢復canvas狀態：save()、restore() 實現對座標變換狀態的保存與恢復【最後保存的狀態先恢復】
5、圖形的組合/裁切（參考：文本填充，圖形組合）
1）globalCompositeOperation 屬性：設置或返回如何將一個源(新的)圖像繪製到目標(已有的)圖像上【圖片的覆蓋】2）clip() 從原始畫布中剪切任意的形狀和尺寸：一旦剪切了某個區域，則所有之後的繪圖都會被限制在被剪切的區域內(不能訪問畫布上的其他區域)，但在裁切之前可通過save()進行保存，然後restore()恢復
四、H5音頻和視頻
1、播放音頻：
方式一
<audio src='horse.mp3' controls='controls'>
您的瀏覽器不支持audio元素
</audio> //control顯示控制按鍵
方式二(多種格式,防止不支持)
<audio controls='controls'>
<source src=' .ogg' type='audio/ogg'>
<source src=' .mps' type='audio/mpeg'>
您的瀏覽器不支持audio元素
</audio>
2、播放視頻：
方式一
<video src='movie.ogg' width='230' height='230' controls>
您的...
</video>方式二(類似音頻)
相關屬性：src、autoplay、duration...相關方法：
canPlayType() 檢測瀏覽器是否能播放指定的音頻/視頻類型，返回值爲 probably/maybe/""--瀏覽器最可能/也許/不支持 該音頻/視頻類型
load() 重新加載音頻/視頻元素(更改來源或其他設置後使用)
pause() 停止、暫停當前播放的音頻或視頻
play() 開始播放
相關事件：canplay、loadeddata、abort...