1、HTML5 簡介 HTML5 是最新的 HTML 標準，他是萬維網的核心語言、標準通用標記語言下的一個應用“超文本標記語言”。 HTML 的上一個標準 HTML4.01 誕生於 1999年，他的第一代標準誕生於 1995年，自此 Web 世界經歷了巨變，在 HTML4.01 中提出了網頁結構與表

1、HTML5 簡介

　　HTML5 是最新的 HTML 標準，他是萬維網的核心語言、標準通用標記語言下的一個應用“超文本標記語言”。

　　HTML 的上一個標準 HTML4.01 誕生於 1999年，他的第一代標準誕生於 1995年，自此 Web 世界經歷了巨變，在 HTML4.01 中提出了網頁結構與表現相分離的原則，並提供了很多新特性，至此 HTML 的發展遇到瓶頸，停滯不前。

　　HTML5 的第一份草案在 2004年首次被 WHATWG 提交到 W3C，WHATWG 指 Web Hypertext Application Technology Working Group，即 Web 超文本應用技術工作組，他是一些互聯網公司聯合形成的組織，致力於 Web 表單和應用程式，而 W3C 卻致力於 XHTML2.0 標準的制定，顯然 XHTML2.0 並不是 HTML 所期望的，於是在 2006年，雙方決定進行合作，共同創建一個新版本的 HTML。直到 2007年該草案被 W3C 正式接納，併成立了新的 HTML 工作團隊，2008年正式發佈了第一份草案，最終在 2014年10月29號，萬維網聯盟經過接近 8年的艱苦努力，宣佈該標準規範制定完成，被列為 W3C 推薦標準。可以說 HTML5 是 W3C 與 WHATWG 合作的結果。

　　為 HTML5 建立的一些規則：新特性應該基於 HTML、CSS、DOM 以及 JavaScript。減少對外部插件的需求（比如 Flash）。更優秀的錯誤處理。更多取代腳本的標記。HTML5 應該獨立於設備。開發進程應對公眾透明。

　　W3C 首席執行官 Jeff Jaffe 博士表示：“HTML5 將推動 Web 進入新的時代。不久以前，Web 還只是上網看一些基礎文檔，而如今，Web 是一個極大豐富的平臺。我們已經進入一個穩定階段，每個人都可以按照標準行事，並且可用於所有瀏覽器。如果我們不能攜起手來，就不會有統一的 Web。”　

　　HTML5 是開放 Web 標準的基石，它是一個完整的編程環境，適用於跨平臺應用程式、視頻和動畫、圖形、風格、排版和其它數字內容發佈工具、廣泛的網路功能等等。接下來，W3C 將致力於開發用於實時通信、電子支付、應用開發等方面的標準規範，還會創建一系列的隱私、安全防護措施。

　　HTML5 的設計目的是為了在移動設備上支持多媒體。比如 video、audio 和 canvas 標記。HTML5 還引進了新的功能，可以真正改變用戶與文檔的交互方式，為桌面和移動平臺帶來無縫銜接的豐富內容。

　　HTML5 的新特性：

　　　　①、用於繪畫的 canvas 元素。

　　　　②、用於媒介回放的 video 和 audio 元素。

　　　　③、對本地離線存儲的更好的支持。

　　　　④、本地 SQL 數據。

　　　　④、新的特殊內容元素，比如 article、header、nav、footer、section。

　　　　⑥、新的表單控制項，比如 calendar、date、time、email、url、search。

　　(1)、HTML5 圖形

　　使用 HTML5 可以簡單的繪製圖形：

　　　　可以使用 <canvas> 元素，內聯 SVG。

　　　　CSS3 提供了一些新選擇器，新屬性。

　　　　HTML5 使用 CSS3 可以實現 2D/3D 轉換，動畫，圓角、陰影效果，還可以下載字體。

　　(2)、HTML5 多媒體

　　使用 HTML5 可以簡單的在網頁中播放音頻和視頻：

　　　　<audio> 可用於播放音頻，<video> 可用於播放視頻。

　　(3)、HTML5 應用

　　使用 HTML5 你可以簡單地開發應用：

　　　　本地數據存儲，本地 SQL 數據，訪問本地文件，緩存引用。

　　　　在移動設備開發 HTML5 應用只有兩種方法，要不就是全使用 HTML5 的語法，要不就是僅使用 JavaScript 引擎。

　　　　基於 HTML5 開發 APP 應用。

