HTML5 基礎

時間 2019-11-09

標籤 html5 html 基礎欄目 HTML5 简体版

原文原文鏈接

一、HTML5 簡介

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

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

　　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 合做的結果。css

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

　　W3C 首席執行官 Jeff Jaffe 博士表示：「HTML5 將推進 Web 進入新的時代。不久之前，Web 還只是上網看一些基礎文檔，而現在，Web 是一個極大豐富的平臺。咱們已經進入一個穩定階段，每一個人均可以按照標準行事，而且可用於全部瀏覽器。若是咱們不能攜起手來，就不會有統一的 Web。」　前端

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

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

　　HTML5 的新特性：git

　　　　①、用於繪畫的 canvas 元素。web

　　　　②、用於媒介回放的 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 新特性。

二、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 屬性是當即可用的，在視頻的元數據已加載後，其餘屬性纔可用。

三、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 座標用於在畫布上對繪畫進行定位。

　　鼠標在矩形框內移動，能夠顯示定位座標。

　　(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 <script>
10 var c = document.getElementById("myCanvas");
11 var txt = c.getContext("2d");
12     txt.font = "30px Arial";
13     txt.strokeText("Hello World",10,50);
14 </script>
15 </body>
16 </html>

　　Canvas 用於繪製文本的屬性還有兩個：textAlign 屬性設置或返回文本內容的當前對齊方式。textBaseline 屬性設置或返回在繪製文本時使用的當前文本基線。還有一個方法：measureText() 返回包含指定文本寬度的對象。

　　(6)、Canvas 漸變

　　Canvas 顏色、樣式、陰影屬性和方法：

屬性	說明
fillStyle	設置或返回用於填充繪畫的顏色、漸變或模式
strokeStyle	設置或返回用於筆觸的顏色、漸變或模式
shadowColor	設置或返回用於陰影的顏色
shadowBlur	設置或返回用於陰影的模糊級別
shadowOffsetX	設置或返回陰影距形狀的水平距離
shadowOffsetY	設置或返回陰影距形狀的垂直距離
方法	說明
createLinearGradient()	建立線性漸變（用在畫布內容上）
createRadialGradient()	建立放射狀/環形的漸變（用在畫布內容上）
createPattern()	在指定的方向上重複指定的元素
addColorStop()	規定漸變對象中的顏色和中止位置

　　漸變能夠填充在矩形，圓形，線條，文本等等，各類形狀能夠自定義不一樣的顏色。

　　如下有兩種不一樣的方式來設置 Canvas 漸變：

　　　　①、createLinearGradient(x,y,x1,y1) 方法建立線條漸變。

　　　　②、createRadialGradient(x,y,r,x1,y1,r1) 方法建立一個徑向/圓漸變。

　　當使用漸變對象，必須指定兩種或兩種以上的中止顏色。設置 fillStyle 或 strokeStyle 屬性的值爲漸變，而後繪製形狀，如矩形，文本，或一條線。

　　addColorStop(stop,color) 方法指定顏色中止，參數使用座標來描述，中止參數介於 0.0 - 1.0 之間，表示漸變中開始與結束之間的位置。顏色參數規定在結束位置顯示的 CSS 顏色值。

　　下面的例子，使用 createLinearGradient() 建立一個線性漸變，並使用漸變填充矩形：

 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 
13 // Create gradient（建立漸變）
14 var grd = cxt.createLinearGradient(0,0,200,0);
15     grd.addColorStop(0,"red");
16     grd.addColorStop(1,"white");
17 
18 // Fill with gradient（填充漸變）
19     cxt.fillStyle = grd;
20     cxt.fillRect(10,10,150,80);
21 </script>
22 </body>
23 </html>

　　下面的例子，使用 createRadialGradient() 建立一個徑向/圓漸變，使用漸變填充矩形：

 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 
13 // Create gradient（建立漸變）
14 var grd = cxt.createRadialGradient(75,50,5,90,60,100);
15     grd.addColorStop(0,"red");
16     grd.addColorStop(1,"white");
17 
18 // Fill with gradient（填充漸變）
19     cxt.fillStyle = grd;
20     cxt.fillRect(10,10,150,80);
21 </script>
22 </body>
23 </html>

　　下面的例子，使用指定的顏色繪製漸變背景：

 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 
13 // Create gradient（建立漸變）
14 var grd = cxt.createLinearGradient(0,0,175,50);
15     grd.addColorStop(0,"red");
16     grd.addColorStop(1,"green");
17 
18 // Fill with gradient（填充漸變）
19     cxt.fillStyle = grd;
20     cxt.fillRect(0,0,175,50);
21 </script>
22 </body>
23 </html>

　　(7)、Canvas 圖像

　　使用 canvas 能夠把一幅圖像放置到畫布上，使用如下方法：

drawImage(img,x,y);

　　drawImage() 方法在畫布上繪製圖像、畫布或視頻。該方法方法也可以繪製圖像的某些部分，以及或增長或減小圖像的尺寸。

　　JS 語法一，在畫布上定位圖像：

context.drawImage(img,x,y);

　　JS 語法二，在畫布上定位圖像，並規定圖像的寬度和高度：

context.drawImage(img,x,y,width,height);

　　JS 語法三，剪切圖像，並在畫布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

　　下表是該方法的參數值：

值	說明
img	規定要使用的圖像、畫布或視頻。
x	在畫布上放置圖像的 x 座標位置。
y	在畫布上放置圖像的 y 座標位置。
width	可選。要使用的圖像的寬度。（伸展或縮小圖像）
height	可選。要使用的圖像的高度。（伸展或縮小圖像）
sx	可選。開始剪切的 x 座標位置。
sy	可選。開始剪切的 y 座標位置。
swidth	可選。被剪切圖像的寬度。
sheight	可選。被剪切圖像的高度。

　　下面的例子，使用 JS 把一張圖像定位在畫布（20,20）處：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>繪製圖像</title>
 6 </head>
 7 <body>
 8 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #A9A9A9;"></canvas>
 9 <script>
10 var c = document.getElementById("myCanvas");
11 var cxt = c.getContext("2d");
12 
13 var img = new Image();
14     img.src="images/show.jpg";
15 img.onload = function(){
16     cxt.drawImage(img,20,20);
17 }
18 </script>
19 </body>
20 </html>

　　注意：在使用 JS 繪製圖像時，腳步須要位於頁面底部，而且必需給該方法添加 onload 事件，指定在文檔對象加載完成後觸發，不然在 Chrome 下圖像不被加載。

　　下圖是上面例子在 Chrome 中繪製的圖像：

　　(8)、Canvas 其餘屬性和方法

　　　　①、繪製矩形方法

方法	說明
rect()	建立矩形
strokeRect()	繪製矩形（無填充）
fillRect()	繪製「被填充」的矩形
clearRect()	在給定的矩形內清除指定的像素

　　　　②、像素的屬性和方法

屬性	說明
width	返回 ImageData 對象的寬度
height	返回 ImageData 對象的高度
data	返回一個對象，其包含指定的 ImageData 對象的圖像數據
方法	說明
createImageData()	建立新的、空白的 ImageData 對象
getImageData()	返回 ImageData 對象，該對象爲畫布上指定的矩形複製像素數據
putImageData()	把圖像數據（從指定的 ImageData 對象）放回畫布上

　　　　③、轉換方法

方法	說明
scale()	縮放當前繪圖至更大或更小
rotate()	旋轉當前繪圖
translate()	從新映射畫布上的 (0,0) 位置
transform()	替換繪圖的當前轉換矩陣
setTransform()	將當前轉換重置爲單位矩陣。而後運行 transform()

　　　　下面的例子，使用 rotate() 方法將矩形旋轉 20 度：

 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="150" style="border:1px solid #A9A9A9;"></canvas>
 9 <script>
10 var c = document.getElementById("myCanvas");
11 var cxt = c.getContext("2d");
12     cxt.rotate(20*Math.PI/180);
13     cxt.fillStyle="#008000";
14     cxt.fillRect(50,20,100,50);
15 </script>
16 </body>
17 </html>

　　注意：旋轉只會影響到旋轉完成後的繪圖。

　　rotate() 方法的參數爲旋轉角度，以弧度計，如需將角度轉換爲弧度，須要使用 degrees*Math.PI/180 公式進行計算。好比：須要旋轉 10 度，可指定下面的公式：10*Math.PI/180。

　　fillRect() 方法繪製「已填色」的矩形，默認的填充顏色是黑色。可使用 fillStyle 屬性來設置用於填充繪圖的顏色、漸變或模式。

　　JS 語法以下：

context.fillRect(x,y,width,height);

　　x，y 規定矩形左上角的 x,y 座標，width/height 屬性規定矩形的寬高，以像素計。

　　　　④、合成屬性

屬性	說明
globalAlpha	設置或返回繪圖的當前 alpha 或透明值
globalCompositeOperation	設置或返回新圖像如何繪製到已有的圖像上

　　(9)、Canvas 對象

　　Canvas 對象表示一個 HTML 畫布元素 <canvas>。它沒有本身的行爲，可是定義了一個 API 支持腳本化客戶端繪圖操做。

　　能夠直接在該對象上指定寬度和高度，可是，其大多數功能均可以經過 CanvasRenderingContext2D 對象得到。這是經過 Canvas 對象的 getContext() 方法而且把直接量字符串 "2d" 做爲惟一的參數傳遞給它而得到的。

　　width 屬性能夠指定畫布的寬度。和一幅圖像同樣，這個屬性能夠指定爲一個整數像素值或者是窗口寬度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。

　　height 屬性能夠指定畫布的高度。和 width 屬性相同，若是這個值改變，那麼在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。

　　getContext(id) 返回一個用於在畫布上繪圖的環境。參數 id 指定了想要在畫布上繪製的類型。當前惟一的合法值是 "2d"，它指定了二維繪圖，而且致使這個方法返回一個環境對象，該對象導出一個二維繪圖 API。

　　在將來，若是 <canvas> 標籤擴展到支持 3D 繪圖，getContext() 方法可能容許傳遞一個 "3d" 字符串參數。

　　該方法返回一個表示用來繪製的環境類型的環境。其本意是要爲不一樣的繪製類型（2 維、3 維）提供不一樣的環境。當前，惟一支持的是 "2d"，它返回一個 CanvasRenderingContext2D 對象，該對象實現了一個畫布所使用的大多數方法。

　　雖然 Canvas 僅支持 2D 對象的操做，好比 rotate 方法在設計上僅能夠旋轉平面 2D 對象，可是能夠利用 JS 編寫方法來繪製和旋轉 3D 對象。

　　經過 CSS3 轉換，能夠轉換 2D 和 3D 的元素，對元素進行移動、縮放、拉伸和旋轉，使用 CSS3 能夠建立動畫效果。

四、HTML5 內聯 SVG

　　(1)、什麼是 SVG？

　　HTML5 支持支持內聯 SVG，SVG 便可縮放矢量圖形，是基於可擴展標記語言（標準通用標記語言的子集），用於描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標準。SVG 於 2003 年 1 月 14 日成爲 W3C 推薦標準，與諸如 DOM 和 XSL 之類的 W3C 標準是一個總體。

　　①、SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)。

