HTML5新增特性

1. 語義化標簽

2. 增強型表單 （1）新的表單輸入類型 （2）新表單元素 （3）新表單屬性 

3. 視頻和音頻

4. Canvas繪圖（圖形、路徑、文本、漸變、圖像）

5. SVG繪圖 （與Canvas的區別）

6. 地理定位

7. 拖放API

8. Web Worker

完整的Web Worker實例

9. Web Storage

10. Web Socket

11.其他

<a>標簽.html5的a標簽增加了download屬性,可利用此屬性實現圖片下載.

1. 語義化標簽

標簽	描述
<header>	文檔頭部區域
<footer>	檔的尾部區域
<nav>	導航
<section>	節（section、區段）
<article>	獨立的內容區域
<aside>	側邊欄內容
<detailes>	描述文檔或文檔某個部分的細節
<summary>	標簽包含 details 元素的標題
<dialog>	定義對話框，比如提示框

 

2. 增強型表單

（1）新的表單輸入類型

color date(從一個日期選擇器選擇一個日期) datetime datetime-local email month number range(一定范圍內數字值的輸入域) search tel time url week(選擇周和年)

 

（2）新表單元素

<datalist> 規定輸入域的選項列表

<keygen> 提供一種驗證用戶的可靠方法，標簽規定用於表單的密鑰對生成器字段。

<output> 用於不同類型的輸出，比如計算機或腳本的輸出。

（3）新表單屬性 

placehoder	簡短的提示在用戶輸入值前會顯示在輸入域上。即我們常見的輸入框默認提示，在用戶輸入后消失。
required	是一個 boolean 屬性, 要求填寫的輸入域不能為空
pattern	描述了一個正則表達式用於驗證<input> 元素的值
min 和 max	設置元素最小值與最大值
step	為輸入域規定合法的數字間隔
height 和 width	用於 image 類型的 <input> 標簽的圖像高度和寬度
autofocus	是一個 boolean 屬性。規定在頁面加載時，域自動地獲得焦點。
multiple	是一個 boolean 屬性。規定<input> 元素中可選擇多個值

 3. 視頻和音頻

<audio>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>

control屬性供添加播放、暫停、和音量控件

在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本 。

<audio> 元素允許使用多個 <source> 元素. <source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個支持的音頻文件

目前, <audio>元素支持三種音頻格式文件: MP3, Wav, 和 Ogg

<video>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持Video標簽。
</video>

control 提供了 播放、暫停和音量控件來控制視頻。也可以使用dom操作來控制視頻的播放暫停，如 play() 和 pause() 方法。

同時 video 元素也提供了 width 和 height 屬性控制視頻的尺寸.如果設置的高度和寬度，所需的視頻空間會在頁面加載時保留。如果沒有設置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據原始視頻的大小而改變。

video 元素支持多個source 元素. 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式（ MP4, WebM, 和 Ogg）

4. Canvas繪圖（圖形、路徑、文本、漸變、圖像）

canvas只是圖形容器，必須使用腳本來繪制圖形。

圖形

(1) 創建一個畫布，一個畫布在網頁中是一個矩形框，通過 <canvas> 元素來繪制。默認情況下 元素沒有邊框和內容。

id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

標簽通常需要指定一個id屬性 (腳本中經常引用), width 和 height 屬性定義的畫布的大小，使用 style 屬性來添加邊框。你可以在HTML頁面中使用多個 <canvas> 元素

(2) 使用Javascript來繪制圖像，canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成

<script>
　　var c=document.getElementById("myCanvas");
　　var ctx=c.getContext("2d");
//getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
　　ctx.fillStyle="#FF0000";
　　ctx.fillRect(0,0,150,75);
</script>
//設置 fillStyle 屬性可以是CSS顏色，漸變，或圖案。fillStyle默認設置是#000000（黑色）。
//fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。　

路徑

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
</script>
//定義開始坐標(0,0), 和結束坐標 (200,100). 然后使用 stroke() 方法來繪制線條
//moveTo(x,y) 定義線條開始坐標
  lineTo(x,y) 定義線條結束坐標

文本 （重要的屬性和方法如下：）

font - 定義字體

fillText(text,x,y) - 在 canvas 上繪制實心的文本

strokeText(text,x,y) - 在 canvas 上繪制空心的文本

ex：使用 "Arial" 字體在畫布上繪制一個高 30px 的文字（實心）

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

漸變 

漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。

以下有兩種不同的方式來設置Canvas漸變：

　　createLinearGradient(x,y,x1,y1) - 創建線條漸變

　　createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變

當我們使用漸變對象，必須使用兩種或兩種以上的停止顏色。addColorStop()方法指定顏色停止，參數使用坐標來描述，可以是0至1.

使用漸變，設置fillStyle或strokeStyle的值為漸變，然后繪制形狀，如矩形，文本，或一條線。

ex： 創建了一個線性漸變，使用漸變填充矩形

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