　　　　JavaScript 引擎的構建方法讓製作手機網頁游戲成為可能。

　　　　XMLHttpRequest2 可以解決跨域等問題，能幫助 Web 應用和網站在多樣化的環境中更快速的工作。

　　(4)、HTML5 語義特性

　　HTML5 添加了很多語義元素如：

　　　　header，nav，main，section，footer，aside，article，figure，這8個新的語義元素都為塊級元素。

　　　　HTML5 賦予網頁更好的意義和結構。

　　(5)、HTML5 表單

　　HTML5 添加了一些新表單元素，新屬性和新輸入類型，還增加了表單自動驗證。

　　最新版本的 IE9+，Chrome、Firefox、Safari 以及 Opera 支持某些 HTML5 特性。IE8 以及更早版本的 IE 瀏覽器都不支持 HTML5 新特性。

2、HTML5 Audio 和 Video

　　直到現在，仍然不存在一項旨在網頁上播放音頻和視頻的標準。大多數音頻和視頻是通過插件（比如 Flash）來播放的。然而，並非所有瀏覽器都擁有同樣的插件。HTML5 規定了在網頁上嵌入音頻和視頻元素的標準，即使用 <audio> 和 <video> 元素。HTML5 提供了播放音頻和視頻文件的標準。

　　(1)、HTML5 播放音頻

　　如需播放音頻，則使用以下代碼：

1 <audio controls autoplay>
2     <source src="audio/彼岸.mp3" type="audio/mpeg">
3     <source src="audio/平凡之路.ogg" type="audio/ogg">
4 </audio>

　　(2)、HTML5 播放視頻

　　如需播放視頻，則使用以下代碼：

1 <video width="320px" height="240px" controls autoplay>
2     <source src="video/預謀.mp4" type="video/mp4">
3     <source src="video/如果你也聽說.webm" type="video/webm">
4 </video>

　　controls 屬性供添加播放、暫停和音量控制項。autoplay 屬性則在準備就緒後馬上播放。

　　<audio> 元素定義音頻。<video> 元素定義視頻。

　　<source> 元素允許指定可替換的多媒體資源，以確保在所有瀏覽器都都能正常運行，瀏覽器將使用他支持的媒體格式。

　　(3)、Video DOM

　　<video> 元素元素還提供了 width 和 height 屬性來控制視頻的尺寸，如果設置了寬度和高度，則所需的視頻空間會在頁面載入時保留。如果沒有設置這些屬性，瀏覽器並不知道視頻的大小，就不能在載入時保留特定的空間，頁面則會根據原始視頻的大小而改變，這一點需要註意。

　　<video> 元素可以使用 DOM 進行控制。

　　<video> 元素同樣擁有方法、屬性和事件，可以使用 JS 進行控制。其中的方法有用於播放、暫停以及載入等。其中的屬性（比如時長、音量等）可以被讀取或設置。其中的 DOM 事件能夠通知你，比如 <video> 元素開始播放、已暫停，已停止，等等。

　　為視頻創建簡單的播放/暫停以及調整尺寸的控制項：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Video DOM</title>
 6 <style>
 7 </style>
 8 </head>
 9 <body>
10 <div style="text-align:center;">
11     <button onclick="playPause()">播放/暫停</button>
12     <button onclick="showBig()">放大</button>
13     <button onclick="showSmall()">縮小</button>
14     <button onclick="showNormal()">正常</button>
15     <br/><br/>
16 
17     <video id="mp4" width="420px" height="240px">
18         <source src="video/預謀.mp4" type="video/mp4">
19         <source src="video/如果你也聽說.webm" type="video/webm">
20     </video>
21 </div>
22 
23 <script>
24 var oVideo=document.getElementById('mp4');
25 
26 function playPause(){
27     // 判斷如果視頻是暫停的，那就播放。否則就暫停。
28     if(oVideo.paused){
29         oVideo.play();
30     }else{
31         oVideo.pause();
32     }
33 }
34 
35 function showBig(){
36     oVideo.width = 560;
37     oVideo.height = 320;
38 }
39 
40 function showSmall(){
41     oVideo.width = 320;
42     oVideo.height = 180;
43 }
44 
45 function showNormal(){
46     oVideo.width = 420;
47     oVideo.height = 240;
48 }
49 </script>
50 </body>
51 </html>

　　上面的例子調用了兩個方法：play() 和 pause()，即播放/暫停。