　　②、SVG 用於定義用於網絡的基於矢量的圖形。

　　③、SVG 使用 XML 格式定義圖形。

　　④、SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有損失。

　　⑤、SVG 是萬維網聯盟的標準。

　　(2)、SVG 優點

　　與其餘圖像格式相比（好比 JPEG 和 GIF），使用 SVG 的優點在於：

　　　　①、SVG 文件是純粹的 XML，可被很是多的工具讀取和修改，好比記事本。

　　　　②、SVG 圖像可被搜索、索引、腳本化或壓縮。

　　　　③、SVG 是可伸縮的。

　　　　④、SVG 圖像可在任何的分辨率下被高質量地打印。

　　　　⑤、SVG 可在圖像質量不降低的狀況下被放大。

　　　　⑥、SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。

　　　　⑦、SVG 圖像中的文本是可選的，同時也是可搜索的，很適合製做地圖。

　　　　⑧、SVG 能夠與 Java 技術一塊兒運行。

　　　　⑨、SVG 是開放的標準。

　　因爲 SVG 是基於 XML 的，於是能製做出空前強大的動態交互圖像，即 SVG 圖像能對用戶動做作出不一樣響應，例如高亮、聲效、特效、動畫等。做爲 SVG 技術的一個應用，SVG 在手機等無線手持設備上的應用將是 3G 時代最重要的應用之一。支持 SVG 的手機，容許用戶查看高質量的矢量圖形及動畫，同時，因爲 SVG 採用文本傳輸，尺寸也會很是小，速度將會更快。

　　SVG 的主要競爭者是 Flash。與 Flash 相比，SVG 最大的優點是與其餘標準（好比 XSL 和 DOM）相兼容，而 Flash 則是未開源的私有技術。

　　目前 IE9+，Firefox，Chrome，Safari 和 Opera 都支持內聯 SVG，IE8 及其更早版本都須要安裝一個插件，好比 Adobe SVG Viewer，插件是免費提供的。

　　(3)、SVG 文件

　　SVG 是 XML 文件，可用任何文本編輯器建立。

　　下面是一個簡單的 SVG 文件例子，SVG 文件必須使用 .svg 後綴來保存：

1 <?xml version="1.0" standalone="no"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 <svg width="100%" height="100%" version="1.1" xmlns="URL">
4     <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
5 </svg>

　　代碼解析：

　　第一行包含了 XML 聲明。請注意 standalone 屬性！該屬性規定此 SVG 文件是不是「獨立的」，或含有對外部文件的引用。standalone="no" 意味着 SVG 文檔會引用一個外部文件 - 在這裏，是 DTD 文件。

　　第二行引用了這個外部的 SVG DTD。該 DTD 位於 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。該 DTD 位於 W3C，含有全部容許的 SVG 元素。

　　SVG 代碼以 <svg> 元素開始，包括開放標籤 <svg> 和閉合標籤 </svg> ，這是根元素。width 和 height 屬性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。

　　SVG 的 <circle> 用來建立一個圓。cx 和 cy 屬性定義圓中心的 x 和 y 座標，若是忽略這兩個屬性，那麼圓點會被設置爲 (0, 0)。r 屬性定義圓的半徑。stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓，上面文件中圓的輪廓設置爲 2px 寬，黑邊框。fill 屬性設置形狀內的顏色，文件中填充顏色爲紅色。

　　最後一行，關閉標籤的做用是關閉 SVG 元素和文檔自己。注意：全部的開始標籤必須有結束標籤。

　　(5)、HTML 建立 SVG

　　SVG 文件可經過如下標籤嵌入 HTML 文檔：<embed>、<object> 或者 <iframe>。

　　①、使用 <embed> 標籤

　　<embed> 標籤被全部主流的瀏覽器支持，並容許使用腳本。<embed> 標籤是 HTML5 新添加的標籤，全部只有 HTML5 支持，在 HTML4 和 XHTML 中不支持。

　　語法：

<embed src="demo.svg" type="image/svg+xml" />

　　②、使用 <object> 標籤

　　<object> 標籤是 HTML 4 的標準標籤，HTML5 也支持，全部主流瀏覽器都支持，它的缺點是不容許使用腳本。

　　語法：

<object data="demo.svg" type="image/svg+xml"></object>

　　③、使用 <iframe> 標籤

　　全部主要瀏覽器都支持 <iframe>，並容許使用腳本，但只在 HTML5 中被容許，在 HTML4 中 XHTML 不支持。

　　語法：

<iframe src="demo.svg"></iframe>

　　④、HTML 嵌入 SVG 代碼

　　IE9+、Chrome、Firefox 和 Safari 中，能夠直接在 HTML 代碼中嵌入 SVG 代碼。目前 Opera 不支持 SVG 嵌入 HTML。

　　在 HTML5 中，能夠把 SVG 元素直接嵌入 HTML 頁面中：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>SVG</title>
 6 </head>
 7 <body>
 8 <svg xmlns="http://www.index.com/svg" version="1.1" height="190">
 9     <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red; stroke:black; stroke-width:2; fill-rule:evenodd;" />
10 </svg>
11 </body>
12 </html>

上面的例子，在頁面中建立一個多邊形，在 Chrome 中顯示以下：

　　SVG 的 <polygon> 標籤能夠用來建立含有很多於三個邊的圖形。多邊形由直線組成，其形狀是"封閉"的，即全部的線條鏈接起來。points 屬性的每組值用於定義多邊形每一個角的 x 和 y 座標。在 style 屬性中可規定建立圖像的樣式，fill 屬性規定填充的顏色，stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓，例子中爲 2px 寬，黑邊框。fill-rule 屬性能夠設置圖形的內部區域。使用 fill-opacity 屬性還能夠設置填充顏色的透明度，該屬性和 CSS 的 opacity 屬性相同。

　　⑤、SVG 添加超連接

　　使用 a 元素能夠爲建立的 SVG 圖形添加連接：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>SVG 添加超連接</title>
 6 </head>
 7 <body>
 8 <svg>
 9     <a xlink:href="http://www.cnblogs.com/mtime/" target="new">
10         <rect x="10" y="10" width="100" height="30" rx="10" ry="10" style="fill:lightgray" />
11         <text x="30" y="30" font-size="14" fill="red">Click me</text>
12     </a>
13     <a xlink:href="http://www.cnblogs.com/mtime/" target="new">
14         <circle cx="100" cy="100" r="50" style="fill:lightgray" />
15         <text x="75" y="100" font-size="14" fill="blue">Click me</text>
16     </a>
17 </svg>
18 </body>
19 </html>

　　上面的例子，SVG 的 <rect> 標籤可用於定義矩形，<text> 標籤用於定義文本。注意：給 SVG 添加超連接，在 a 元素中必定要使用 xlink:href 屬性，該屬性是 XML 中的屬性，用於指定要連接的 URL。

　　(6)、SVG 與 Canvas

　　Canvas 和 SVG 均可以在瀏覽器中建立圖形，可是它們在根本上是不一樣的。

　　他們的區別在於：

　　　　SVG 是一種使用 XML 描述 2D 圖形的語言。

　　　　而 Canvas 是經過 JavaScript 來繪製 2D 圖形。

　　　　SVG 基於 XML，這意味着 SVG DOM 中的每一個元素都是可用的。您能夠爲某個元素附加 JavaScript 事件處理器。

　　　　在 SVG 中，每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形。

　　　　Canvas 是逐像素進行渲染的。

　　　　在 Canvas 中，一旦圖形被繪製完成，它就不會繼續獲得瀏覽器的關注。若是其位置發生變化，那麼整個場景也須要從新繪製，包括任何或許已被圖形覆蓋的對象。

　　下表列出了 Canvas 與 SVG 之間的一些不一樣之處：

Canvas	SVG
依賴分辨率	不依賴分辨率
不支持事件處理	支持事件處理
弱的文本渲染能力	最適合帶有大型渲染區域的應用程序（好比谷歌地圖）
可以以 .png 或 .jpg 格式保存結果圖像	複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪	不適合遊戲應用

五、HTML5 拖放（Drag and Drop）

　　拖放是 HTML5 標準的組成部分，任何元素都可以拖放。在代碼中 Drag 爲拖動，Drop 是拖放。

　　拖放是一種常見的特性，即抓取對象之後拖到另外一個位置。

　　下面是一個簡單的拖放例子：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>拖放</title>
 6 <style>
 7 div{
 8     width:400px;
 9     height:100px;
10     padding:20px;
11     border:1px solid #A9A9A9;
12 }
13 </style>
14 </head>
15 <body>
16 <div ondrop="drop(event)" ondragover="showDrop(event)"></div>
17 <br/>
18 <img id="demo" src="images/big.jpg" draggable="true" ondragstart="drag(event)" width="400px;" height="100px;">
19 <script>
20 function showDrop(ev){
21     ev.preventDefault();
22 }
23 
24 function drag(ev){
25     ev.dataTransfer.setData("Text",ev.target.id);
26 }
27 
28 function drop(ev){
29     ev.preventDefault();
30     var data = ev.dataTransfer.getData("Text");
31     ev.target.appendChild(document.getElementById(data));
32 }
33 </script>
34 </body>
35 </html>

　　拖放效果主要是經過 JS 完成的，下面將對拖放事件的不一樣部分進行分析。

　　代碼解析：

　　①、設置元素爲可拖放

　　首先，爲了使元素可拖動，把 draggable 屬性設置爲 true ：

<img draggable="true">

　　draggable 屬性用於規定元素是否可拖動，默認值爲 auto 使用瀏覽器的默認特性。當值爲 true 時元素是可拖動的，false 則指定元素不可拖動。注意：連接和圖像默認是可拖動的。

　　②、拖動什麼 - ondragstart 和 setData()

　　而後，規定當元素被拖動時，會發生什麼。

　　在上面的例子中，ondragstart 屬性調用了一個函數 drag(event)，它規定了被拖動的數據。

　　dataTransfer.setData() 方法設置被拖數據的數據類型和值：

1 function drag(ev){
2     ev.dataTransfer.setData("Text",ev.target.id);
3 }

　　在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("demo")。

　　③、放到何處 - ondragover

　　ondragover 事件規定在何處放置被拖動的數據。

　　默認地，沒法將數據/元素放置到其餘元素中。若是須要設置容許放置，則必須阻止對元素的默認處理方式。

　　須要經過調用 ondragover 事件的 event.preventDefault() 方法：