圖像

把一幅圖像放置到畫布上, 使用 drawImage(image,x,y) 方法

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

5. SVG繪圖 （與Canvas的區別）

SVG是指可伸縮的矢量圖形

區別：

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

Canvas 通過 JavaScript 來繪制 2D 圖形。

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

在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。

Canvas 是逐像素進行渲染的。在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。

6. 地理定位

HTML5 Geolocation（地理定位）用於定位用戶的位置。

 

7. 拖放API

拖放是一種常見的特性，即抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標准的一部分，任何元素都能夠拖放。

拖放的過程分為源對象和目標對象。源對象是指你即將拖動元素，而目標對象則是指拖動之后要放置的目標位置。

拖放的源對象(可能發生移動的)可以觸發的事件——3個：

dragstart：拖動開始

drag：拖動中

dragend：拖動結束

整個拖動過程的組成： dragstart*1 + drag*n + dragend*1

拖放的目標對象(不會發生移動)可以觸發的事件——4個：

dragenter：拖動着進入

dragover：拖動着懸停

dragleave：拖動着離開

drop：釋放

整個拖動過程的組成1： dragenter*1 + dragover*n + dragleave*1

整個拖動過程的組成2： dragenter*1 + dragover*n + drop*1

dataTransfer：用於數據傳遞的“拖拉機”對象；

  在拖動源對象事件中使用e.dataTransfer屬性保存數據：

e.dataTransfer.setData( k,  v )

  在拖動目標對象事件中使用e.dataTransfer屬性讀取數據：

var value = e.dataTransfer.getData( k )

8. Web Worker

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

web worker 是運行在后台的 JavaScript，獨立於其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在后台運行。

(1) 首先檢測瀏覽器是否支持 Web Worker

if(typeof(Worker)!=="undefined"){
  // 是的! Web worker 支持!
  // 一些代碼.....
  }else{
  // //抱歉! Web Worker 不支持
  }

下面的代碼檢測是否存在 worker，如果不存在，- 它會創建一個新的 web worker 對象，然后運行 "demo_workers.js" 中的代碼

if(typeof(w)=="undefined")
  {
  w=new Worker("demo_workers.js");
  }

然后我們就可以從 web worker 發送和接收消息了。向 web worker 添加一個 "onmessage" 事件監聽器：

w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};

當 web worker 傳遞消息時，會執行事件監聽器中的代碼。event.data 中存有來自 event.data 的數據。當我們創建 web worker 對象后，它會繼續監聽消息（即使在外部腳本完成之后）直到其被終止為止。

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

完整的Web Worker實例

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}

function stopWorker()
{ 
w.terminate();
}
</script>

</body>
</html>

創建的計數腳本，該腳本存儲於 "demo_workers.js" 文件中

var i=0;

 function timedCount()
 {
 i=i+1;
 postMessage(i);
 setTimeout("timedCount()",500);
 }

 timedCount();

9. Web Storage

使用HTML5可以在本地存儲用戶的瀏覽數據。早些時候,本地存儲使用的是cookies。

Web 存儲需要更加的安全與快速. 這些數據不會被保存在服務器上，但是這些數據只用於用戶請求網站數據上.

它也可以存儲大量的數據，而不影響網站的性能。

數據以 鍵/值 對存在, web網頁的數據只允許該網頁訪問使用。

客戶端存儲數據的兩個對象為：

localStorage - 沒有時間限制的數據存儲

sessionStorage - 針對一個 session 的數據存儲, 當用戶關閉瀏覽器窗口后，數據會被刪除。

在使用 web 存儲前,應檢查瀏覽器是否支持 localStorage 和sessionStorage

 

if(typeof(Storage)!=="undefined")
   {
   // 是的! 支持 localStorage  sessionStorage 對象!
   // 一些代碼.....
   }
 else
   {
   // 抱歉! 不支持 web 存儲。
   }

不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：

• 保存數據：localStorage.setItem(key,value);
• 讀取數據：localStorage.getItem(key);
• 刪除單個數據：localStorage.removeItem(key);
• 刪除所有數據：localStorage.clear();
• 得到某個索引的key：localStorage.key(index);

10. Web Socket

 WebSocket是HTML5開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。在WebSocket API中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。

瀏覽器通過 JavaScript 向服務器發出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務器端就可以通過 TCP 連接直接交換數據。當你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務器發送數據，並通過 onmessage 事件來接收服務器返回的數據。

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>W3Cschool教程(w3cschool.cn)</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的瀏覽器支持 WebSocket!");
               
               // 打開一個 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已連接上，使用 send() 方法發送數據
                  ws.send("發送數據");
                  alert("數據發送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("數據已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 關閉 websocket
                  alert("連接已關閉..."); 
               };
            }
            
            else
            {
               // 瀏覽器不支持 WebSocket
               alert("您的瀏覽器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">運行 WebSocket</a>
      </div>
      
   </body>
</html>