　　它同時還使用了三個屬性：paused、width 和 height，在所有屬性中，只有 width 和 height 屬性是立即可用的，在視頻的元數據已載入後，其他屬性才可用。

3、HTML5 Canvas

　　<canvas> 元素用於在網頁中繪製圖形，比如圖表和其他圖像，但必須使用 JS 來繪製圖形。

　　(1)、什麼是 Canvas

　　Canvas 翻譯為畫布，畫布是一個矩形區域，可以控制每一像素。

　　HTML5 的 Canvas 元素用於繪製圖像，但他僅僅只是圖形的容器，必須使用 JavaScript 來繪製圖形。

　　getContext() 方法可返回一個對象，該對象提供了用於在畫布上繪圖的方法和屬性。

　　Canvas 擁有多種繪製路徑，矩形、圓形、字元以及添加圖像的方法。

　　(2)、創建 Canvas

　　向頁面添加 <canvas> 元素，規定元素的 ID、寬度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

　　註意：<canvas> 元素通常需要指定一個 id 屬性，以便 JS 查找元素，width 和 height 屬性用於定義的畫布的大小。

　　在預設情況下 <canvas> 元素沒有邊框和內容，可以在頁面中創建多個 <canvas> 元素，為了便於圖形的繪製，可以使用 style 屬性為畫布添加邊框。

　　(3)、使用 JavaScript 來繪製圖形

　　canvas 元素本身是沒有繪圖能力的，必須使用 JavaScript 來完成實際的繪圖任務：

1 <script>
2 var c = document.getElementById('myCanvas');
3 var cxt = c.getContext("2d");
4     cxt.fillStyle = "#FF0000";
5     cxt.fillRect(0,0,150,75);
6 </script>

　　代碼解析：

　　首先，JS 通過設置的 ID 屬性獲取 <canvas> 元素：

var c = document.getElementById("myCanvas");

　　然後，創建 context 對象：

var ctx = c.getContext("2d");

　　getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。

　　最後的兩行代碼用於繪製一個紅色背景的矩形：

1 ctx.fillStyle = "#FF0000";
2 ctx.fillRect(0,0,150,75);

　　fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。

　　設置 fillStyle 屬性可以是 CSS 顏色，漸變，或圖案。fillStyle 預設設置是 #000000（黑色）。

　　fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。

　　(4)、理解 Canvas 坐標

　　canvas 是一個二維網格，左上角坐標為 (0,0)。

　　上面代碼中的 fillRect 方法擁有參數 (0,0,150,75)，意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。

　　如下圖所示，畫布的 X 和 Y 坐標用於在畫布上對繪畫進行定位。

X Y

　　滑鼠在矩形框內移動，可以顯示定位坐標。

　　(5)、Canvas 繪製路徑

　　下表是 Canvas 繪製路徑方法：

方法	說明
moveTo()	把路徑移動到畫布中的指定點，不創建線條
lineTo()	添加一個新點，然後在畫布中創建從該點到最後指定點的線條
stroke()	繪製已定義的路徑
arc()	創建弧/曲線（用於創建圓形或部分圓）
arcTo()	創建兩切線之間的弧/曲線
beginPath()	起始一條路徑，或重置當前路徑
closePath()	創建從當前點回到起始點的路徑
fill()	填充當前繪圖（路徑）
quadraticCurveTo()	創建二次貝塞爾曲線
bezierCurveTo()	創建三次方貝塞爾曲線
clip()	從原始畫布剪切任意形狀和尺寸的區域
isPointInPath()	如果指定的點位於當前路徑中，則返回 true，否則返回 false

　　貝塞爾曲線，又稱貝茲曲線或貝濟埃曲線，是應用於二維圖形應用程式的數學曲線。

　　在 Canvas 上畫線，我們將使用以下兩種方法：

　　　　①：moveTo(x,y) 定義線條開始坐標。

　　　　②：lineTo(x,y) 定義線條結束坐標。

　　最後通過 stroke() 方法來繪製當前路徑。

　　stroke() 方法用於繪製當前路徑的邊框。路徑定義的幾何線條產生了，但線條的可視化取決於 strokeStyle、lineWidth、lineJoin、lineCap 和 miterLimit 等屬性。專業術語為 “勾勒”，指的是鋼筆或筆刷的畫筆。它意味著“畫......輪廓”。和 stroke() 方法相對的是 fill()，該方法會填充路徑的內部區域而不是勾勒出路徑的邊框。