1 function showDrop(ev){
2     ev.preventDefault();
3 }

　　④、進行放置 - ondrop

　　當放置被拖數據時，會發生 drop 事件。

　　在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：

1 function drop(ev){
2     ev.preventDefault();
3     var data = ev.dataTransfer.getData("Text");
4     ev.target.appendChild(document.getElementById(data));
5 }

　　代碼解析：

　　　　①、調用 preventDefault() 來避免瀏覽器對數據的默認處理，drop 事件的默認行爲是以連接形式打開。

　　　　②、經過 dataTransfer.getData("Text") 方法得到被拖的數據。該方法將返回在 setData() 方法中設置爲相同類型的任何數據。

　　　　③、被拖數據是被拖元素的 id ("demo")。

　　　　④、把被拖元素追加到放置元素（目標元素）中。

　　下面的例子，能夠在2個 div 之間來回拖放圖像：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>來回拖放</title>
 6 <style>
 7 div{
 8     float:left;
 9     width:150px;
10     height:80px;
11     margin:10px;
12     padding:20px;
13     border:1px solid #A9A9A9;
14 }
15 </style>
16 </head>
17 <body>
18 <div ondrop="drop(event)" ondragover="showDrop(event)">
19     <img id="demo" src="images/small.jpg" draggable="true" ondragstart="drag(event)" width="150px" height="80px">
20 </div>
21 <div ondrop="drop(event)" ondragover="showDrop(event)"></div>
22 <script>
23 function showDrop(ev){
24     ev.preventDefault();
25 }
26 
27 function drag(ev){
28     ev.dataTransfer.setData("Text",ev.target.id);
29 }
30 
31 function drop(ev){
32     ev.preventDefault();
33     var data = ev.dataTransfer.getData("Text");
34     ev.target.appendChild(document.getElementById(data));
35 }
36 </script>
37 </body>
38 </html>

六、HTML5 Geolocation（地理定位）

　　HTML5 Geolocation API 用於得到用戶的地理位置。

　　鑑於該特性可能侵犯用戶的隱私，除非用戶贊成，不然用戶位置信息是不可用的。

　　(1)、使用地理定位

　　如需定位用戶的位置，可使用 getCurrentPosition() 方法。

　　下例是一個簡單的地理定位例子，可返回用戶位置的經度和緯度：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>地理定位</title>
 6 </head>
 7 <body>
 8 <p id="demo">點擊按鈕獲取當前位置座標：</p>
 9 <button onclick="getLocation()">獲取位置</button>
10 <script>
11 var x = document.getElementById("demo");
12 function getLocation(){
13     if(navigator.geolocation){
14         navigator.geolocation.getCurrentPosition(showPosition);
15     }else{
16         x.innerHTML = "該瀏覽器不支持獲取地理位置。";
17     }
18 }
19 function showPosition(position){
20     x.innerHTML = "緯度: " + position.coords.latitude + "<br/>經度: " + position.coords.longitude;
21 }
22 </script>
23 </body>
24 </html>

　　代碼解析：

　　　　①、檢測是否支持地理定位，使用 navigator.geolocation 進行判斷。

　　　　②、若是支持，則運行 getCurrentPosition() 方法。若是不支持，則向用戶提示一段消息。

　　　　③、若是 getCurrentPosition() 運行成功，則向參數 showPosition 中規定的函數返回一個 coordinates 對象。

　　　　④、showPosition() 函數得到並顯示經度和緯度。

　　上面的例子是一個很是基礎的地理定位腳本，不含錯誤處理。

　　(2)、處理錯誤和拒絕

　　getCurrentPosition() 方法的第二個參數可用於處理錯誤，它規定當獲取用戶位置失敗時運行的函數：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>錯誤處理</title>
 6 </head>
 7 <body>
 8 <p id="demo">點擊按鈕獲取當前位置座標：</p>
 9 <button type="button" onclick="getLocation()">獲取位置</button>
10 <script>
11 var x = document.getElementById("demo");
12 function getLocation(){
13     if(navigator.geolocation){
14         navigator.geolocation.getCurrentPosition(showPosition,showError);
15     }else{
16         x.innerHTML = "該瀏覽器不支持獲取地理位置。";
17     }
18 }
19 function showPosition(position){
20     x.innerHTML = "緯度: " + position.coords.latitude + "<br/>經度: " + position.coords.longitude;
21 }
22 function showError(error){
23     switch(error.code){
24         case error.PERMISSION_DENIED:
25             x.innerHTML = "用戶拒絕對獲取地理位置的請求。"
26             break;
27         case error.POSITION_UNAVAILABLE:
28             x.innerHTML = "位置信息不可用。"
29             break;
30         case error.TIMEOUT:
31             x.innerHTML = "請求用戶地理位置超時。"
32             break;
33         case error.UNKNOWN_ERROR:
34             x.innerHTML = "未知錯誤。"
35             break;
36     }
37 }
38 </script>
39 </body>
40 </html>

　　錯誤代碼：

　　　　①、Permission denied 用戶不容許地理定位。

　　　　②、Position unavailable 沒法獲取當前位置。

　　　　③、Timeout 操做超時。

　　　　④、UNKNOWN_ERROR 未知錯誤。

　　在瀏覽器中打開上面的例子，Chrome 在地址欄中提示系統已阻止此網頁跟蹤位置，在實際網站中，會彈出提示該網頁想要獲取位置，能夠點擊容許或者禁止。在 Firefox 中彈出提示是否容許與此文件共享位置信息，能夠點擊共享位置信息或者關閉，在實際網站中，彈出是否與此網站共享信息，能夠點擊共享位置信息或者關閉。IE 默認限制網頁運行 ActiveX 控件，該控件主要用於頁面中的多媒體資源，用戶能夠在瀏覽器中自行設置是否啓用該控件，或者提示。點擊容許阻止內容後，點擊獲取位置，在頁面底部提示想要跟蹤實際位置，能夠選擇容許一次或者關閉，在實際網站中，則能夠選擇容許一次，或者點擊用於此站點的選項，選擇老是容許或者老是拒絕無需通知。

　　注意：在本地測試，點擊按鈕後須要較長時間獲取當前位置信息，尤爲是在 Firefox 中，在 IE 中獲取速度比較快，並且位置相對準確，Chrome 和 Firefox 則提示位置信息不可用。

　　(3)、地理定位其餘妙用

　　①、在地圖中顯示結果

　　如需在地圖中顯示結果，須要訪問可以使用經緯度的地圖服務，好比：百度地圖或谷歌地圖。

　　而且使用腳本還能夠顯示帶有標記、縮放和拖曳選項的交互式地圖。

　　②、給定位置的信息

　　使用地理定位能夠在地圖上顯示用戶的位置，地理定位對於給定位置的信息一樣頗有用處。

　　好比：更新本地信息、顯示用戶周圍的興趣點、交互式車載導航系統 (GPS)。

　　③、實時位置

　　watchPosition() 方法能夠返回用戶的當前位置，並繼續返回用戶移動時的更新位置，這就像汽車上的 GPS。

　　clearWatch() 用於中止 watchPosition() 方法。

　　若是須要獲取用戶事實位置，設備必須支持 GPS 功能，可用於移動設備。

　　(4)、getCurrentPosition() 方法 - 返回數據

　　該方法用於獲取用戶的位置，若成功，則 getCurrentPosition() 方法返回對象。始終會返回 latitude、longitude 以及 accuracy 屬性。若是可用，則會返回其餘下面的屬性：

屬性	說明
coords.latitude	十進制數的緯度
coords.longitude	十進制數的經度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米計
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，從正北開始以度計
coords.speed	速度，以米/每秒計
timestamp	響應的日期/時間

七、HTML5 Web 存儲

　　HTML5 Web 存儲，即客戶端存儲數據，他是比 cookie 更好的本地存儲方式。

　　使用 HTML5 能夠在本地存儲用戶的瀏覽數據，提供了兩種在客戶端存儲數據的新方法：

　　　　①、localStorage 沒有時間限制的數據存儲。

　　　　②、sessionStorage 針對一個 session 的數據存儲。

　　以前，本地存儲數據都是用 cookie 完成的，可是 cookie 不適合大量數據的存儲，由於它們由每一個對服務器的請求來傳遞，這使得 cookie 速度很慢並且效率也不高。在 HTML5 中，數據不是由每一個服務器請求傳遞的，而是隻有在請求時使用數據，它使在不影響網站性能的狀況下存儲大量數據成爲可能。

　　Web 存儲須要更加的安全與快速，這些數據不會被保存在服務器上，可是這些數據只用於用戶請求網站數據上。他能夠存儲大量的數據，而不影響網站的性能。數據以鍵/值對存在，對於不一樣的網站，數據存儲於不一樣的區域，而且一個網站只能訪問其自身的數據。

　　同 cookie 相同，HTML5 也使用 JavaScript 來存儲和訪問數據。

　　在使用 web 存儲前，可使用下面代碼檢查瀏覽器是否支持 localStorage 和 sessionStorage 這兩個新對象：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>瀏覽器支持</title>
 6 </head>
 7 <body>
 8 <button type="button" onclick="show()">點我</button>
 9 <script>
10 function show(){
11     if(typeof(Storage) !== 'undefined'){
12         alert('OK，支持');
13     }
14     else{
15         alert('NO，不支持');
16     }
17 }
18 </script>
19 </body>
20 </html>

　　(1)、localStorage 對象

　　localStorage 對象存儲的數據沒有時間限制，次日、第二週或下一年以後，數據依然可用。

　　建立並訪問 localStorage：

1 <script>
2 localStorage.username = '小明';
3 document.write('User name: ' + localStorage.username);
4 </script>

　　代碼解析：

　　　　①、使用 key='username' 和 value='小明' 建立一個 localStorage 鍵/值對。

　　　　②、在訪問時，直接訪問 localStorage 鍵。

　　注意：鍵/值對一般以字符串存儲，能夠根據須要轉換該格式。

　　下面的例子，對用戶訪問頁面的次數進行計數，並將字符串值轉換爲數字類型：

1 <script>
2 if(localStorage.F5count){
3     localStorage.F5count = Number(localStorage.F5count) + 1;
4 }
5 else{
6     localStorage.F5count = 1;
7 }
8 document.write("訪問: " + localStorage.F5count + " time(s).");
9 </script>

　　在瀏覽器打開上面的例子，刷新頁面會看到計數器在增加，關閉瀏覽器再打開後，計數器會繼續計數。

　　(2)、sessionStorage 對象

　　sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。

