HTML5新特性有哪些

本篇內容主要講解“HTML5新特性有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML5新特性有哪些”吧!

Web存儲

它具有以下特征：

• 你可以通過屬性和方法來使用 JavaScript 操作 web 存儲器中的數據實現訪問。

• 不像 cookies 這種由服務器端腳本創建的，web存儲是由客戶端腳本如 JavaScript 創建。

• Web 存儲在主流的 Web 瀏覽器中都是原生支持的，如 Chrome，Opera，Firefox，Safari 和 IE8 +。換句話說，不需要第三方插件。

會話存儲

引用：

會話存儲必須用于處理機密和敏感信息的網絡活動，如信用卡號碼，社會保險號碼和登錄證書。這些信息很容易受到“DNS欺騙”的攻擊，所以不應該存儲超過一個單個會話。”

<span data-mce-  font-size:16px;"="">如何創建并訪問一個 sessionStorage：

<script type="text/javascript"> sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname); <!--script>

本地存儲，數據以字符串的形式進行存儲，并且會一直持續下去（除非你明確地刪除它）。即使瀏覽器窗口關閉了數據也會一直存在，同時如果接下來對相同 origin 的訪問使用的是相同的瀏覽器，那么數據也是可用的。本地存儲是專為存儲跨越多個瀏覽器窗口和持續的時間超過當前會話的數據。

一個網站可以讓用戶自定義網頁的主題和布局，并在本地存儲中保存這些設置。以這種方式，用戶可以在后續訪問中看到自己個人的網頁。

<span data-mce-  font-size:16px;"="">如何創建和訪問 localStorage：

<script type="text/javascript"> localStorage.lastname="Smith";

document.write(localStorage.lastname);

HTML geolocation API 只有一個對象，就是 navigator.geolocation 對象。你可以將 navigator.geolocation 比作瀏覽器中的指南針。瀏覽器是否支持這個 API，還有待確認。你可以通過將以下的 if-else 寫入到自己的代碼中，來檢測瀏覽器是否支持。

// Check whether browser supports Geolocation API or not if (navigator.geolocation) // Supported { // place the geolocation code here } else // Not supported {
    alert("Oop! This browser does not support HTML5 Geolocation.");
}

getCurrentPosition（）

watchPosition（）

該 watchPosition（）方法會返回一個 watch ID，當不再需要獲取位置時，可以用 watch ID 來停止 watchPositon（）方法。

• clearWatch（）方法以 watchPosition（）方法的 watch ID 作為參數，用于停止執行 watchPosition（）方法。

我們已經很熟悉拖放電腦桌面上的文件、文件夾和圖標了。拖放是一種任何的桌面應用具有的強有力的也是理所當然應該具備的用戶交互。使用像鼠標這樣的指針設備，通過拖放來實現拷貝，插入和刪除任何電腦桌面上的文件和對象。

設置元素為可拖放

• 然后，規定當元素被拖動時，會發生什么。

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

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

  <span data-mce-  "="">本文介紹的 HTML5 一些新特性就到這里，在后面一篇文章中，我們將會學習到 HTML5 的 Canvas 知識。。學習了 HTML5 的新特性，能夠幫助我們在進行前端開發時更加順利，同時也可以借助一些前端開發工具。Wijmo 是一款大而全面的前端 HTML5 / JavaScript UI控件集，能為企業應用提供更加靈活的操作體驗，現已全面支持Angular 2。

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

  <span data-mce-  font-size:16px;"="">在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：

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

  
  

  傳統的用戶和網站之間的交互模式是用戶發起的請求和應答類型。用戶通過瀏覽器主動發起請求，并且等待服務器的應答。為了檢查某個特定的網頁上是否有更新，用戶需要通過點擊瀏覽器上更新/重新登錄按鈕來向服務器發送新的請求。換言之，服務器必須不間斷的將服務器側的更新推送出去。當信息不間斷的無法預測的變化時，通過這種方式來獲取一些關鍵的做決定的信息，就不是特別有用了。例如股票價格更新，新聞傳遞，天氣預報等。

  Server-Sent 事件 - 單向消息傳遞

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

  var source=new EventSource("demo_sse.php");
  source.onmessage=function(event)
  {
     document.getElementById("result").innerHTML+=event.data + " ";
  };

  創建一個新的 EventSource 對象，然后規定發送更新的頁面的 URL（本例中是 "demo_sse.php"）

• 當 onmessage 事件發生時，把已接收的數據推入 id 為 "result" 的元素中

• 在上面的 TIY 實例中，我們編寫了一段額外的代碼來檢測服務器發送事件的瀏覽器支持情況：

  if(typeof(EventSource)!=="undefined")
  { // Yes! Server-sent events support! // Some code..... } else { // Sorry! No server-sent events support.. }

• 為了讓上面的例子可以運行，您還需要能夠發送數據更新的服務器（比如 PHP 和 ASP）。

  PHP 代碼 (demo_sse.php)：

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

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

  event.preventDefault()

  以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過服務器發送事件，更新能夠自動到達。

  
  

  <!--?<span data-mce---&gtphp header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?>

  <span data-mce-  font-size:16px;"="">ASP 代碼 (VB) (demo_sse.asp):

  <% Response.ContentType="text/event-stream" Response.Expires=-1 Response.Write("data: " & now())
  Response.Flush() %>

  把報頭 "Content-Type" 設置為 "text/event-stream"

• 輸出發送日期（始終以 "data: " 開頭）

到此，相信大家對“HTML5新特性有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！