　　strokeStyle 屬性設置或返回用於筆觸的顏色、漸變或模式，該屬性有3個值，color 指示繪圖筆觸顏色的 CSS 顏色值，預設值是 #000000。gradient 用於填充繪圖的漸變對象（線性或放射性）。pattern 用於創建 pattern 筆觸的 pattern 對象。pattern 對象是 HTML5 Canvas API 中用於給指定的圖形鋪上指定的圖像的關鍵對象，這與 CSS 中b ackground 屬性的作用有點類似。Pattern 對象就表示平鋪圖像所採用的模式（在指定的圖形上以何種方式進行平鋪）。

　　下麵 4 個屬性都屬於 Canvas 線條樣式：

　　lineWidth 屬性設置或返回當前線條的寬度，以像素計。預設值是 1，並且這個屬性必須大於 0.0。較寬的線條在路徑上居中，每邊各有線條寬的一半。

　　lineJoin 屬性設置或返回所創建邊角的類型，當兩條線交匯時。預設值為 miter，創建尖角，會受到 miterLimit 屬性的影響。bevel 用於創建斜角。round 用於創建圓角。

　　lineCap 屬性設置或返回線條末端線帽的樣式。預設值是 butt 向線條的每個末端添加平直的邊緣。square 向線條的每個末端添加正方形線帽。round 向線條的每個末端添加圓形線帽。註意：使用 "round" 和 "square" 會使線條略微變長。

　　miterLimit 屬性設置或返回最大斜接長度。斜接長度指的是在兩條線交匯處內角和外角之間的距離。註意：只有當 lineJoin 屬性為 "miter" 時，miterLimit 才有效。邊角的角度越小，斜接長度就會越大。為了避免斜接長度過長，我們可以使用 miterLimit 屬性。預設值為 10，值為正數，規定最大斜接長度。如果斜接長度超過 miterLimit 的值，邊角會以 lineJoin 的 "bevel" 類型來顯示。

　　①、Canvas 繪製線條

　　通過指定從何處開始，在何處結束，然後使用 stroke() 方法來繪製線條：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>繪製線條</title>
 6 </head>
 7 <body>
 8 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #A9A9A9;"></canvas>
 9 <script>
10 var c = document.getElementById("myCanvas");
11 var cxt = c.getContext("2d");
12     cxt.moveTo(10,10);
13     cxt.lineTo(150,50);
14     cxt.lineTo(10,50);
15     cxt.stroke();
16 </script>
17 </body>
18 </html>

　　②、Canvas 繪製圓形

　　在 canvas 中繪製圓形, 可以使用如下方法：

arc(x,y,r,start,stop);

　　通過規定尺寸、顏色和位置，來繪製一個圓：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>繪製圓</title>
 6 </head>
 7 <body>
 8 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #A9A9A9;"></canvas>
 9 <script>
10 var c = document.getElementById("myCanvas");
11 var cxt = c.getContext("2d");
12     cxt.fillStyle = "#008000";
13     cxt.beginPath();
14     cxt.arc(95,50,40,0,2*Math.PI*2,true);
15     cxt.closePath();
16     cxt.fill();
17 </script>
18 </body>
19 </html>

　　(5)、Canvas 文本

　　使用 canvas 繪製文本，重要的屬性和方法如下：

　　　　①、font 屬性定義字體。

　　　　②、fillText(text,x,y) 方法在 canvas 上繪製實心的文本。

　　　　③、strokeText(text,x,y) 方法在 canvas 上繪製空心的文本。

　　下麵的例子，使用 fillText() 並使用 "Arial" 字體在畫布上繪製一個高 30px 的文字：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>繪製實心文本</title>
 6 </head>
 7 <body>
 8 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #A9A9A9;"></canvas>
 9 <script>
10 var c = document.getElementById("myCanvas");
11 var txt = c.getContext("2d");
12     txt.font = "30px Arial";
13     txt.fillText("Hello World",10,50);
14 </script>
15 </body>
16 </html>

　　下麵的例子，使用 strokeText() 並使用 "Arial" 字體在畫布上繪製一個高 30px 的文字：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>繪製空心文本</title>
 6 </head>
 7 <body>
 8 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #A9A9A9;"></canvas>
 9

HTML5 基礎

1、HTML5 簡介

2、HTML5 Audio 和 Video

3、HTML5 Canvas