　　session 翻譯爲會話，在計算機中，尤爲是在網絡應用中，被稱爲「會話控制」。Session 對象存儲特定用戶會話所需的信息。這樣，當用戶在應用程序的 Web 頁之間跳轉時，存儲在 Session 對象中的變量將不會丟失，而是在整個用戶會話中一直存在下去。當用戶請求來自應用程序的 Web 頁時，若是該用戶尚未會話，則 Web 服務器將自動建立一個 Session 對象。當會話過時或被放棄後，服務器將終止該會話。Session 對象最多見的一個用法就是存儲用戶的首選項。在 PHP 中 Session 變量用於存儲用戶的信息，或者爲一個用戶的 session 更改設置。Session 變量保存的信息是單一用戶的，而且可供應用程序中的全部頁面使用。

　　HTTP 是一種無狀態性的協議，由於此種協議不要求瀏覽器在每次請求中標明他本身的身份，而且瀏覽器以及服務器之間並無保持一個持久性的鏈接用於多個頁面之間的訪問。當一個用戶訪問一個站點的時候，用戶的瀏覽器發送一個 HTTP 請求到服務器，服務器返回給瀏覽器一個 HTTP 響應。簡單說就是，客戶端發送一個請求，服務器端響應一個回覆，這就是整個基於 HTTP 協議的通信過程。Web 應用程序就是基於 HTTP 協議進行通信的。

　　大多數 Web 應用程序都離不開 session 的使用，當你操做某個應用程序時，你打開他，而後更改一些設置，再關閉他，這就很像一次會話，計算機清楚你是誰，他清楚你在什麼時候打開或關閉應用程序，可是 Web 不知道，因爲 HTTP 地址沒法維持狀態，因此 Web 服務器並不知道你是誰以及你作了什麼。

　　經過在服務器上存儲用戶信息以便隨後使用，PHP session 解決了這個問題（好比用戶名稱、購買商品等）。不過，會話信息是臨時的，在用戶離開網站後將被刪除。若是須要永久儲存信息，能夠把數據存儲在數據庫中。

　　Session 的工做機制是：爲每一個訪問者建立一個惟一的 id (UID)，並基於這個 UID 來存儲變量。UID 存儲在 cookie 中，亦或經過 URL 進行傳導。

　　建立並訪問一個 sessionStorage：

1 <script>
2 sessionStorage.username = '小紅';
3 document.write('User name: ' + sessionStorage.username);
4 </script>

　　經過代碼對比能夠看到，建立 sessionStorage 和建立 localStorage 方法相同，即便用 key='username' 和 value='小紅' 建立一個 sessionStorage 鍵/值對。在訪問時，直接訪問 sessionStorage 鍵。

　　下面的例子，對用戶在當前 session 中訪問頁面的次數進行計數，並將字符串值轉換爲數字類型：

1 <script>
2 if(sessionStorage.F5count){
3     sessionStorage.F5count = Number(sessionStorage.F5count) + 1;
4 }
5 else{
6     sessionStorage.F5count = 1;
7 }
8 document.write("訪問：" + sessionStorage.F5count + " time(s) this session.");
9 </script>

　　在瀏覽器打開上面的例子，刷新頁面會看到計數器在增加，可是，關閉瀏覽器再打開後，計數器會復位，被重置爲 1 。

八、HTML5 應用程序緩存

　　使用 HTML5，經過建立 cache manifest 文件，能夠輕鬆地建立 Web 應用的離線版本。

　　(1)、什麼是應用程序緩存（Application Cache）？

　　HTML5 引入了應用程序緩存，這意味着 Web 應用可進行緩存，並可在沒有因特網鏈接時進行訪問。

　　應用程序緩存爲應用帶來三個優點：

　　　　①、離線瀏覽，用戶可在應用離線時使用它們。

　　　　②、速度，已緩存資源加載得更快。

　　　　③、減小服務器負載，瀏覽器將只從服務器下載更新過或更改過的資源。

　　IE10，Firefox，Chrome，Safari 和 Opera 都支持應用程序緩存。

　　(2)、HTML5 Cache Manifest

　　如需啓用應用程序緩存，須要在文檔的 <html> 標籤中包含 manifest 屬性：

 1 <!DOCTYPE html>
 2 <html  manifest="demo.appcache">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Cache Manifest 基礎</title>
 6 </head>
 7 <body>
 8 
 9 </body>
10 </html>

　　每一個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。若是未指定 manifest 屬性，則頁面不會被緩存，除非在 manifest 文件中直接指定了該頁面。

　　manifest 文件建議的文件擴展名是：".appcache"。

　　注意：manifest 文件須要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 Web 服務器上進行配置。

　　(3)、Manifest 文件

　　manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容，以及不緩存的內容。

　　manifest 文件可分爲三個部分：

　　　　①、CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存。

　　　　②、NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存。

　　　　③、FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）。

　　①、CACHE MANIFEST

　　第一行 CACHE MANIFEST 是必需的：

CACHE MANIFEST
/style.css
/logo.gif
/main.js

　　上面的 manifest 文件列出了三個資源：一個 CSS 文件，一個 GIF 圖像，以及一個 JavaScript 文件。

　　當 manifest 文件加載後，瀏覽器會從網站的根目錄下載這三個文件。而後，不管用戶什麼時候與因特網斷開鏈接，這些資源依然是可用的。

　　②、NETWORK

　　下面的 NETWORK 小節規定文件 "login.php" 永遠不會被緩存，且離線時是不可用的：

NETWORK:
login.php

　　可使用星號來指示全部其餘其餘資源/文件都須要因特網鏈接：

NETWORK:
*

　　③、FALLBACK

　　下面的 FALLBACK 小節規定若是沒法創建因特網鏈接，則用 "offline.html" 替代 /html5/ 目錄中的全部文件：

FALLBACK:
/html5/ /offline.html

　　注意：第一個 URI 是資源，第二個是替補。

　　(4)、更新緩存

　　一旦應用被緩存，它就會保持緩存直到發生下列狀況：

　　　　①、用戶清空瀏覽器緩存。

　　　　②、manifest 文件被修改。

　　　　③、由程序來更新應用緩存。

　　下面是一個完整的 Manifest 文件：

CACHE MANIFEST
# 2016-01-01 v1.0.0
/style.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

　　注意：以 "#" 開頭的是註釋行，但也可知足其餘用途。應用的緩存會在其 manifest 文件更改時被更新。若是你編輯了一張圖片，或者修改了一個 JavaScript 函數，這些改變都不會被從新緩存。更新註釋行中的日期和版本號是一種使瀏覽器從新緩存文件的辦法。

　　(5)、關於應用程序緩存的說明

　　須要留心緩存的內容。

　　一旦文件被緩存，則瀏覽器會繼續展現已緩存的版本，即便你修改了服務器上的文件。爲了確保瀏覽器更新緩存，你須要更新 manifest 文件。

　　注意：瀏覽器對緩存數據的容量限制可能不太同樣，某些瀏覽器設置的限制是每一個站點 5MB。

九、HTML5 Web Workers

　　web worker 是運行在後臺的 JavaScript，不會影響頁面的性能。

　　什麼是 Web Worker？

　　當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。

　　web worker 是運行在後臺的 JavaScript，獨立於其餘腳本，不會影響頁面的性能。

　　你能夠繼續作任何願意作的事情：點擊、選取內容等等，而此時 web worker 在後臺運行。

　　IE10，Firefox，Chrome，Safari 和 Opera 都支持 Web Worker。

　　下面的例子，建立一個簡單的 Web Worker，在後臺計數：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Web Workers</title>
 6 </head>
 7 <body>
 8 <p>計數： <output id="result"></output></p>
 9 <button type="button" onclick="startWorker()">開始工做</button>
10 <button  type="button" onclick="stopWorker()">中止工做</button>
11 
12 <script>
13 var w;
14 function startWorker(){
15     if(typeof(Worker) !== "undefined"){
16         if(typeof(w) == "undefined"){
17             w = new Worker("html5/setworkers.js");
18         }
19         w.onmessage = function (event) {
20             document.getElementById("result").innerHTML = event.data;
21         };
22     }
23     else{
24         document.getElementById("result").innerHTML = "抱歉，你的瀏覽器不支持 Web Workers...";
25     }
26 }
27 
28 function stopWorker(){
29     w.terminate();
30 }
31 </script>
32 </body>
33 </html>

　　下面是例子中所用的外部 JS 文件：

1 var i = 0;
2 function timedCount(){
3     i = i + 1;
4     postMessage(i);
5     setTimeout("timedCount()",500);
6 }
7 timedCount();

　　注意：在 Chrome 下調試該程序會報安全錯誤：Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///C:/Users/.../html5/setworkers.js' cannot be accessed from origin 'null'. 構建 'Worker' 失敗，緣由在於 Chrome 不容許在本地文件中運行腳步時加載 Web Workers，能夠在 IE 和 Firefox 中查看效果。

　　JS 是單線程運行的，瀏覽器進程中只有一個 JS 的執行線程，同一時刻內只會有一段代碼運行。瀏覽器的內核是多線程的，它們在內核制控下相互配合以保持同步，一個瀏覽器至少實現三個常駐線程：javascript 引擎線程，GUI 渲染線程，瀏覽器事件觸發線程。JS 引擎是基於事件驅動單線程執行的，JS 引擎一直等待着任務隊列中任務的到來，而後加以處理，瀏覽器不管在何時都只且只有一個 JS 線程在運行 JS 程序。JS 既是單線程又是異步的，異步的機制是瀏覽器的兩個或以上常駐線程共同完成的，異步請求就是由兩個常駐線程：JS 引擎線程和事件觸發線程共同完成的，JS 的執行線程發起異步請求，這時瀏覽器會開一條新的 HTTP 請求線程來執行請求，此時 JS 的任務已完成，繼續執行線程隊列中剩下的其餘任務，而後在將來的某一時刻事件觸發線程監視到以前發起的 HTTP 請求已完成，它就會把完成事件插入到 JS 執行隊列的尾部等待 JS 處理。好比定時觸發（settimeout 和 setinterval）是由瀏覽器的定時器線程執行的定時計數，而後在定時時間把定時處理函數的執行請求插入到 JS 執行隊列的尾端，因此用這兩個函數時，實際的執行時間是大於或等於指定時間的，並不保證能準肯定時。

　　正常形況下，瀏覽器執行某段程序時會阻塞直到運行結束後再恢復到正常狀態，而 HTML5 的 Web Workers 就是爲了解決這個問題，Web Workers 是 HTML5 提供的一個 JS 多線程解決方案，他的做用是能夠解決程序阻塞問題，並提高效率。好比例子中的後臺計數，用 Web Worker 實現另起一個線程，將計數工做運行在後臺的 JS 文件，並返回累加後的結果，該 js 文件運行於後臺，獨立於其餘腳本，不會影響頁面的性能，HTML 頁面能夠繼續作任何事情，而此時 web worker 在後臺運行，互不干擾。因此使用 Web Worker 能夠運行一些大計算量的代碼，而不阻塞用戶界面。

