HTML5新特性及詳解

時間  2019-12-18
標籤 html5 html 特性 詳解 欄目 HTML5 简体版
原文   原文鏈接

什麼是HTML5:HTML5 是下一代的HTML,將成爲 HTML、XHTML 以及 HTML DOM 的新標準。javascript

爲 HTML5 創建的一些規則：php

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

HTML5 中的一些有趣的新特性：css

  • 用於繪畫的 canvas 元素
  • 用於媒介回放的 video 和 audio 元素
  • 對本地離線存儲的更好的支持
  • 新的特殊內容元素，好比 article、footer、header、nav、section
  • 新的表單控件，好比 calendar、date、time、email、url、search

1.html5視頻和音頻html

實例：html5

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
  <source src="/i/movie.ogg" type="video/ogg">
  <source src="/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

</body>
</html>

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

<video> 與 </video> 之間插入的內容是供不支持 video 元素的瀏覽器顯示的。git

上面的例子第一個使用一個 Ogg 文件，適用於Firefox、Opera 以及 Chrome 瀏覽器。web

要確保適用於 Safari 瀏覽器，視頻文件必須是 MPEG4 類型。canvas

video 元素容許多個 source 元素。source 元素能夠連接不一樣的視頻文件。瀏覽器將使用第一個可識別的格式：api

 同理，音頻實例：

<!DOCTYPE HTML>
<html>
<body>

<audio controls="controls" autoplay="autoplay" loop="loop">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="/i/song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

2.HTML5拖放

拖放（Drag 和 drop）是 HTML5 標準的組成部分。

實例：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

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

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>請把圖片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/xxx.gif" draggable="true" ondragstart="drag(event)" />

</body>
</html>

3.HTML 5 Canvas

canvas 元素用於在網頁上繪製圖形。canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

實例：

建立 Canvas 元素

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

canvas 元素自己是沒有繪圖能力的。全部的繪製工做必須在 JavaScript 內部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

實例-線條：

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

</body>
</html>

效果圖爲：

實例-圓形：

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

</body>
</html>

效果圖：

實例 - 漸變：

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>


<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>

</body>
</html>

 實例-圖像：

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);

</script>

</body>
</html>

效果圖：

4.HTML5 內聯 SVG

什麼是SVG？

  • SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
  • SVG 用於定義用於網絡的基於矢量的圖形
  • SVG 使用 XML 格式定義圖形
  • SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有損失
  • SVG 是萬維網聯盟的標準

SVG 的優點

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

  • SVG 圖像可經過文本編輯器來建立和修改
  • SVG 圖像可被搜索、索引、腳本化或壓縮
  • SVG 是可伸縮的
  • SVG 圖像可在任何的分辨率下被高質量地打印
  • SVG 可在圖像質量不降低的狀況下被放大

實例：

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
   <polygon points="100,10 40,180 190,60 10,60 160,180"
   style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
 
</body>
</html>

Canvas vs. SVG：

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

 SVG

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

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

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

Canvas

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

Canvas 是逐像素進行渲染的。

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

Canvas 與 SVG 的比較

下表列出了 canvas 與 SVG 之間的一些不一樣之處。

Canvas

  • 依賴分辨率
  • 不支持事件處理器
  • 弱的文本渲染能力
  • 可以以 .png 或 .jpg 格式保存結果圖像
  • 最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪

SVG

  • 不依賴分辨率
  • 支持事件處理器
  • 最適合帶有大型渲染區域的應用程序（好比谷歌地圖）
  • 複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）
  • 不適合遊戲應用

5.HTML5地理定位

實例：

<!DOCTYPE html>
<html>
<body>
<p id="demo">點擊這個按鈕，得到您的位置：</p>
<button onclick="getLocation()">試一下</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }

function showPosition(position)
  {
  lat=position.coords.latitude;
  lon=position.coords.longitude;
  latlon=new google.maps.LatLng(lat, lon)
  mapholder=document.getElementById('mapholder')
  mapholder.style.height='250px';
  mapholder.style.width='500px';

  var myOptions={
  center:latlon,zoom:14,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  mapTypeControl:false,
  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  };
  var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
  var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
  }

function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }
</script>
</body>
</html>

例子解釋：

  • 檢測是否支持地理定位
  • 若是支持，則運行 getCurrentPosition() 方法。若是不支持，則向用戶顯示一段消息。
  • 若是getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象
  • showPosition() 函數得到並顯示經度和緯度

錯誤代碼：

  • Permission denied - 用戶不容許地理定位
  • Position unavailable - 沒法獲取當前位置
  • Timeout - 操做超時

watchPosition() - 返回用戶的當前位置，並繼續返回用戶移動時的更新位置（就像汽車上的 GPS）。

clearWatch() - 中止 watchPosition() 方法 

<!DOCTYPE html>
<html>
<body>
<p id="demo">點擊這個按鈕，得到您的座標：</p>
<button onclick="getLocation()">試一下</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br />Longitude: " + position.coords.longitude;    
  }
</script>
</body>
</html>

6.HTML 5 Web 存儲