　　下面是對上面例子的解析：

　　(1)、檢測 Web Worker 支持

　　在建立 web worker 以前，可使用下面代碼檢測瀏覽器是否支持：

1 if(typeof(Worker) !== 'undefined'){
2     alert('OK，支持')
3 else{
4     alert('NO，不支持');
5 }

　　(2)、建立 web worker 文件

　　而後在一個外部 JavaScript 文檔中建立 Web Worker。

　　上面的例子建立了一個計數腳本，該腳本存儲在 html5 文件夾下 "setworkers.js" 文件中。

　　該文件重要的部分是 postMessage() 方法，他用於向 HTML 頁面傳回一段消息。

　　在實際項目中 Web Worker 確定不會用於如此簡單的腳本，他常被用於更耗費 CPU 資源的任務。

　　(3)、建立 Web Worker 對象

　　建立好 Web Worker 文件以後，接下來就須要從 HTML 頁面調用它。

　　下面的代碼用於檢測是否存在 Worker，若是不存在，它會建立一個新的 Web Worker 對象，而後運行 "setworkers.js" 中的代碼：

1 if(typeof(w) == 'undefined'){
2     w = new Worker('html5/setworkers.js');
3 }

　　而後就能夠從 Web Worker 發生和接收消息了。

　　再向 Web Worker 添加一個 "onmessage" 事件監聽器：

1 w.onmessage = function(event){
2     document.getElementById('result').innerHTML = event.data;
3 };

　　當 Web Worker 傳遞消息時，會執行事件監聽器中的代碼，event.data 中存有來自 event.data 的數據。

　　(4)、終止 Web Worker

　　當建立 Web Worker 對象後，它會繼續監聽消息（即便在外部腳本完成以後）直到其被終止爲止。

　　如需終止 web worker，並釋放瀏覽器/計算機資源，須要使用 terminate() 方法：

1 function stopWorker(){
2     w.terminate();
3 }

　　(5)、Web Workers 和 DOM

　　Web Worker 的基本原理就是在當前 JS 的主線程中，使用 Worker 類加載一個 JS 文件來開闢一個新的線程，起到互不阻塞執行的效果，而且提供主線程和新線程之間數據交換的 API：postMessage，onmessage。PostMessage API 用於將一條消息放入到消息隊列中，能夠向 HTML 頁面傳回一段消息。onmessage 屬性指定當觸發消息時運行腳本。

　　因爲 Web Worker 位於外部文件中，因此它們沒法訪問下例 JS 對象：window 對象、document 對象、parent 對象。

　　雖然 Web Worker 看着如此牛逼，可是也具備侷限性，不能訪問 DOM，不能跨域加載 JS。Web Worker API 也很是少，幾乎都能數的過來，好比可使用 XMLHttpRequest 發送 Ajax 請求，可使用 setTimeout()/setInterval 和 clearTimeout()/setInterval()，還能夠訪問 navigator 的部分屬性。

十、HTML5 服務器發送事件

　　HTML5 服務器發送事件（server-sent event）容許網頁得到來自服務器的更新。

　　(1)、Server-Sent 事件 - 單向消息傳遞

　　Server-Sent 事件指的是網頁自動獲取來自服務器的更新。

　　之前也可能作到這一點，前提是網頁不得不詢問是否有可用的更新。

　　經過服務器發送事件，更新可以自動到達。

　　好比：Facebook/Twitter 更新、估價更新、新的博文、賽事結果等。

　　除了 IE 以外，全部主流瀏覽器均支持服務器發送事件。

　　(2)、接收 Server-Sent 事件通知

　　EventSource 對象用於接收服務器發送事件通知：

1 var source = new EventSource("html5/getsse.php");
2     source.onmessage = function(event){
3     document.getElementById("result").innerHTML += event.data + "<br>";
4 };

　　代碼解析：

　　　　①、建立一個新的 EventSource 對象，而後規定發送更新的頁面的 URL，在上面的例子中是："html5/getsse.php"。

　　　　②、每接收到一次更新，就會發生 onmessage 事件。

　　　　③：當 onmessage 事件發生時，把已接收的數據插入 id 爲 "result" 的元素中。

　　(3)、檢測 Server-Sent 事件支持

　　可使用下面的代碼來檢測瀏覽器是否支持服務器發送事件：

1 if(typeof(EventSource) !== "undefined"){
2     var source = new EventSource("html5/getsse.php");
3 }
4 else{
5     document.getElementById("result").innerHTML = "抱歉，你的瀏覽器不支持 server-sent 事件...";
6 }

　　這一段代碼並非必要的，在調試程序時，能夠在 IE 中查看效果。

　　(4)、服務器端代碼實例

　　既然 Server-Sent 事件是獲取來自服務器的更新，那麼在測試代碼時，就必須獲得服務器端的支持，因此 Server-Sent 的測試都要在 WAMP 中進行，看以在 JavaScript學習總結【12】、JS AJAX應用 這篇文章中瞭解更多關於 WAMP 配置的知識。

　　有了本地服務器以後，還須要可以發送數據更新的程序，好比 PHP 和 Node.js。

　　PHP 即超文本預處理器，是一種通用開源腳步語言，是用於建立動態交互性站點的強有力的服務器端腳本語言。

　　JavaScript 是一種運行在瀏覽器的腳本，簡單，輕巧，易於編輯，而 Node.js 能夠說就是運行在服務器端的 JavaScript，Node.js 是一個基於Chrome JavaScript 運行時創建的平臺，用於方便地搭建響應速度快、易於擴展的網絡應用。Node.js 是一個事件驅動 I/O 服務端 JavaScript 環境，Node.js 使用事件驅動、非阻塞I/O 模型而得以輕量和高效，他是基於 Google 的 V8 引擎，V8 引擎執行 Javascript 的速度很是快，性能很是好。Node.js 對一些特殊用例進行了優化，提供了替代的 API，使得 V8 在非瀏覽器環境下運行得更好。

　　服務器端事件流的語法也很簡單，把 "Content-Type" 報頭設置爲 "text/event-stream"，就能夠發送事件流了。

　　下面是用於服務器端端的 PHP 代碼：

　　這裏須要注意一下：使用 PHP 獲取當前系統時間時，由於 PHP 默認是格林威治標準時間，因此跟北京時間會有相差，在調試程序以前須要手動修改 php.ini 配置文件，用記事本打開該文件，Ctrl+F 查找 date，找到 date.timezone，將其修改成 date.timezone = PRC，PRC 爲中華人民共和國。也能夠在獲取時，使用代碼完成：$time = date('Y-m-d H:i:sa',time() + 7*3600)。

1 <?php
2 header('Content-Type: text/event-stream');
3 header('Cache-Control: no-cache');
4 $time = date('Y-m-d H:i:sa');
5 echo "data: 服務器時間: {$time}\n\n";
6 flush();
7 ?>

　　代碼解析：

　　　　①：把報頭 "Content-Type" 設置爲 "text/event-stream"。

　　　　②：規定不對頁面進行緩存。

　　　　③：輸出發送日期，始終以 "data: " 開頭。

　　　　④：向網頁刷新輸出數據。

　　下面是完整的 HTML 代碼：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>服務器發送事件</title>
 6 </head>
 7 <body>
 8 <h1>獲取服務端更新數據</h1>
 9 <div id="result"></div>
10 <script>
11 if(typeof(EventSource) !== "undefined"){
12     var source = new EventSource("html5/getsse.php");
13         source.onmessage = function(event){
14             document.getElementById("result").innerHTML += event.data + "<br>";
15         };
16 }
17 else{
18     document.getElementById("result").innerHTML = "抱歉，你的瀏覽器不支持 server-sent 事件...";
19 }
20 </script>
21 </body>
22 </html>

　　可使用我的配置的站點，在瀏覽器打開上面的程序。

　　由於除了 IE 以外，全部主流瀏覽器均支持服務器發送事件。因此在 IE 中顯示爲：

　　在 Chrome 下顯示爲：

　　(5)、EventSource 對象

　　在上面的例子中，使用 onmessage 事件來獲取消息，還可使用其餘事件：

事件	說明
onmessage	當接受到消息時運行腳本
onopen	當通往服務器的連接被打開時運行腳本
onerror	當發生錯誤時運行腳本

十一、HTML5 語義元素

　　語義= 意義

　　語義元素 = 元素的意義

　　(1)、什麼是語義元素？

　　一個語義元素可以清楚的描述其意義給瀏覽器和開發者。

　　無語義元素好比：<div> 和 <span> 無需考慮內容。

　　語義元素好比：<form>，<table>，<img> 清楚的定義了它的內容。

　　(2)、HTML5中新的語義元素

　　不少現有網站仍然使用 DIV+CSS 來佈局頁面，頁面的全部內容都包含在 DIV 內，再使用 CSS 來指定各部分的樣式，隨便打開幾個關於 H5 或者 CSS3 網站，打開調試工具，在 body 內也是一堆 DIV，大致結構以下：

 1 <div id="header">
 2     #header 指定網頁頭部    
 3 </div>
 4 <div id="nav">
 5     #nav 指定網頁導航欄
 6 </div>
 7 <div id="main">
 8     #main 指定主體內容
 9 </div>
10 <div id="footer">
11     #footer 指定頁腳
12 </div>

　　HTML5 提供了新的語義元素來明確一個 Web 頁面的不一樣部分：

　　　　<header> 頁面頭部。

　　　　<nav> 頁面導航欄。

　　　　<article> 獨立的內容，內容自己必須是有意義的且必須是獨立於文檔的其他部分。

　　　　<section> 文檔的某個區域，好比章節、頭部、底部或者文檔的其餘區域。

　　　　<aside> 頁面的側邊欄內容。

　　　　<figure> 獨立的流內容，好比圖像、圖表、照片、代碼等等。

　　　　<figcaption> 定義 <figure> 元素的標題。

　　　　<footer>文檔或者文檔的一部分區域的頁腳，一個文檔中能夠定義多個 <footer> 元素。

　　下面的例子，是一個標準的 HTML5 頁面佈局：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>HTML5 頁面</title>
 6 </head>
 7 <body>
 8 <header>頁面頭部</header>
 9 <nav>導航欄</nav>
10 <article>
11     <section>內容</section>
12 </article>
13 <aside>側邊欄</aside>
14 <footer>頁腳</footer>
15 </body>
16 </html>

　　(3)、新元素解析

　　<header> 標籤描述了文檔的頭部區域。該元素可用於定義內容的介紹展現區域，在頁面中可使用多個 <header> 元素。

　　<nav> 標籤訂義導航連接的部分。該元素用於定義頁面的導航連接部分區域，可是，不是全部的連接都須要包含在 <nav> 元素中。

　　<article> 標籤訂義獨立的內容，該元素內容的潛在來源：論壇帖子、博客文章、新聞故事、用戶評論等。

　　<section> 標籤訂義文檔中的節，好比章節、頁眉、頁腳或文檔中的其餘部分。

　　　　根據 W3C HTML5 文檔描述，section 包含了一組內容及其標題：

1 <section>
2     <h1>標題</h1>
3     <p>內容</p>
4 </section>

　　<aside> 標籤訂義頁面主區域內容以外的內容，好比側邊欄。該元素的內容應與主區域的內容相關。

　　<footer> 標籤描述了文檔或文檔的底部區域，一個頁腳一般包含文檔的做者，著做權信息，連接的使用條款，聯繫信息等。

　　<figure> 標籤規定獨立的流內容，好比圖像、圖表、照片、代碼等等。該元素的內容應該與主內容相關，若是被刪除，則不該對文檔流產生影響。

　　<figcaption> 標籤訂義 <figure> 元素的標題，該元素應該被置於 figure 元素的第一個或最後一個子元素的位置。

1 <figure>
2     <img src="images/beijing.jpg" width="400" height="290" />
3     <figcaption>北京天安門廣場</figcaption>
4 </figure>

　　以上元素除了 <figcaption> 元素以外，其他8個元素都屬於塊元素。

　　(4)、IE 低版本兼容

　　IE9+，Firefox，Chrome、Safari 和 Opera 都支持這些新元素，可是 IE8 及其更早版本並不支持，這些新元素不能做爲父節點包裹子元素，而且不能應用 CSS 樣式。

　　解決方法：使用 HTML5 Shiv Javascript 腳原本解決 IE 的兼容問題。

　　能夠引用百度靜態資源公共庫或 Bootstrap 中文網開源項目提供的 CDN 服務，也可使用又拍雲 JavaScript 庫加速服務，360 也提供了 CDN 加速服務。

　　下面是引用百度的 html5.js 文件：

1 <head>
2 <!--[if lt IE 9]>
3 <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
4 <![endif]-->
5 </head>

　　上面的代碼在瀏覽器低於 IE9 版本時會加載 html5shiv.js 文件，必須將其放置於 <head> 元素中，由於 IE 瀏覽器須要在頭部加載後渲染這些 HTML5 的新元素。

　　經過本地測試，雖然低版本的瀏覽器能夠識別這些新元素了，而且能夠應用 CSS 樣式，可是和 IE9+ 仍是有一點差別。

十二、HTML5 新的 input 類型

　　HTML5 擁有多個新的表單輸入類型，這些新特性提供了更好的輸入控制和驗證。

　　HTML5 新增長的輸入類型有：color、search、url、email、tel、number、range、time、month、week、date、datetime、datetime-local。

　　(1)、input 類型：color

　　color 類型用在 input 字段主要用於選取顏色。

　　下面的例子，從拾色器中選擇一個顏色：

1 <form action="URL" method="get">
2     選擇你喜歡的顏色: <input type="color" name="lovecolor" /><br/>
3     <input type="submit" value="提交" />
4 </form>

　　注意：Chrome、Firefox 和 Opera 支持 color 類型，IE 瀏覽器不支持。

　　在 Chrome 中點擊按鈕後，調用拾色器，顯示以下：

(2)、input 類型：search

　　search 類型用於搜索域，好比站點搜索或 Google 搜索。

　　下面的例子，定義一個搜索字段用於輸入搜索字符串：

1 <form action="URL" method="get">
2     找找看: <input type="search" name="lookup" /><br/>
3     <input type="submit" value="提交" />
4 </form>

　　注意：使用 search 類型須要服務器端支持，目前只有 Chrome 和 Safari 支持該類型，IE 和 Firefox 不支持。

　　(3)、input 類型：url

　　url 類型用於應該包含 URL 地址的輸入域。在提交表單時，會自動驗證 url 域的值。

　　下面的例子，定義輸入URL字段：

1 <form action="URL" method="get">
2     添加你的博客: <input type="url" name="blog" /><br/>
3     <input type="submit" value="提交" />
4 </form>

　　注意：全部瀏覽器都支持 url 類型，在提交表單時會自動驗證輸入的值，若是錯誤，在 Chrome 中會顯示一個黃色的感嘆號，提示：請輸入網址，失去焦點輸入框恢復默認顏色。在 Firefox 提示：請輸入一個 URL，而且輸入框變爲淺紅色，若失去焦點，輸入框也會變爲淺紅色，若是輸入 http: 失去焦點時就恢復默認顏色。在 IE 中提示：你必須輸入有效 URL，而且輸入框會增長一個大概2像素的輪廓，非常醒目，失去焦點輸入框恢復默認顏色。

　　在全部瀏覽器中輸入 http: ，他就認爲你輸入對了，這時候若是給後邊接着輸入漢字，就能夠成功提交了。這就說明了 url 類型提交表單時自動驗證很不嚴謹，仍是不能過濾掉無效的輸入，用一句話形容就是：猜中了開頭，卻猜不中這結局啊。因此爲了防止沒必要要的數據，過濾無效的輸入，還須要執行進一步的判斷。

　　(4)、input 類型: email

　　email 類型用於應該包含 E-mail 地址的輸入域。在提交表單時，會自動驗證 email 域的值是否合法有效：

1 <form action="URL" method="get">
2     E-mail: <input type="email" name="email" /><br/>
3     <input type="submit" value="提交" />
4 </form>

　　注意：全部瀏覽器都支持 email 類型，對於輸入錯誤，提示方式和 url 類型相同，但也有亮點，值得一提，若是輸入錯誤，在 Firefox 中只會機械式的提示一句：請輸入電子郵件地址，只要不輸入 @，無論你如何變換招式，他只這麼一句，輸入字母或者數字再輸入 @，仍是這一句，而後再輸入一個漢字，能夠成功提交了，我就呵呵了，能夠看下幾大郵箱提供商是如何註冊郵箱的，網易和騰訊的默認的屏蔽了中文輸入，新浪能夠輸入漢字，可是若是你輸入漢字，他會提示你不能有中文。再來看一下 IE，也好不到哪去，可是相比 Firefox 就友好太多了，不過他也只會一句：你必須輸入有效電子郵件地址，可是他不支持帶有中文的提交，看來 Firefox 對中國的漢語言文化仍是比較偏心的，開個玩笑。這裏要表揚一下 Chrome，他的自動驗證功能就比較完善，而且提示頗有人性化，這對於用戶來講體驗就比較好，好比你在輸入框輸入 12，他會提示：請在電子郵件地址中包括「@」，「12」中缺乏「@」，而後加上 @，他會提示：請在「@」後面輸入內容，「12@」不完整，再接着給後面輸入一個漢字，這就能夠成功提交了，看來谷歌對於中國始終都是嚮往的，又調皮了。

　　url 類型和 email 類型在提交表單時，都會自動驗證輸入的值是否有效，可是這個自動驗證有點讓人沒法直視，可是這也是一種進步，最起碼是有了，相對來講也很友好了。固然對於用戶來講，也不可能無聊的像我同樣，大多都是直接複製粘貼的，或者輸入正確的，但世界上沒有絕對的事，凡事都是相對的，也不排除有人在輸入時出現錯誤，尚未及時發現而後還提交了，對於提交了一個帶有中文的郵箱，你要上哪找去，反正目前我是不知道哪一個網站支持中文郵箱地址，那畫面太美，雖然中國互聯網絡信息中心發佈了中文域名郵箱註冊平臺，能夠註冊中文郵箱地址，可是中文的並不適合作網站的東西。因此爲了不無效的信息，須要進一步的對用戶輸入進行驗證。

　　雖然作這些低趣味的測試至關無聊，可是對於一個前端工程師來講，也是頗有意義的，尤爲是對一些新增長的東西，新的技術，就須要在多個主流瀏覽器進行測試，以確保兼容性，而且要了解各個瀏覽器之間的差別，這對於前端來講是至關有價值的，前端直接呈現給用戶交互式的體驗，直接關係到網站的易用性，以及可操做性，也能夠說關係到網站的流量，一個優秀甚至是卓越的網站，除了優美的設計、友好的界面顯示之外，還必須有美好的體驗，對於用戶來講，體驗纔是王道，固然這也是創建在能爲用戶提供具備價值的內容的前提下，外表再華麗的東西，沒有價值，也是沒有意義的，人們最多會被吸引，並不會駐足。前端所涉及到的知識面很是廣，因此前端也是個細膩活，每一步的邁出都是大量知識積累的結晶。

　　(5)、input 類型：tel

　　tel 類型定義輸入電話號碼字段。以下：

1 <form action="URL" method="get">
2     電話號碼: <input type="tel" name="usertel" /><br/>
3     <input type="submit" value="提交" />
4 </form>

　　注意：目前瀏覽器都不支持該類型。

　　(6)、input 類型：number

　　number 類型用於應該包含數值的輸入域，輸入數字的字段，支持設定對所接受的數字的限定。

　　下面的例子，定義一個數值輸入域，並對輸入進行限定：

1 <form action="URL" method="get">
2     數量 ( 1 到 10 之間): <input type="number" name="num" min="1" max="10" /><br/>
3     <input type="submit" value="提交" />
4 </form>

　　可使用下面的屬性來規定對數字類型的限定：

　　　　①、value - 規定默認值。

　　　　②、min - 規定容許的最小值。

　　　　③、max- 規定容許的最大值。

　　　　④、step - 規定合法的數字間隔，好比 step="3"，則合法的數是 -三、0、三、6 等。

　　注意：全部瀏覽器都支持該類型。可是也存在差別，Chrome 和 Firefox 都提供了滾動機制能夠選擇合法值，但 Chrome 只有在得到焦點時才顯示滾動條，失去焦點則隱藏，而 Firefox 始終都是顯示的，IE 不提供滾動機制。能夠自行輸入，若是輸入值不合法，在失去焦點時， Firefox 輸入框會改變樣式，顯示爲淺紅色，其餘則爲默認顏色。點擊提交，Chrome 提示：值必須小於或等於 10， Firefox 提示：請選擇一個不大於10的值，IE 提示：你必須輸入一個介於 1 到 10 之間的值。

　　(7)、input 類型：range

　　range 類型用於應該包含必定範圍內數字值的輸入域，用於精確值不重要的輸入數字的控件，該類型顯示爲滑動條。

　　下面的例子，定義一個不須要很是精確的數值，相似於滑塊控制：

1 <form action="URL" method="get">
2     選擇一個值：<input type="range" name="point" min="1" max="10" /><br/>
3     <input type="submit" value="提交" />
4 </form>

　　該類型也可使用這幾個屬性來規定對數字類型的限定：value、min 、max 、step。

　　注意：全部瀏覽器都支持該類型，可是顯示也存在差別，Chrome 和 Firefox 都顯示爲一個橫槓槓，一個可滑動的小塊塊，Chrome 的小塊塊長的長條形，Firefox 的小塊塊下面是個錐形，相比還算友好一點，但都不提示代碼中規定的 1-10 數值。IE 顯示就比較友好了，也顯示爲一個橫槓槓，可是作了美化效果，比 Chrome 和 Firefox 更高大上，而且在滑動時可顯示數值，IE 的滑塊是在橫槓槓之中，並不超出，而且滑過的區域會顯示爲淡藍色。以下：

　　(8)、input 類型：time

　　time 類型容許你選擇一個時間，用於輸入時間的控件，不帶時區。

　　下面的例子，定義可輸入時間控制器：

1 <form action="URL" method="get">
2     選擇時間: <input type="time" name="utime" /><br/>
3     <input type="submit" value="提交" />
4 </form>

　　注意：IE 和 Firefox 不支持該類型，Chrome 支持。在 Chrome 中默認顯示爲：--:--，鼠標移入得到焦點時顯示滾動條，能夠選擇 24 小時制時間。以下：

　　(9)、input 類型：month

　　month 類型容許你選擇一個月份，month 和 year 控件，不帶時區。

　　下面的例子，定義月與年：

1 <form action="URL" method="get">
2     生日 (月和年): <input type="month" name="ymonth" /><br/>
3     <input type="submit" value="提交" />
4 </form>

　　注意：IE 和 Firefox 不支持該類型，Chrome 支持。在 Chrome 中默認顯示爲：-—-年--月，鼠標移入得到焦點時顯示滾動條，而且還帶有一個能夠選擇年份的控件。

　　在 Chrome 中顯示以下：

　　(10)、input 類型：week

　　week 類型容許你選擇周和年，week 和 year 控件，不帶時區。

　　下面的例子，定義周和年：

1 <form action="URL" method="get">
2     選擇周：<input type="week" name="wyear" /><br/>
3     <input type="submit" value="提交" />
4 </form>

　　注意：IE 和 Firefox 不支持該類型，Chrome 支持。在 Chrome 中默認顯示爲：-—- 年第 — 周，鼠標移入得到焦點時顯示滾動條，而且還帶有一個能夠選擇年份和周的控件。

　　在 Chrome 中顯示以下：

　　(11)、input 類型：date

　　date 類型容許你從一個日期選擇器選擇一個日期，date 控件，包括年、月、日，不包括時間。

　　下面的例子，定義一個時間控制器：

1 <form action="URL" method="get">
2     生日: <input type="date" name="bday" /><br/>
3     <input type="submit" value="提交" />
4 </form>

　　注意：IE 和 Firefox 不支持該類型，Chrome 支持。在 Chrome 中默認顯示爲：年 /月/日，鼠標移入得到焦點時顯示滾動條，而且還帶有一個能夠選擇年份的控件。

　　在 Chrome 中顯示以下：

　　(12)、input 類型：datetime

　　datetime 類型容許你選擇一個日期，date 和 time 控件，包括年、月、日、時、分、秒、幾分之一秒，基於 UTC 時區。

　　下面的例子，定義一個日期和時間控制器（本地時間）:

1 <form action="URL" method="get">
2     生日 (日期和時間): <input type="datetime" name="btime" /><br/>
3     <input type="submit" value="提交" />
4 </form>

　　注意：IE 和 Firefox 和 Chrome 都不支持該類型。

　　(13)、input 類型：datetime-local

　　datetime-local 類型容許你選擇一個日期和時間，date 和 time 控件，包括年、月、日、時、分、秒、幾分之一秒，不帶時區。

　　下面的例子，定義一個日期和時間：

1 <form action="URL" method="get">
2     生日 (日期和時間): <input type="datetime-local" name="btime" /><br/>
3     <input type="submit" value="提交" />
4 </form>

　　注意：IE 和 Firefox 不支持該類型，Chrome 支持。在 Chrome 中默認顯示爲：年 /月/日 --:--，鼠標移入得到焦點時顯示滾動條，而且還帶有一個能夠選擇年份的控件。

　　在 Chrome 中顯示以下：

1三、HTML5 新表單元素

　　HTML5 新增長了3個表單元素：<datalist>、<keygen>、<output>

　　(1)、datalist

　　<datalist>元素規定輸入域的選項列表，列表是經過 datalist 內的 option 元素建立的，option 元素永遠都要設置 value 屬性。

　　<datalist> 屬性規定 form 或 input 域應該擁有自動完成功能。當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項。

　　使用 <input> 元素的 list 屬性與 <datalist> 元素綁定。

　　下面的例子，<input> 元素使用 <datalist> 預約義值：

 1 <form action="URL" method="get">
 2     經常使用搜索：<input type="url" list="url-list" name="search" />
 3     <datalist id="url-list">
 4         <option label="百度搜索" value="https://www.baidu.com" />
 5         <option label="360搜索" value="http://www.so.com" />
 6         <option label="搜狗搜索" value="https://www.sogou.com" />
 7         <option label="有道搜索" value="http://www.youdao.com" />
 8         <option label="必應搜索" value="http://cn.bing.com" />
 9     </datalist>
10     <input type="submit" value="提交" />
11 </form>

　　注意：全部瀏覽器都支持該元素，可是也存在差別。在 Chrome 中輸入框得到焦點時，會在後邊顯示一個下拉箭頭，點擊後顯示預選項，而且還顯示 value 屬性值，若是不點擊箭頭，在得到焦點後還須要再點擊一次才顯示預選項。在 Firefox 和 IE 中不會顯示下拉箭頭，也不顯示 value 屬性值。Firefox 在得到焦點後也須要在點擊一次才顯示預選項，可是在 IE 中當得到焦點後，就會顯示預選項。

　　在 Chrome 中顯示以下：

　　在 Firefox 中顯示以下：

　　在 IE 中顯示以下：

　　(2)、keygen

　　<keygen> 元素的做用是提供一種驗證用戶的可靠方法。

　　<keygen>標籤規定用於表單的密鑰對生成器字段。當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。

　　私鑰（private key）存儲於客戶端，公鑰（public key）則被髮送到服務器。

　　公鑰可用於以後驗證用戶的客戶端證書（client certificate）。

　　下面的例子，帶有 keygen 字段的表單：

1 <form action="URL" method="get">
2     用戶名: <input type="text" name="username" /><br/>
3     加　密: <keygen name="security" /><br/>
4     <input type="submit" value="提交" />
5 </form>

　　注意：除了 IE 以外全部瀏覽器都支持該元素。

　　目前，瀏覽器對此元素的糟糕的支持度，不足以使其成爲一種有用的安全標準。

　　在 Chrome 中顯示以下：

　　在 Firefox 中顯示以下：

　　在 IE 中顯示以下：

　　(3)、<output>

　　<output> 元素用於不一樣類型的輸出，好比計算或腳本輸出。

　　下面的例子，是一個簡易的計算器，將計算結果顯示在 <output> 元素：

1 <form action="URL" method="get" oninput="num.value=parseInt(x.value)+parseInt(y.value)">
2     0<input type="range" id="x" value="50">100
3     +<input type="number" id="y" value="50">
4     =<output name="num" for="x y"></output>
5 </form>

　　注意：除了 IE 以外全部瀏覽器都支持該元素。

　　使用 HTML5 的新元素和新輸入類型，能夠很輕鬆的完成文本框求和，雖然使用了 number 類型，用於規定輸入數字的字段，而且全部瀏覽器都支持，可是進行文本框求和時，仍會被斷定爲字符串，須要使用 Number 對象方法將字符串類型轉換爲數字類型，也可使用 parseInt 函數解析一個字符串返回一個整數，可是對於計算程序仍是使用 Number 對象方法更靠譜些，好比你在第一個文本框輸入 1，parseInt 就會顯示 NaN，除非輸入第二個值，纔會計算結果。在上面例子中，使用了 HTML5 新的事件屬性 oninput，該事件指定在用戶輸入時觸發腳本，使用該事件的好處就是能夠動態的顯示計算結果，只要輸入值，就顯示結果，在 Chrome 中若是輸入中文，則會直接被屏蔽掉，顯示 NaN，而在 Firefox 中能夠輸入中文，可是輸入框出現紅色的錯誤提示，結果顯示 NaN：

 1 <form action="URL" method="get" oninput="showNum()">
 2     <input type="number" id="a" /> +
 3     <input type="number" id="b" /> =
 4     <output id="result" name="num" for="a b"></output>
 5 </form>
 6 <script>
 7 function showNum(){
 8     numA = document.getElementById('a').value;
 9     numB = document.getElementById('b').value;
10     document.getElementById('result').value = parseInt(numA) + parseInt(numB);
11 }
12 </script>

　　oninput 事件在用戶輸入時觸發腳本，在 <input> 或 <textarea> 元素的值發生改變時觸發。該事件相似於 onchange 事件，不一樣之處在於 oninput 事件在元素值發生變化是當即觸發， onchange 在元素失去焦點時觸發。另一點不一樣是 onchange 事件也能夠做用於 <keygen> 和 <select> 元素。全部瀏覽器都支持該事件，包括 IE。

　　下面的例子，是 oninput 事件的一個小應用，能夠動態跟隨顯示文本框輸入：

1 隨意輸入：<input type="text" id="txt" oninput="show()">
2 <p id="demo"></p>
3 <script>
4 function show() {
5     var t = document.getElementById('txt').value;
6     document.getElementById('demo').innerHTML = '你輸入的是: ' + t;
7 }
8 </script>

1四、HTML5 新表單屬性

　　HTML5 爲 <form> 和 <input> 標籤添加了多個新屬性。幾乎全部瀏覽器都支持這些新屬性。

　　<form> 新屬性：autocomplete、novalidate 。

　　<input> 新屬性：

　　　　autocomplete、autofocus、list、multiple、pattern (RegExp)、placeholder、required、

　　　　width 和 height 、min/max 和 step、

　　　　form、formaction、formenctype、formmethod 、formnovalidate、formtarget。

　　(1)、<form> / <input> autocomplete 屬性

　　autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。

　　當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項。

　　注意：autocomplete 屬性有可能在 form 元素中是開啓的，而在 input 元素中是關閉的。

　　autocomplete 適用於 <form> 標籤，以及如下類型的 <input> 標籤：text，search，url，telephone，email，password，datepickers，range 以及 color。

　　(2)、<form> novalidate 屬性

　　novalidate 屬性的一個 boolean 屬性。

　　novalidate 屬性規定在提交表單時不該該驗證 form 或 input 域。

　　(3)、<input> autofocus 屬性

　　autofocus 屬性是一個 boolean 屬性。

　　autofocus 屬性規定在頁面加載時，域自動地得到焦點。

　　注意：autofocus 屬性適用於全部 <input> 標籤的類型。

　　(4)、<input> list 屬性

　　list 屬性規定輸入域的 datalist。

　　datalist 元素是輸入域的選項列表。

　　(5)、<input> multiple 屬性

　　multiple 屬性是一個 boolean 屬性。

　　multiple 屬性規定<input> 元素中可選擇多個值。

　　注意：multiple 屬性適用於如下類型的 <input> 標籤：email 和 file。

　　(6)、<input> pattern 屬性

　　pattern 屬性規定用於驗證 input 域的模式（pattern），模式是正則表達式。

　　即 pattern 屬性描述了一個正則表達式用於驗證 <input> 元素的值。

　　注意：pattern 屬性適用於如下類型的 <input> 標籤: text，search，url，tel，email 以及 password。

　　(7)、<input> placeholder 屬性

　　placeholder 屬性提供一種提示，描述輸入域所期待的值。

　　簡短的提示會在輸入域爲空時顯示出現，會在輸入域得到焦點時消失。

　　注意：placeholder 屬性適用於如下類型的 <input> 標籤：text，search，url，telephone，email 以及 password。

　　(8)、<input> required 屬性

　　required 屬性是一個 boolean 屬性。

　　required 屬性規定必須在提交以前填寫輸入域，輸入域不能爲空。

　　注意：required 屬性適用於如下類型的 <input> 標籤：text，search，url，telephone，email，password，date pickers，number，checkbox，radio 以及 file。

　　(9)、<input> width 和 height 屬性

　　width 和 height 屬性規定用於 image 類型的 <input> 標籤的圖像寬度和高度。

　　注意：width 和 height 屬性只適用於 image 類型的<input> 標籤。

　　圖像一般會同時指定寬度和高度屬性。若是圖像設置寬度和高度，圖像所需的空間在加載頁時會被保留。若是沒有這些屬性，瀏覽器不知道圖像的大小，就不能預留適當的空間。圖片在加載過程當中會使頁面佈局效果改變（儘管圖片已加載）。

　　(10)、<input> min/max 和 step 屬性

　　min、max 和 step 屬性用於爲包含數字或日期的 input 類型規定限定（約束）。

　　min 屬性規定輸入域所容許的最小值。

　　max 屬性規定輸入域所容許的最大值。

　　step 屬性爲輸入域規定合法的數字間隔。若是 step="3"，則合法的數是 -3，0，3，6，9 等。

　　注意：min、max 和 step 屬性適用於如下類型的 <input> 標籤：date pickers(日期選擇器)、number 以及 range。

　　step 屬性能夠與 min 和 max 屬性建立一個區域值。

　　注意：step 屬性適用於如下類型的 <input> 標籤：number，range，date，datetime，datetime-local，month，time 以及 week。

　　(11)、<input> form 屬性

　　form 屬性規定輸入域所屬的一個或多個表單。

　　form 屬性必須引用所屬表單的 id，如需引用一個以上的表單，可使用空格分隔。

　　注意：form 屬性適用於全部 <input> 標籤的類型。

　　下面 5 個屬性都屬於表單重寫屬性（form override attributes），容許重寫 form 元素的某些屬性設定。

　　表單重寫屬性與 type="submit" 和 type="image" 配合使用，這些屬性對於建立不一樣的提交按鈕頗有幫助。

　　(12)、<input> formaction 屬性

　　formaction 屬性用於描述表單提交的 URL 地址。

　　formaction 屬性會覆蓋 <form> 元素中的 action 屬性，用於重寫表單的 action 屬性。

　　(13)、<input> formenctype 屬性

　　formenctype 屬性描述了表單提交到服務器的數據編碼，只針對 form 表單中 method="post" 表單。

　　formenctype 屬性覆蓋 form 元素的 enctype 屬性，用於重寫表單的 enctype 屬性。

　　(14)、<input> formmethod 屬性

　　formmethod 屬性定義了表單提交的方式。

　　formmethod 屬性覆蓋了 <form> 元素的的 method 屬性，用於重寫表單的 method 屬性。

　　(15)、<input> formnovalidate 屬性

　　novalidate 屬性是一個 boolean 屬性。

　　novalidate屬性描述了 <input> 元素在表單提交時無需被驗證。

　　formnovalidate 屬性會覆蓋 <form> 元素的 novalidate 屬性，用於重寫表單的 novalidate 屬性。

　　(16)、<input> formtarget 屬性

　　formtarget 屬性指定一個名稱或一個關鍵字來指明表單提交數據接收後的展現。

　　formtarget 屬性覆蓋 <form>元素的 target 屬性，用於重寫表單的 target 屬性。

1五、HTML5 新元素

　　爲了更好地處理現在的互聯網應用，HTML5 添加了不少新元素及功能，好比：圖形的繪製，多媒體內容，更好的頁面結構，地理定位，包括網頁應用程序緩存，本地存儲，Web Worker（網絡工做者）等。

　　(1)、新的結構元素

　　HTML5 提供了新的元素來建立更好的頁面結構。

　　<article> 元素定義頁面獨立的內容區域。

　　<main> 元素定義文檔的主要內容。

　　<header> 元素定義文檔的頭部區域。

　　<nav> 元素定義導航連接的部分。

　　<section> 元素定義文檔中一個區域。

　　<aside> 元素定義頁面的側邊欄內容。

　　<hgroup> 元素被用來對標題元素進行分組。

　　<figure> 元素定義一組媒體內容，以及它們的標題。

　　<figcaption> 元素定義 <figure> 元素的標題。

　　<footer> 元素定義定義文檔或者文檔的一部分區域的頁腳。

　　<dialog> 元素定義對話框，好比提示框。

　　(2)、新的多媒體元素

　　HTML5 的多媒體元素在不使用插件的狀況下便可操做媒體文件，極大地提高了用戶體驗。

　　<canvas> 元素定義圖形，好比圖表和其餘圖像。該標籤基於 JavaScript 的繪圖 API。

　　<audio> 元素定義音頻。

　　<video> 元素定義視頻。

　　<source> 元素定義多媒體資源 <video> 和 <audio>。

　　<track> 元素爲 <video> 和 <audio> 元素之類的媒體規定外部文本軌道。

　　<embed> 元素定義嵌入的內容（外部交互內容），好比插件。

　　(2)、新的 Web 應用元素

　　<menu> 元素定義命令列表或菜單，目前主流瀏覽器並不支持 <menu> 標籤。

　　<menuitem> 元素定義 menu 命令列表，定義用戶能夠從彈出菜單調用的命令/菜單項目。目前主流瀏覽器都不支持該標籤。

　　<command> 元素定義 menu 命令按鈕，定義用戶可能調用的命令（好比單選按鈕、複選框或按鈕）。目前主流瀏覽器都不支持該標籤。

　　<meter> 元素定義度量衡（預約義範圍內的度量），僅用於已知最大和最小值的度量。已知範圍或分數值內的標量測量，也被稱爲 gauge（尺度）。

　　<progress> 元素定義任何類型的任務的進度，即運行中的進度（進程）。狀態標籤，用於進度條，好比任務過程的安裝、加載。

　　<details> 元素定義一個元素的詳細內容，描述文檔或文檔某個部分的細節，規定用戶可見的或者隱藏的需求的補充細節（對用戶是不可見的），用來供用戶開啓關閉的交互式控件。

　　<summary> 元素爲 <details> 元素定義一個可見的標題，當用戶點擊標題時會顯示出詳細信息。

　　(3)、新表單元素

　　<datalist> 元素定義選項列表，爲 input 元素定義一個下拉列表，配合 option 元素來定義 input 可能的值。--

　　<keygen> 元素用於表單的密鑰對生成器字段。--

　　<output> 元素定義不一樣類型的輸出，好比腳本的輸出，配合 output 事件。--

　　(4)、其餘語義元素

　　<time> 元素定義日期或時間。

　　<mark> 元素定義帶有記號的文本。

　　<wbr> 元素規定在文本中的何處適合添加換行符。

　　<bdi> 元素容許設置一段文本，使其脫離其父元素的文本方向設置。

　　<ruby> 元素定義 ruby 註釋，ruby 註釋是中文註音或字符，在東亞使用，顯示的是東亞字符的發音。

　　<rt> 元素定義 ruby 註釋的解釋或發音。

　　<rp> 元素在 ruby 註釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內容。

　　如下是 HTML5 刪除的元素：

　　純表現元素：

　　對可用性產生負面影響的(框架)元素：

　　產生混淆的元素：

　　建議使用語義正確的元素代替他們，並使用 CSS 來確保渲染後的效果。

　　如下是在 HTML5 中被從新定義以及與 HTML4.01 存在差別的元素：

　　<menu> 元素在 HTML4.01 已被廢棄，HTML5 從新定義了該元素。該元素定義用戶界面的菜單，配合 commond 或者 menuitem 使用。

　　<i> 元素在 HTML4.01 中呈現斜體的文本。然而，在 HTML5 中不必這麼作，可使用樣式表來格式化 <i> 元素中的文本。<i> 定義與文本中其他部分不一樣的部分，並把這部分文本呈現爲斜體文本。<i> 標籤被用來表示科技術語、其餘語種的成語俗語、想法、宇宙飛船的名字等等。在沒有其餘適當語義的元素可使用時可使用 <i> 元素。

　　<hr> 元素在 HTML4.01 中僅僅顯示爲一條水平線，而在 HTML5 中，該元素定義內容中的主題變化，並顯示爲一條水平線。

　　<a> 元素在 HTML4.01 中既能夠是超連接，也能夠是錨。在 HTML5 中該元素是超連接，可是假如沒有 href 屬性，它僅僅是超連接的一個佔位符。

　　<strog> 元素HTML4.01 中定義加粗的被強調的文本，而在 HTML 5 中該元素定義重要的文本。

　　<dl> 元素在 HTML4.01 中定義一個定義列表，而在 HTML 5 中該元素定義一個描述列表。

　　<dt> 元素在 HTML4.01 中定義一個定義列表的條目，而在 HTML 5 中該元素定義一個描述列表的項目/名字。

　　<dd> 元素在 HTML4.01 中被用來描述一個定義列表中的條目，而在 HTML 5 中該元素被用來對一個描述列表中的項目/名字進行描述。

注意：

　　根據 HTML 5 的規範，<b> 標籤應該作爲最後的選擇，只有在沒有其餘標記比較合適時才使用它。可使用 CSS 的 "font-weight" 屬性設置粗體文本。

　　HTML 5 規範聲明：標題應該用 <h1> - <h6> 標籤表示，被強調的文本應該用 <em> 標籤表示，重要的文本應該用 <strong> 標籤表示，被標記的或者高亮顯示的文本應該用 <mark> 標籤表示。

.*★*.
.*★ *.* 　　 ★
★　　　　　 *
★ .’
‘*.　　　 .
` . .