在客戶端存儲數據

HTML5 提供了兩種在客戶端存儲數據的新方法：

  • localStorage - 沒有時間限制的數據存儲
  • sessionStorage - 針對一個 session 的數據存儲

以前，這些都是由 cookie 完成的。可是 cookie 不適合大量數據的存儲，由於它們由每一個對服務器的請求來傳遞，這使得 cookie 速度很慢並且效率也不高。

localStorage 方法

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

如何建立和訪問 localStorage：

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

localStorage.lastname="Smith";
document.write("Last name: " + localStorage.lastname);

</script>

</body>
</html>

下面的例子對用戶訪問頁面的次數進行計數： 

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

if (localStorage.pagecount)
    {
    localStorage.pagecount=Number(localStorage.pagecount) +1;
    }
else
    {
    localStorage.pagecount=1;
    }
document.write("Visits: " + localStorage.pagecount + " time(s).");

</script> 

<p>刷新頁面會看到計數器在增加。</p>

<p>請關閉瀏覽器窗口，而後再試一次，計數器會繼續計數。</p>

</body>
</html>

sessionStorage 方法

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

如何建立並訪問一個 sessionStorage：

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);

</script>

</body>
</html>

下面的例子對用戶在當前 session 中訪問頁面的次數進行計數：

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

if (sessionStorage.pagecount)
    {
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
    }
else
    {
    sessionStorage.pagecount=1;
    }
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");

</script> 

<p>刷新頁面會看到計數器在增加。</p>

<p>請關閉瀏覽器窗口，而後再試一次，計數器已經重置了。</p>

</body>
</html>

7.HTML 5 應用程序緩存

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

什麼是應用程序緩存（Application Cache）？

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

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

  • 離線瀏覽 - 用戶可在應用離線時使用它們
  • 速度 - 已緩存資源加載得更快
  • 減小服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。

下面的例子展現了帶有 cache manifest 的 HTML 文檔（供離線瀏覽）：

<!DOCTYPE html>
<html manifest="/example/html5/demo_html.appcache">
<body>
<script type="text/javascript" src="/example/html5/demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">得到日期和事件</button></p>
<p><img src="/i/xxx.gif" /></p>
<p>請打開<a href="/example/html5/html5_html_manifest.html" target="_blank">這個頁面</a>，而後脫機瀏覽，從新加載頁面。頁面中的腳本和圖像依然可用。</p>
</body>
</html>

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

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

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

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

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

manifest 文件可分爲三個部分：

  • CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
  • NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存
  • FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）

CACHE MANIFEST

第一行，CACHE MANIFEST，是必需的：

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

NETWORK

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

 

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

FALLBACK

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

 

註釋：第一個 URI 是資源，第二個是替補。

更新緩存

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

  • 用戶清空瀏覽器緩存
  • manifest 文件被修改（參閱下面的提示）
  • 由程序來更新應用緩存

實例 - 完整的 Manifest 文件

8.HTML 5 Web Workers

web worker 是運行在後臺的 JavaScript，不會影響頁面的性能。什麼是 Web Worker？當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。web worker 是運行在後臺的 JavaScript，獨立於其餘腳本，不會影響頁面的性能。您能夠繼續作任何願意作的事情：點擊、選取內容等等，而此時 web worker 在後臺運行。

 實例： 
<!DOCTYPE html>
<html>
<body>

<p>計數: <output id="result"></output></p>
<button onclick="startWorker()">開始 Worker</button> 
<button onclick="stopWorker()">中止 Worker</button>
<br /><br />

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
  {
  if(typeof(w)=="undefined")
  {
  w=new Worker("/example/html5/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>
向 web worker 添加一個 "onmessage" 事件監聽器，當 web worker 傳遞消息時，會執行事件監聽器中的代碼。event.data 中存有來自 event.data 的數據。
demo_workers.js爲計數腳本：
var i=0;

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

timedCount();

以上代碼中重要的部分是 postMessage() 方法 - 它用於向 HTML 頁面傳回一段消息。

9.HTML 5 服務器發送事件

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

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

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

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

例子：Facebook/Twitter 更新、估價更新、新的博文、賽事結果等

 實例： 
<!DOCTYPE html>
<html>
<body>
<h1>得到服務器更新</h1>
<div id="result"></div>

<script>
if(typeof(EventSource)!=="undefined")
  {
  var source=new EventSource("/example/html5/demo_sse.php");
  source.onmessage=function(event)
    {
    document.getElementById("result").innerHTML+=event.data + "<br />";
    };
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
  }
</script>

</body>
</html>

例子解釋：

  • 建立一個新的 EventSource 對象，而後規定發送更新的頁面的 URL（本例中是 "demo_sse.php"）
  • 每接收到一次更新，就會發生 onmessage 事件
  • 當 onmessage 事件發生時，把已接收的數據推入 id 爲 "result" 的元素中

服務器端代碼實例：

PHP 代碼 (demo_sse.php)： 

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

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: " 開頭）
  • 向網頁刷新輸出數據
 EventSource 對象

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

 
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程