極客書

HTML5 - Quick Guide

HTML5是HTML標準的下一個主要版本，取代了HTML4.01、XHTML1.0和XHTML1.1。HTML5是在全球資訊網上構建和呈現內容的標準。

HTML5是全球資訊網聯盟（W3C）和網絡超文本應用技術工作組（WHATWG）之間的合作。

新標準整合了視頻播放和拖放等功能，這些功能以前都依賴於第三方瀏覽器插件，如Adobe Flash、Microsoft Silverlight和Google Gears。

Browser Support

最新版本的Apple Safari、Google Chrome、Mozilla Firefox和Opera都支持許多HTML5功能，Internet Explorer 9.0也將支持一些HTML5功能。

在iphone、ipad和Android手機上預裝的移動web瀏覽器都對HTML5有很好的支持。

New Features

HTML5引入了許多新的元素和屬性，可以幫助你建立現代網站。以下是HTML5中引入的一些最突出的特性。

  • 新的語義元素−它們類似於<header>、<footer>和<section>。

  • 表單2.0對HTML web表單的改進，其中爲「輸入」標記引入了新屬性。

  • 持久本地存儲−無需藉助第三方插件即可實現。

  • WebSocket−一種用於web應用程式的新一代雙向通信技術。

  • 伺服器發送事件−HTML5引入了從web伺服器流到web瀏覽器的事件，這些事件稱爲伺服器發送事件（SSE）。

  • Canvas−這支持可以用JavaScript編程的二維繪圖面。

  • 音頻和視頻−您可以在網頁上嵌入音頻或視頻，而無需藉助第三方插件。

  • 地理位置−現在，訪問者可以選擇與您的web應用程式共享其物理位置。

  • Microdata−這使您可以在HTML5之外創建自己的詞彙表，並使用自定義語義擴展網頁。

  • 拖放−將項目從一個位置拖放到同一網頁上的另一個位置。

Backward Compatibility

HTML5被設計成儘可能向後兼容現有的web瀏覽器。它的新功能是在現有功能的基礎上構建的，允許您爲較舊的瀏覽器提供回退內容。

建議使用幾行JavaScript來檢測對單個HTML5特性的支持。

如果您不熟悉任何以前版本的HTML，我建議您在探索HTML5的特性之前先閱讀我們的HTML教程。

HTML5 - Syntax

HTML5語言有一種「自定義」的HTML語法，它與在Web上發布的HTML4和XHTML1文檔兼容，但與HTML4更深奧的SGML功能不兼容。

HTML5沒有XHTML那樣的語法規則，我們需要小寫的標記名，引用我們的屬性，一個屬性必須有一個值並關閉所有的空元素。

HTML5具有很大的靈活性，它支持以下特性;

  • Uppercase tag names.
  • Quotes are optional for attributes.
  • Attribute values are optional.
  • Closing empty elements are optional.

The DOCTYPE

舊版本HTML中的DOCTYPEs較長，因爲HTML語言基於SGML，因此需要引用DTD。

HTML 5作者將使用簡單的語法指定DOCTYPE，如下所示−

<!DOCTYPE html>

以上語法不區分大小寫。

Character Encoding

HTML 5作者可以使用簡單的語法來指定字符編碼，如下所示−

<meta charset = "UTF-8">

以上語法不區分大小寫。

The <script> tag

通常的做法是向腳本元素添加一個值爲「text/javascript」的type屬性，如下所示−

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5刪除了所需的額外信息，您可以簡單地使用以下語法−

<script src = "scriptfile.js"></script>

The <link> tag

到目前爲止，您編寫的<link>如下所示;

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5刪除了所需的額外信息，您可以簡單地使用以下語法−

<link rel = "stylesheet" href = "stylefile.css">

HTML5 Elements

HTML5元素使用開始標記和結束標記進行標記。標記使用尖括號分隔，標記名在中間。

開始標記和結束標記的區別在於後者在標記名之前包含斜線。

下面是一個HTML5元素的例子−

<p>...</p>

HTML5標記名不區分大小寫，可以全大寫或混合大小寫，儘管最常見的約定是使用小寫。

大多數元素都包含一些內容，如<p>…</p>包含段落。但是，有些元素被禁止包含任何內容，這些元素被稱爲void元素。例如，br、hr、link、meta等。

以下是html5元素的完整列表。

HTML5 Attributes

元素可以包含用於設置元素的各種屬性的屬性。

有些屬性是全局定義的，可以在任何元素上使用，而另一些屬性只爲特定元素定義。所有屬性都有一個名稱和一個值，如下例所示。

下面是一個HTML5屬性的例子，它說明了如何使用一個值「example」−用一個名爲class的屬性標記div元素;

<div class = "example">...</div>

屬性只能在開始標記中指定，不能在結束標記中使用。

HTML5屬性是不區分大小寫的，可以用全大寫或混合大小寫編寫，儘管最常見的約定是堅持使用小寫。

以下是html5屬性的完整列表。

HTML5 Document

爲了獲得更好的結構，引入了以下標籤&負;

  • 節−此標記表示通用文檔或應用程式節。它可以與h1-h6一起使用來指示文檔結構。

  • article−此標記表示文檔的獨立內容，例如博客條目或報紙文章。

  • aside−此標記表示與頁面其餘部分僅略微相關的內容。

  • 標題−此標記表示節的標題。

  • footer−此標記表示節的頁腳，可以包含有關作者、版權資訊等的信息。

  • nav−此標記表示文檔中用於導航的部分。

  • dialog−此標記可用於標記對話。

  • 圖−此標記可用於將標題與某些嵌入內容（如圖形或視頻）相關聯。

HTML 5文檔的標記如下所示−

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>
Live Demo 
<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

它將產生以下結果&負;

HTML5 - Attributes

如前一章所述，元素可以包含用於設置元素的各種屬性的屬性。

有些屬性是全局定義的，可以在任何元素上使用，而另一些屬性只爲特定元素定義。所有屬性都有一個名稱和一個值，如下例所示。

下面是一個HTML5屬性的例子，它演示了如何使用「example」−的值用一個名爲class的屬性標記div元素;

<div class = "example">...</div>

屬性只能在開始標記中指定，決不能在結束標記中使用。

HTML5屬性是不區分大小寫的，可以用全大寫或混合大小寫編寫，儘管最常見的約定是堅持使用小寫。

Standard Attributes

下面列出的屬性幾乎得到了所有HTML5標記的支持。

Attribute Options Function
accesskey User Defined Specifies a keyboard shortcut to access an element.
align right, left, center Horizontally aligns tags
background URL Places an background image behind an element
bgcolor numeric, hexidecimal, RGB values Places a background color behind an element
class User Defined Classifies an element for use with Cascading Style Sheets.
contenteditable true, false Specifies if the user can edit the element's content or not.
contextmenu Menu id Specifies the context menu for an element.
data-XXXX User Defined Custom attributes. Authors of a HTML document can define their own attributes. Must start with "data-".
draggable true,false, auto Specifies whether or not a user is allowed to drag an element.
height Numeric Value Specifies the height of tables, images, or table cells.
hidden hidden Specifies whether element should be visible or not.
id User Defined Names an element for use with Cascading Style Sheets.
item List of elements Used to group elements.
itemprop List of items Used to group items.
spellcheck true, false Specifies if the element must have it's spelling or grammar checked.
style CSS Style sheet Specifies an inline style for an element.
subject User define id Specifies the element's corresponding item.
tabindex Tab number Specifies the tab order of an element.
title User Defined "Pop-up" title for your elements.
valign top, middle, bottom Vertically aligns tags within an HTML element.
width Numeric Value Specifies the width of tables, images, or table cells.

有關HTML5標記和相關屬性的完整列表，請查看我們對HTML5標記的引用。

Custom Attributes

HTML5中引入的一個新特性是添加自定義數據屬性。

自定義數據屬性以data-開頭，並將根據您的要求命名。下面是一個簡單的例子;

<div class = "example" data-subject = "physics" data-level = "complex">
   ...
</div>

上面的代碼將是完全有效的HTML5，有兩個自定義屬性，稱爲datasubject和data level。您將能夠使用JavaScript api或CSS以與獲取標準屬性類似的方式獲取這些屬性的值。

HTML5 - Events

當用戶訪問您的網站時，他們會執行各種活動，如單擊文本、圖像和連結、將滑鼠懸停在定義的元素上等等。這些是JavaScript所稱的事件的示例。

我們可以用Javascript或VBscript編寫事件處理程序，您可以將這些事件處理程序指定爲事件標記屬性的值。HTML5規範定義了下面列出的各種事件屬性;

當任何HTML5元素髮生任何事件時，我們可以使用以下屬性集觸發任何作爲值給定的javascript或vbscript代碼。

我們將在隨後的章節中詳細討論這些元素，同時討論特定元素的事件。

Attribute Value Description
offline script Triggers when the document goes offline
onabort script Triggers on an abort event
onafterprint script Triggers after the document is printed
onbeforeonload script Triggers before the document loads
onbeforeprint script Triggers before the document is printed
onblur script Triggers when the window loses focus
oncanplay script Triggers when media can start play, but might has to stop for buffering
oncanplaythrough script Triggers when media can be played to the end, without stopping for buffering
onchange script Triggers when an element changes
onclick script Triggers on a mouse click
oncontextmenu script Triggers when a context menu is triggered
ondblclick script Triggers on a mouse double-click
ondrag script Triggers when an element is dragged
ondragend script Triggers at the end of a drag operation
ondragenter script Triggers when an element has been dragged to a valid drop target
ondragleave script Triggers when an element leaves a valid drop target
ondragover script Triggers when an element is being dragged over a valid drop target
ondragstart script Triggers at the start of a drag operation
ondrop script Triggers when dragged element is being dropped
ondurationchange script Triggers when the length of the media is changed
onemptied script Triggers when a media resource element suddenly becomes empty.
onended script Triggers when media has reach the end
onerror script Triggers when an error occur
onfocus script Triggers when the window gets focus
onformchange script Triggers when a form changes
onforminput script Triggers when a form gets user input
onhaschange script Triggers when the document has change
oninput script Triggers when an element gets user input
oninvalid script Triggers when an element is invalid
onkeydown script Triggers when a key is pressed
onkeypress script Triggers when a key is pressed and released
onkeyup script Triggers when a key is released
onload script Triggers when the document loads
onloadeddata script Triggers when media data is loaded
onloadedmetadata script Triggers when the duration and other media data of a media element is loaded
onloadstart script Triggers when the browser starts to load the media data
onmessage script Triggers when the message is triggered
onmousedown script Triggers when a mouse button is pressed
onmousemove script Triggers when the mouse pointer moves
onmouseout script Triggers when the mouse pointer moves out of an element
onmouseover script Triggers when the mouse pointer moves over an element
onmouseup script Triggers when a mouse button is released
onmousewheel script Triggers when the mouse wheel is being rotated
onoffline script Triggers when the document goes offline
onoine script Triggers when the document comes online
ononline script Triggers when the document comes online
onpagehide script Triggers when the window is hidden
onpageshow script Triggers when the window becomes visible
onpause script Triggers when media data is paused
onplay script Triggers when media data is going to start playing
onplaying script Triggers when media data has start playing
onpopstate script Triggers when the window's history changes
onprogress script Triggers when the browser is fetching the media data
onratechange script Triggers when the media data's playing rate has changed
onreadystatechange script Triggers when the ready-state changes
onredo script Triggers when the document performs a redo
onresize script Triggers when the window is resized
onscroll script Triggers when an element's scrollbar is being scrolled
onseeked script Triggers when a media element's seeking attribute is no longer true, and the seeking has ended
onseeking script Triggers when a media element's seeking attribute is true, and the seeking has begun
onselect script Triggers when an element is selected
onstalled script Triggers when there is an error in fetching media data
onstorage script Triggers when a document loads
onsubmit script Triggers when a form is submitted
onsuspend script Triggers when the browser has been fetching media data, but stopped before the entire media file was fetched
ontimeupdate script Triggers when media changes its playing position
onundo script Triggers when a document performs an undo
onunload script Triggers when the user leaves the document
onvolumechange script Triggers when media changes the volume, also when volume is set to "mute"
onwaiting script Triggers when media has stopped playing, but is expected to resume

HTML5 - Web Forms 2.0

Web Forms 2.0是HTML4中表單功能的擴展。與HTML4相比，HTML5中的表單元素和屬性提供了更大程度的語義標記，並使我們擺脫了HTML4中所需的大量繁瑣的腳本編寫和樣式設置。

The <input> element in HTML4

HTML4輸入元素使用type屬性指定數據類型。HTML4提供以下類型−

Sr.No. Type & Description
1

文本

一個自由格式的文本欄位，名義上沒有換行符。
2

密碼

用于敏感信息的自由格式文本欄位，名義上沒有換行符。
3

複選框

預定義列表中的一組零或多個值。
4

收音機

枚舉值。
5

提交

按鈕的自由形式啓動表單提交。
6

文件

具有MIME類型和可選文件名的任意文件。
7

圖像

一種坐標，相對於特定圖像的大小，具有額外的語義，即它必須是選定的最後一個值並啓動表單提交。
8

隱藏的

通常不向用戶顯示的任意字符串。
9

選擇

枚舉值，非常類似於radio類型。
10

文本區域

一個自由格式的文本欄位，名義上沒有換行限制。
11

按鈕

按鈕的一種自由形式，它可以啓動與按鈕有關的任何事件。

下面是使用標籤、單選按鈕和提交按鈕的簡單示例−

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

The <input> element in HTML5

除了上述屬性之外，HTML5輸入元素還爲type屬性引入了幾個新值。下面列出了這些。

注意−使用最新版本的Opera瀏覽器嘗試以下所有示例。

Sr.No. Type & Description
1 datetime

根據ISO 8601編碼的日期和時間（年、月、日、時、分、秒、小數），時區設置爲UTC。
2 datetime-local

根據ISO8601編碼的日期和時間（年、月、日、時、分、秒、秒的分數），沒有時區信息。
3 date

根據ISO 8601編碼的日期（年、月、日）。
4 month

根據ISO 8601編碼的一年和一個月的日期。
5 week

根據ISO 8601編碼的一年和一周的日期。
6 time

根據ISO 8601編碼的時間（小時、分鐘、秒、小數秒）。
7 number

它只接受數值。step屬性指定精度，默認爲1。
8 range

範圍類型用於應包含數字範圍中的值的輸入欄位。
9 email

它只接受電子郵件值。此類型用於應包含電子郵件地址的輸入欄位。如果您試圖提交一個簡單的文本，它將強制只以email@example.com格式輸入電子郵件地址。
10 url

它只接受URL值。此類型用於應包含URL地址的輸入欄位。如果您試圖提交一個簡單的文本，它將強制只輸入http://www.example.com格式或http://example.com格式的URL地址。

The <output> element

HTML5引入了一個新元素<output>，用於表示不同類型輸出的結果，例如由腳本編寫的輸出。

可以使用for屬性指定輸出元素與文檔中影響計算的其他元素（例如，作爲輸入或參數）之間的關係。for屬性的值是用空格分隔的其他元素的id列表。

Live Demo 
<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

它將產生以下結果&負;

The placeholder attribute

HTML5引入了一個名爲placeholder的新屬性。<input>和<textarea>元素上的此屬性向用戶提示可以在欄位中輸入的內容。占位符文本不能包含回車或換行符。

以下是占位符屬性的簡單語法−

<input type = "text" name = "search" placeholder = "search the web"/>

此屬性僅受最新版本的Mozilla、Safari和Crome瀏覽器支持。

Live Demo 
<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "email@example.com"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

這將產生以下結果&負;

The autofocus attribute

這是一個簡單的單步模式，在加載文檔時很容易用JavaScript編程，可以自動聚焦一個特定的表單欄位。

HTML5引入了一個名爲autofocus的新屬性，該屬性的用法如下−

<input type = "text" name = "search" autofocus/>

此屬性僅受最新版本的Mozilla、Safari和Chrome瀏覽器支持。

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

The required attribute

現在，您不需要讓JavaScript進行客戶端驗證，比如空文本框將永遠不會被提交，因爲HTML5引入了一個名爲required的新屬性，該屬性將按如下方式使用，並將堅持使用一個值−

<input type = "text" name = "search" required/>

此屬性僅受最新版本的Mozilla、Safari和Chrome瀏覽器支持。

Live Demo 
<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

它將產生以下結果&負;

HTML5 - SVG

SVG代表可縮放圖形，它是一種用XML描述二維圖形和圖形應用的語言，然後由SVG查看器呈現XML。

SVG主要用於矢量類型圖，如餅圖、X、Y坐標系中的二維圖等。

SVG成爲W3C的第14條建議。2003年1月，您可以在SVG規範中查看最新版本。

Viewing SVG Files

大多數web瀏覽器可以顯示SVG，就像它們可以顯示PNG、GIF和JPG一樣。Internet Explorer用戶可能必須安裝adobe svg查看器才能在瀏覽器中查看svg。

Embedding SVG in HTML5

HTML5允許直接使用<SVG>..<SVG>標記嵌入SVG，該標記具有以下簡單語法&減號;

<svg xmlns = "http://www.w3.org/2000/svg">
   ...    
</svg>

Firefox 3.7還引入了一個配置選項（「about:config」），您可以使用以下步驟啓用HTML5−

  • 在Firefox地址欄中鍵入about:config。

  • 點擊「我會小心的，我保證！」出現的警告消息上的按鈕（並確保您遵守它！）。

  • 在頁面頂部的篩選器欄中鍵入html5.enable。

  • 當前它將被禁用，因此單擊它將值切換爲true。

現在，您的Firefox HTML5解析器應該已經啓用，您應該能夠使用以下示例進行實驗。

HTML5 − SVG Circle

下面是一個SVG示例的HTML5版本，它將使用<circle>tag−繪製一個圓;

Live Demo 
<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Circle</h2>
		
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
      </svg>
   </body>
</html>

這將在啓用HTML5的最新版本的Firefox中產生以下結果。

HTML5 − SVG Rectangle

下面是一個SVG示例的HTML5版本，它將使用<rect>tag−繪製一個矩形;

Live Demo 
<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Rectangle</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <rect id = "redrect" width = "300" height = "100" fill = "red" />
      </svg>
   </body>
</html>

這將在啓用HTML5的最新版本的Firefox中產生以下結果。

HTML5 − SVG Line

下面是一個SVG示例的HTML5版本，它將使用<line>tag−繪製一條線;

Live Demo 
<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Line</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <line x1 = "0" y1 = "0" x2 = "200" y2 = "100" 
            style = "stroke:red;stroke-width:2"/>
      </svg>
   </body>
</html>

您可以使用樣式屬性，該屬性允許您設置其他樣式信息，如筆劃和填充顏色、筆劃寬度等。

這將在啓用HTML5的最新版本的Firefox中產生以下結果。

HTML5 − SVG Ellipse

下面是一個SVG示例的HTML5版本，它將使用<eliple>tag−繪製一個橢圓;

Live Demo 
<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Ellipse</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill = "red" />
      </svg>
		
   </body>
</html>

這將在啓用HTML5的最新版本的Firefox中產生以下結果。

HTML5 − SVG Polygon

下面是一個SVG示例的HTML5版本，它將使用<polygon>tag−繪製多邊形;

Live Demo 
<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polygon</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon  points = "20,10 300,20, 170,50" fill = "red" />
      </svg>
   </body>
</html>

這將在啓用HTML5的最新版本的Firefox中產生以下結果。

HTML5 − SVG Polyline

下面是一個SVG示例的HTML5版本，它將使用<polyline>tag−繪製多段線;

Live Demo 
<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polyline</h2>
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polyline points = "0,0 0,20 20,20 20,40 40,40 40,60" fill = "red" />
      </svg>
   </body>
</html>

這將在啓用HTML5的最新版本的Firefox中產生以下結果。

HTML5 − SVG Gradients

下面是一個SVG示例的HTML5版本，它將使用<elliple>標記繪製橢圓，並使用<radial gradient>標記定義SVG徑向漸變。

類似地，可以使用<linear gradient>標記創建SVG線性漸變。

Live Demo 
<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Gradient Ellipse</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <defs>
            <radialGradient id="gradient" cx = "50%" cy = "50%" r = "50%" fx = "50%" 
               fy = "50%">
               <stop offset = "0%" style = "stop-color:rgb(200,200,200); stop-opacity:0"/>
               <stop offset = "100%" style = "stop-color:rgb(0,0,255); stop-opacity:1"/>
            </radialGradient>
         </defs>
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" 
            style = "fill:url(#gradient)" />
      </svg>
		
   </body>
</html>

這將在啓用HTML5的最新版本的Firefox中產生以下結果。

HTML5 − SVG Star

下面是一個SVG示例的HTML5版本，它將使用<polygon>標記繪製一個星形。

Live Demo 
<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>	
      <h2 align = "center">HTML5 SVG Star</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon points = "100,10 40,180 190,60 10,60 160,180" fill = "red"/>
      </svg>
    </body>
</html>

這將在啓用HTML5的最新版本的Firefox中產生以下結果。

HTML5 - MathML

HTML5的HTML語法允許在文檔中使用<math>…</math>標記使用MathML元素。

大多數web瀏覽器都可以顯示MathML標記。如果您的瀏覽器不支持MathML，那麼我建議您使用最新版本的Firefox。

MathML Examples

下面是一個帶有MathML−的有效HTML5文檔;

Live Demo 
<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>Pythagorean theorem</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
				
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo> = </mo>
				
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>
			
      </math>
   </body>
</html>

這將產生以下結果&負;

Using MathML Characters

考慮一下，下面是使用字符&InvisibleTimes;−的標記;

Live Demo 
<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>MathML Examples</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>			
            <mrow>
				
               <msup>
                  <mi>x</mi>
                  <mn>2</mn>
               </msup>
					
               <mo>+</mo>
					
               <mrow>
                  <mn>4</mn>
                  <mo>⁢</mo>
                  <mi>x</mi>
               </mrow>
					
               <mo>+</mo>
               <mn>4</mn>
					
            </mrow>
				
            <mo>=</mo>
            <mn>0</mn>
				 
         </mrow>
      </math>
   </body>
</html>

這將產生以下結果。如果你不能看到正確的結果，比如x2+4x+4=0，那麼使用Firefox 3.5或更高版本。

這將產生以下結果&負;

Matrix Presentation Examples

考慮下面的示例，該示例將用於表示一個簡單的2x2矩陣−

Live Demo 
<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>MathML Examples</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>
            <mi>A</mi>
            <mo>=</mo>
			
            <mfenced open = "[" close="]">
			
               <mtable>
                  <mtr>
                     <mtd><mi>x</mi></mtd>
                     <mtd><mi>y</mi></mtd>
                  </mtr>
					
                  <mtr>
                     <mtd><mi>z</mi></mtd>
                     <mtd><mi>w</mi></mtd>
                  </mtr>
               </mtable>
               
            </mfenced>
         </mrow>
      </math>

   </body>
</html>

這將產生以下結果&負;

這將產生以下結果。如果你看不到正確的結果，那麼使用Firefox3.5或更高版本。

MathML

HTML5 - Web Storage

HTML5引入了兩種機制，類似於HTTP會話cookie，用於在客戶端存儲結構化數據，並克服以下缺點。

  • Cookies包含在每個HTTP請求中，因此通過傳輸相同的數據來減慢web應用程式的速度。

  • Cookies包含在每個HTTP請求中，因此可以通過internet發送未加密的數據。

  • Cookie被限制爲大約4KB的數據。不足以存儲所需的數據。

這兩個存儲器分別是會話存儲器和本地存儲器，用於處理不同的情況。

幾乎所有瀏覽器的最新版本都支持HTML5存儲，包括Internet Explorer。

Session Storage

會話存儲設計用於用戶正在執行單個事務，但可能同時在不同窗口中執行多個事務的情況。

Example

例如，如果用戶在兩個不同的窗口購買機票，則使用同一網站。如果網站使用cookies跟蹤用戶購買的是哪張機票，那麼當用戶在兩個窗口中逐頁單擊時，當前購買的機票將從一個窗口「洩漏」到另一個窗口，可能會導致用戶在沒有真正注意到的情況下購買同一航班的兩張機票。

HTML5引入了session storage屬性，這些站點將使用該屬性向會話存儲添加數據，並且可以訪問在該窗口中打開的同一站點的任何頁面，即session，只要關閉該窗口，會話就會丟失。

下面是設置會話變量並訪問該變量的代碼;

Live Demo 
<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( sessionStorage.hits ) {
            sessionStorage.hits = Number(sessionStorage.hits) +1;
         } else {
            sessionStorage.hits = 1;
         }
         document.write("Total Hits :" + sessionStorage.hits );
      </script>
	
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

這將產生以下結果&負;

Local Storage

本地存儲是爲跨多個窗口的存儲而設計的，並持續到當前會話之後。特別是，出於性能原因，Web應用程式可能希望在客戶端存儲兆字節的用戶數據，例如整個用戶編寫的文檔或用戶的郵箱。

同樣，cookies不能很好地處理這種情況，因爲它們是隨每個請求一起傳輸的。

Example

HTML5引入了local storage屬性，該屬性可用於無時間限制地訪問頁面的本地存儲區域，並且當您使用該頁面時，該本地存儲將可用。

下面的代碼將設置一個本地存儲變量，並在每次訪問此頁時（甚至下次打開窗口時）訪問該變量;

Live Demo 
<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
      </script>
		
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

這將產生以下結果&負;

Delete Web Storage

在本地計算機上存儲敏感數據可能會帶來危險，並可能留下安全漏洞。

會話終止後，瀏覽器將立即刪除會話存儲數據。

要清除本地存儲設置，需要調用local storage.remove（'key'）;其中'key'是要刪除的值的鍵。如果要清除所有設置，則需要調用localStorage.clear（）方法。

下面是清除完整的本地存儲的代碼&負;

Live Demo 
<!DOCTYPE HTML>

<html>
   <body>

      <script type = "text/javascript">
         localStorage.clear();

         // Reset number of hits.
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
			
      </script>
		
      <p>Refreshing the page would not to increase hit counter.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

這將產生以下結果&負;

HTML5 - Web SQL Database

Web SQL資料庫API實際上不是HTML5規範的一部分，但它是一個單獨的規範，它引入了一組API來使用SQL操作客戶端資料庫。

我假設您是一個優秀的web開發人員，如果是這樣，那麼毫無疑問，您將非常了解SQL和RDBMS的概念。如果您還想與SQL進行會話，那麼可以通過我們的SQL教程。

Web SQL資料庫將在Safari、Chrome和Opera的最新版本中工作。

The Core Methods

在本教程中，我將介紹規範中定義的以下三種核心方法−

  • openDatabase−此方法使用現有資料庫或創建新資料庫創建資料庫對象。

  • transaction−此方法使我們能夠控制事務並根據情況執行提交或回滾。

  • execute SQL−此方法用於執行實際的SQL查詢。

Opening Database

openDatabase方法負責打開一個資料庫（如果它已經存在），如果它已經不存在，此方法將創建它。

要創建和打開資料庫，請使用以下代碼−

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

上述方法採用了以下五個參數&負;

  • Database name
  • Version number
  • Text description
  • Size of database
  • Creation callback

如果正在創建資料庫，則將調用最後一個和第五個參數creation callback。但是，如果沒有此功能，資料庫仍在動態創建和正確的版本控制中。

Executing queries

要執行查詢，請使用database.transaction（）函數。這個函數需要一個單獨的參數，這個參數負責實際執行查詢，如下所示−

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
});

上面的查詢將在「mydb」資料庫中創建一個名爲LOGS的表。

INSERT Operation

爲了在表中創建entries，我們在上面的示例中添加了簡單的SQL查詢，如下所示−

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});

我們可以在創建輸入時傳遞動態值，如下所示;

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log]; 
});

這裡e\u id和e\u log是外部變量，executeSql將數組參數中的每個項映射到「？」s。

READ Operation

爲了讀取已經存在的記錄，我們使用回調來捕獲以下結果;

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});  

db.transaction(function (tx) { 
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
      var len = results.rows.length, i; 
      msg = "<p>Found rows: " + len + "</p>"; 
      document.querySelector('#status').innerHTML +=  msg; 
  
      for (i = 0; i < len; i++) { 
         alert(results.rows.item(i).log ); 
      } 
  
   }, null); 
});

Final Example

最後，讓我們將這個示例保存在一個完整的HTML5文檔中，如下所示，並嘗試使用Safari瀏覽器運行它。

Live Demo 
<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
         var msg; 
    
         db.transaction(function (tx) { 
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
            msg = '<p>Log message created and row inserted.</p>'; 
            document.querySelector('#status').innerHTML =  msg; 
         })

         db.transaction(function (tx) { 
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
               var len = results.rows.length, i; 
               msg = "<p>Found rows: " + len + "</p>"; 
               document.querySelector('#status').innerHTML +=  msg; 
      
               for (i = 0; i < len; i++) { 
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; 
                  document.querySelector('#status').innerHTML +=  msg; 
               } 
            }, null); 
         }); 
      </script> 
   </head> 
  
   <body> 
      <div id = "status" name = "status">Status Message</div> 
   </body> 
</html>

這將產生以下結果&負;

HTML5 - Server Sent Events

傳統的web應用程式生成發送到web伺服器的事件。例如，只需單擊一個連結，就可以從伺服器請求一個新頁面。

從web瀏覽器流向web伺服器的事件類型可以稱爲客戶端發送的事件。

除了HTML5之外，Web應用1.0還引入了從Web伺服器到Web瀏覽器的事件，稱爲伺服器發送事件（SSE）。使用SSE，您可以將DOM事件不斷地從web伺服器推送到訪問者的瀏覽器。

事件流方法打開到伺服器的持久連接，在新信息可用時向客戶端發送數據，從而消除了連續輪詢的需要。

伺服器發送的事件規範了我們如何將數據從伺服器流到客戶端。

Web Application for SSE

要在web應用程式中使用伺服器發送的事件，您需要向文檔中添加一個<eventsource>元素。

<eventsource>元素的src公司屬性應指向一個URL，該URL應提供發送包含事件的數據流的持久HTTP連接。

URL將指向一個PHP、PERL或任何Python腳本，這些腳本負責始終如一地發送事件數據。下面是一個web應用程式的簡單示例，它將需要伺服器時間。

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         /* Define event handling logic here */
      </script>
   </head>
   
   <body>
      <div id = "sse">
         <eventsource src = "/cgi-bin/ticker.cgi" />
      </div>
		
      <div id = "ticker">
         <TIME>
      </div>
   </body>
</html>

Server Side Script for SSE

伺服器端腳本應發送內容類型頭，指定類型文本/事件流如下。

print "Content-Type: text/event-stream\n\n";

設置內容類型後，伺服器端腳本將發送一個事件：標記，後跟事件名稱。下面的示例將伺服器時間作爲事件名發送，以新行字符結尾。

print "Event: server-time\n";

最後一步是使用數據：標記發送事件數據，該標記後面是字符串值的整數，以一個新行字符結尾，如下所示−

$time = localtime();
print "Data: $time\n";

最後，下面是用Perl−編寫的完整ticker.cgi;

#!/usr/bin/perl  
print "Content-Type: text/event-stream\n\n";  

while(true) { 
   print "Event: server-time\n"; 
   $time = localtime(); 
   print "Data: $time\n"; 
   sleep(5); 
}

Handle Server-Sent Events

讓我們修改web應用程式來處理伺服器發送的事件。下面是最後一個例子。

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         document.getElementsByTagName("eventsource")[0].addEventListener("server-time", 
         eventHandler, false); 
    
         function eventHandler(event) { 

            // Alert time sent by the server 
            document.querySelector('#ticker').innerHTML = event.data; 
         } 
      </script> 
   </head> 
  
   <body> 
      <div id = "sse"> 
         <eventsource src = "/cgi-bin/ticker.cgi" /> 
      </div> 
   
      <div id = "ticker" name = "ticker"> 
         [TIME] 
      </div> 
   </body> 
</html>

在測試伺服器發送的事件之前，我建議您確保您的web瀏覽器支持此概念。

HTML5 - WebSockets

WebSockets是下一代web應用程式的雙向通信技術，它通過一個套接字操作，並通過符合HTML 5標準的瀏覽器中的JavaScript接口公開。

一旦獲得與Web伺服器的Web套接字連接，就可以通過調用asend（）方法從瀏覽器向伺服器發送數據，並通過onmessage事件處理程序從伺服器向瀏覽器接收數據。

下面是創建新WebSocket對象的API。

var Socket = new WebSocket(url, [protocal] );

在這裡，第一個參數url指定要連接到的url。第二個屬性protocol是可選的，如果存在，則指定伺服器必須支持的子協議才能成功連接。

WebSocket Attributes

下面是WebSocket對象的屬性。假設我們創建了上面提到的Socket對象;

Sr.No. Attribute & Description
1

套接字.readyState

readonly屬性readyState表示連接的狀態。它可以有以下值&負;

  • 值爲0表示尚未建立連接。

  • 值爲1表示已建立連接並且可以進行通信。

  • 值爲2表示連接正在進行關閉握手。

  • 值3表示連接已關閉或無法打開。
2

緩衝底座插座

readonly屬性bufferedAmount表示使用send（）方法排隊的UTF-8文本的字節數。

WebSocket Events

以下是與WebSocket對象關聯的事件。假設我們創建了上面提到的Socket對象;

Event Event Handler Description
open Socket.onopen This event occurs when socket connection is established.
message Socket.onmessage This event occurs when client receives data from server.
error Socket.onerror This event occurs when there is any error in communication.
close Socket.onclose This event occurs when connection is closed.

WebSocket Methods

以下是與WebSocket對象關聯的方法。假設我們創建了上面提到的Socket對象;

Sr.No. Method & Description
1

Socket.send（）

send（data）方法使用連接發送數據。
2

套接字。關閉（）

close（）方法將用於終止任何現有連接。

WebSocket Example

WebSocket是客戶端和伺服器之間的標準雙向TCP套接字。套接字開始是一個HTTP連接，然後在HTTP握手之後「升級」到一個TCP套接字。握手之後，任何一方都可以發送數據。

Client Side HTML & JavaScript Code

在編寫本教程時，只有少數web瀏覽器支持WebSocket（）接口。您可以使用最新版本的Chrome、Mozilla、Opera和Safari來嘗試下面的示例。

<!DOCTYPE HTML>

<html>
   <head>
      
      <script type = "text/javascript">
         function WebSocketTest() {
            
            if ("WebSocket" in window) {
               alert("WebSocket is supported by your Browser!");
               
               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function() {
                  
                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  alert("Message is sent...");
               };
				
               ws.onmessage = function (evt) { 
                  var received_msg = evt.data;
                  alert("Message is received...");
               };
				
               ws.onclose = function() { 
                  
                  // websocket is closed.
                  alert("Connection is closed..."); 
               };
            } else {
              
               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>
		
   </head>
   
   <body>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
      </div>
      
   </body>
</html>

Install pywebsocket

在測試上述客戶端程序之前，需要一個支持WebSocket的伺服器。從pywebsocket下載mod_pywebsocket-x.x.x.tar.gz，其目的是爲ApacheHTTP伺服器提供Web套接字擴展，並按照以下步驟安裝。

  • 解壓並解壓下載的文件。

  • 進入pywebsocket-x.x.x/src/目錄。

  • $python setup.py生成

  • $sudo python setup.py安裝

  • 然後按−鍵閱讀文檔;

    • $pydoc mod_pywebsocket

這將把它安裝到python環境中。

Start the Server

轉到pywebsocket-x.x.x/src/mod_pywebsocket文件夾並運行以下命令−

$sudo python standalone.py -p 9998 -w ../example/

這將在埠9998啓動伺服器監聽，並使用echo-wsh.py所在的-w選項指定的處理程序目錄。

現在使用Chrome瀏覽器打開您在開始時創建的html文件。如果您的瀏覽器支持WebSocket（），那麼您將收到警告，表明您的瀏覽器支持WebSocket，最後當您單擊「運行WebSocket」時，您將收到伺服器腳本發送的再見消息。

HTML5 - Canvas

HTML5 element<canvas>爲您提供了一種使用JavaScript繪製圖形的簡單而強大的方法。它可以用來繪製圖形、製作照片合成或製作簡單（而不是那麼簡單）的動畫。

這裡有一個簡單的<canvas>元素，它只有兩個特定屬性寬度和高度以及所有核心HTML5屬性，如id、name和class等。

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

您可以使用如下方法在DOM中很容易地找到<canvas>元素;

var canvas = document.getElementById("mycanvas");

讓我們看一個在HTML5文檔中使用<canvas>元素的簡單示例。

Live Demo 
<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

這將產生以下結果&負;

The Rendering Context

<canvas>最初是空白的，要顯示某些內容，腳本首先需要訪問呈現上下文並在其上繪製。

canvas元素有一個名爲getContext的DOM方法，用於獲取呈現上下文及其繪圖函數。此函數接受一個參數，即上下文類型2d。

下面是獲取所需上下文的代碼，同時檢查瀏覽器是否支持<canvas>element−

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

Browser Support

最新版本的Firefox、Safari、Chrome和Opera都支持HTML5 Canvas，但IE8本身並不支持Canvas。

您可以使用explorercanvas通過Internet Explorer獲得畫布支持。您只需要按照以下方式包含這個JavaScript−

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

HTML5 Canvas Examples

本教程將介紹與HTML5<canvas>元素相關的以下示例。

Sr.No. Examples & Description
1 Drawing Rectangles

了解如何使用HTML5<canvas>元素繪製矩形
2 Drawing Paths

了解如何在HTML5<canvas>元素中使用路徑生成形狀
3 Drawing Lines

了解如何使用HTML5<canvas>元素繪製線條
4 Drawing Bezier

了解如何使用HTML5<canvas>元素繪製貝塞爾曲線
5 Drawing Quadratic

了解如何使用HTML5<canvas>元素繪製二次曲線
6 Using Images

了解如何將圖像與HTML5<canvas>元素一起使用
7 Create Gradients

了解如何使用HTML5<canvas>元素創建漸變
8 Styles and Colors

了解如何使用HTML5<canvas>元素應用樣式和顏色
9 Text and Fonts

學習如何使用不同的字體和大小繪製令人驚嘆的文本。
10 Pattern and Shadow

學習如何繪製不同的圖案和陰影。
11 Canvas States

了解如何在畫布上執行複雜繪圖時保存和還原畫布狀態。
12 Canvas Translation

此方法用於將畫布及其原點移動到網格中的其他點。
13 Canvas Rotation

此方法用於圍繞當前原點旋轉畫布。
14 Canvas Scaling

此方法用於增加或減少畫布網格中的單位。
15 Canvas Transform

這些方法允許直接修改轉換矩陣。
16 Canvas Composition

此方法用於屏蔽畫布上的某些區域或清除區域。
17 Canvas Animation

了解如何使用HTML5畫布和JavaScript創建基本動畫。

HTML5 - Audio & Video

HTML5的功能包括無需Flash的本地音頻和視頻支持。

HTML5<音頻>和<視頻>標記使向網站添加媒體變得簡單。您需要設置src公司屬性來標識媒體源並包含一個controls屬性，以便用戶可以播放和暫停媒體。

Embedding Video

以下是在網頁中嵌入視頻文件的最簡單形式;

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser does not support the <video> element.   
</video>

當前的HTML5草案規範沒有指定瀏覽器應該在視頻標籤中支持哪些視頻格式。但最常用的視頻格式是&負;

  • Ogg−帶有dora視頻編解碼器和Vorbis音頻編解碼器的Ogg文件。

  • 帶H.264視頻編解碼器和AAC音頻編解碼器的mpeg4文件。

您可以使用<source>標記指定介質、介質類型和許多其他屬性。一個視頻元素允許多個源元素，瀏覽器將使用第一個識別的格式−

Live Demo 
<!DOCTYPE HTML>

<html>
   <body>
      
      <video  width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type ="video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the <video> element.
      </video>
      
   </body>
</html>

這將產生以下結果&負;

Video Attribute Specification

HTML5視頻標籤可以有許多屬性來控制控制項的外觀和各種功能;

Sr.No. Attribute & Description
1

自動播放

如果指定了此布爾屬性，視頻將在不停止加載數據的情況下自動開始播放。
2

自動緩衝

此布爾屬性如果指定，則視頻將自動開始緩衝，即使未設置爲自動播放。
3

控制項

如果存在此屬性，它將允許用戶控制視頻播放，包括音量、查找和暫停/恢復播放。
4

高度

此屬性指定視頻顯示區域的高度（以CSS像素爲單位）。
5

循環

此布爾屬性（如果指定）將允許視頻在到達結尾後自動返回到開始位置。
6

預載

此屬性指定視頻將在頁面加載時加載並準備運行。如果存在自動播放，則忽略。
7

海報

這是在用戶播放或查找之前要顯示的圖像的URL。
8

src公司

要嵌入的視頻的URL。這是可選的;您可以使用視頻塊中的<source>元素指定要嵌入的視頻。
9

寬度

此屬性指定視頻顯示區域的寬度（以CSS像素爲單位）。

Embedding Audio

HTML5支持<audio>標記，用於在HTML或XHTML文檔中嵌入聲音內容，如下所示。

<audio src = "foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>

當前的HTML5草案規範沒有指定瀏覽器應該在音頻標籤中支持哪些音頻格式。但最常用的音頻格式是ogg、mp3和wav。

您可以使用<source&ggt;標記指定媒體、媒體類型和許多其他屬性。一個音頻元素允許多個源元素，瀏覽器將使用第一個識別的格式−

Live Demo 
<!DOCTYPE HTML>

<html>
   <body>
      
      <audio controls autoplay>
         <source src = "/html5/audio.ogg" type = "audio/ogg" />
         <source src = "/html5/audio.wav" type = "audio/wav" />
         Your browser does not support the <audio> element.
      </audio>
      
   </body>
</html>

這將產生以下結果&負;

Audio Attribute Specification

HTML5音頻標籤可以有許多屬性來控制控制項的外觀和各種功能;

Sr.No. Attribute & Description
1

自動播放

如果指定了此布爾屬性，音頻將在不停止加載數據的情況下自動開始播放。
2

自動緩衝

如果指定此布爾屬性，則音頻將自動開始緩衝，即使未設置爲自動播放。
3

控制項

如果此屬性存在，則允許用戶控制音頻播放，包括音量、搜索和暫停/恢復播放。
4

循環

此布爾屬性（如果指定）將允許音頻在到達結尾後自動返回到開頭。
5

預載

此屬性指定音頻將在頁面加載時加載並準備運行。如果存在自動播放，則忽略。
6

src公司

要嵌入的音頻的URL。這是可選的;您可以使用視頻塊中的<source>元素指定要嵌入的視頻。

Handling Media Events

HTML5音頻和視頻標籤可以有許多屬性來使用JavaScript控制控制項的各種功能;

S.No. Event & Description
1

中止

此事件在中止播放時生成。
2

（B）Canplay（B）

此事件是在有足夠的數據可供播放媒體時生成的。
3

結束

回放完成時生成此事件。
4

錯誤

發生錯誤時生成此事件。
5

加載數據

此事件在媒體的第一幀完成加載時生成。
6

下載開始

此事件在加載媒體開始時生成。
7

暫停

暫停播放時生成此事件。
8

播放

播放開始或繼續時生成此事件。
9

進展

此事件定期生成，以通知媒體下載的進度。
10

稅率變動

此事件在播放速度更改時生成。
11

探索者

搜索操作完成時生成此事件。
12

尋找

此事件在搜索操作開始時生成。
13

暫停

此事件是在暫停加載媒體時生成的。
14

體積變化

此事件在音頻音量更改時生成。
15

等待

當請求的操作（例如回放）被延遲以等待另一個操作（例如查找）的完成時，會生成此事件。

下面是允許播放給定視頻的示例;

Live Demo 
<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         function PlayVideo() {
            var v = document.getElementsByTagName("video")[0];  
            v.play(); 
         }
      </script>
   </head>
   
   <body>
   
      <form>         
         <video width = "300" height = "200" src = "/html5/foo.mp4">
         Your browser does not support the video element.
         </video>
         <br />
         <input type = "button" onclick = "PlayVideo();" value = "Play"/>
      </form>
      
   </body>
</html>

這將產生以下結果&負;

Configuring Servers for Media Type

默認情況下，大多數伺服器不提供具有正確MIME類型的Ogg或mp4媒體，因此您可能需要爲此添加適當的配置。

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4

HTML5 - Geolocation

HTML5地理定位API允許您與喜愛的網站共享您的位置。JavaScript可以捕獲您的緯度和經度，並發送到後端web伺服器，做一些有趣的位置感知的事情，如查找本地企業或在地圖上顯示您的位置。

現在大多數瀏覽器和移動設備都支持地理定位API。geolocationapi使用全局導航器對象的新屬性，即geolocation對象，可以創建如下−

var geolocation = navigator.geolocation;

geolocation對象是一個服務對象，它允許小部件檢索有關設備地理位置的信息。

Geolocation Methods

geolocation對象提供以下方法−

Sr.No. Method & Description
1 getCurrentPosition()

此方法檢索用戶的當前地理位置。
2 watchPosition()

此方法檢索有關設備當前地理位置的定期更新。
3 clearWatch()

此方法取消正在進行的監視位置調用。

Example

下面是使用上述任何方法的示例代碼−

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler);
}

這裡showLocation和errorHandler是回調方法，用於獲取下一節中解釋的實際位置，並在有錯誤時處理錯誤。

Location Properties

Geolocation方法getCurrentPosition（）和getPositionUsingMethodName（）指定檢索位置信息的回調方法。這些方法是用存儲完整位置信息的對象Position異步調用的。

位置對象指定設備的當前地理位置。位置表示爲一組地理坐標以及有關航向和速度的信息。

下表描述了Position對象的屬性。對於可選屬性，如果系統無法提供值，則該屬性的值設置爲空。

Property Type Description
coords objects Specifies the geographic location of the device. The location is expressed as a set of geographic coordinates together with information about heading and speed.
coords.latitude Number Specifies the latitude estimate in decimal degrees. The value range is [-90.00, +90.00].
coords.longitude Number Specifies the longitude estimate in decimal degrees. The value range is [-180.00, +180.00].
coords.altitude Number [Optional] Specifies the altitude estimate in meters above the WGS 84 ellipsoid.
coords.accuracy Number [Optional] Specifies the accuracy of the latitude and longitude estimates in meters.
coords.altitudeAccuracy Number [Optional] Specifies the accuracy of the altitude estimate in meters.
coords.heading Number [Optional] Specifies the device's current direction of movement in degrees counting clockwise relative to true north.
coords.speed Number [Optional] Specifies the device's current ground speed in meters per second.
timestamp date Specifies the time when the location information was retrieved and the Position object created.

Example

下面是一個使用Position對象的示例代碼。這裡showLocation方法是一個回調方法−

function showLocation( position ) {
   var latitude = position.coords.latitude;
   var longitude = position.coords.longitude;
   ...
}

Handling Errors

地理定位是一項複雜的工作，它需要捕捉任何錯誤，並對其進行優雅的處理。

geolocations方法getCurrentPosition（）和watchPosition（）使用一個錯誤處理程序回調方法，該方法提供PositionError對象。這個對象有以下兩個屬性&負;

Property Type Description
code Number Contains a numeric code for the error.
message String Contains a human-readable description of the error.

下表描述了PositionError對象中返回的可能錯誤代碼。

Code Constant Description
0 UNKNOWN_ERROR The method failed to retrieve the location of the device due to an unknown error.
1 PERMISSION_DENIED The method failed to retrieve the location of the device because the application does not have permission to use the Location Service.
2 POSITION_UNAVAILABLE The location of the device could not be determined.
3 TIMEOUT The method was unable to retrieve the location information within the specified maximum timeout interval.

Example

下面是使用PositionError對象的示例代碼。這裡的errorHandler方法是一個回調方法−

function errorHandler( err ) {
   
   if (err.code == 1) {
      
      // access is denied
   }
   ...
}

Position Options

下面是getCurrentPosition（）方法的實際語法−

getCurrentPosition(callback, ErrorCallback, options)

這裡的第三個參數是PositionOptions對象，它指定一組用於檢索設備地理位置的選項。

下面是可以指定爲第三個參數的選項−

Property Type Description
enableHighAccuracy Boolean Specifies whether the widget wants to receive the most accurate location estimate possible. By default this is false.
timeout Number The timeout property is the number of milliseconds your web application is willing to wait for a position.
maximumAge Number Specifies the expiry time in milliseconds for cached location information.

Example

下面是一個示例代碼，演示如何使用上述方法−

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000});
}

HTML5 - Microdata

微數據是在網頁中提供附加語義的標準化方法。

微數據允許您定義自己的自定義元素，並開始在網頁中嵌入自定義屬性。在高層次上，微數據由一組名-值對組成。

這些組稱爲項，每個名稱-值對都是a屬性。項和屬性由正則元素表示。

Example

  • 要創建項，使用項目範圍屬性。

  • 若要將屬性添加到項，則在項的一個後代上使用Itemprop屬性。

這裡有兩個項，每個項都有屬性「name」−

Live Demo 
<html>
   <body>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Zara</span>.</p>
      </div>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Nuha</span>.</p>
      </div>
      
   </body>
</html>

它將產生以下結果&負;

屬性的值通常是字符串，但它可以有以下數據類型−

Global Attributes

Microdata引入了五個全局屬性，可供任何元素使用，並爲機器提供有關數據的上下文。

Sr.No. Attribute & Description
1

項目範圍

這用於創建項。itemscope屬性是一個布爾屬性，它告訴我們這個頁面上有微數據，這就是它的開始。
2

項目類型

此屬性是定義項並爲屬性提供上下文的有效URL。
3

項目ID

此屬性是項的全局標識符。
4

Itemprop

此屬性定義項的屬性。
5

Itemref

此屬性提供要爬網以查找項的名稱-值對的其他元素的列表。

Properties Datatypes

屬性通常具有上述示例中提到的字符串值，但也可以具有URL值。下面的示例有一個屬性「image」，其值爲URL−

<div itemscope>
   <img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint">
</div>

屬性也可以具有日期、時間或日期和時間值。這是使用time元素及其datetime屬性實現的。

Live Demo 
<html>
   <body>
      
      <div itemscope>
         My birthday is:
         <time itemprop = "birthday" datetime = "1971-05-08">
            Aug 5th 1971
         </time>
      </div>
      
   </body>
</html>

它將產生以下結果&負;

屬性本身也可以是名稱-值對的組，方法是將itemscope屬性放在聲明該屬性的元素上。

Microdata API support

如果瀏覽器支持HTML5微數據API，則全局文檔對象上將有一個getItems（）函數。如果瀏覽器不支持微數據，則getItems（）函數將未定義。

function supports_microdata_api() {
   return !!document.getItems;
}

modernisr還不支持檢查微數據API，因此您需要使用上面列出的函數。

HTML5微數據標準包括HTML標記（主要用於搜尋引擎）和一組DOM函數（主要用於瀏覽器）。

你可以在網頁中包含微數據標記，而不理解微數據屬性的搜尋引擎會忽略它們。但如果需要通過DOM訪問或操作微數據，則需要檢查瀏覽器是否支持微數據DOM API。

Defining Microdata Vocabulary

要定義微數據詞彙表，需要一個指向工作網頁的名稱空間URL。例如，https://data-vocabulary.org/Person可以用作具有以下命名屬性的個人微數據詞彙表的名稱空間−

  • 姓名−人名爲簡單字符串

  • 照片−此人照片的URL。

  • URL−屬於此人的網站。

使用一個人的屬性，微數據可以如下所示;

Live Demo 
<html>
   <body>
   
      <div itemscope>
         <section itemscope itemtype = "http://data-vocabulary.org/Person">
            <h1 itemprop = "name">Gopal K Varma</h1>
         
            <p>
               <img itemprop = "photo" 
                  src = "http://www.tutorialspoint.com/green/images/logo.png">
            </p>
            
            <a itemprop = "url" href = "#">Site</a>
         </section>
      </div>
      
   </body>
</html>

它將產生以下結果&負;

谷歌支持微數據作爲其豐富的代碼片段程序的一部分。當Google的web爬蟲解析你的頁面並找到符合http://data vocabulary.org/Person詞彙表的微數據屬性時，它會解析出這些屬性並將它們與其他頁面數據一起存儲。

有關微數據的進一步開發，您可以隨時參考html5微數據。

HTML5 - Drag & drop

拖放（Drag and Drop，DnD）是一種功能強大的用戶界面概念，通過滑鼠單擊可以輕鬆地複製、重新排序和刪除項目。這允許用戶在一個元素上單擊並按住滑鼠按鈕，將其拖到另一個位置，然後釋放滑鼠按鈕將元素放在那裡。

要使用傳統的HTML4實現拖放功能，開發人員要麼必須使用複雜的JavaScript編程，要麼必須使用jQuery等其他JavaScript框架。

現在HTML5提供了一個拖放（Drag-and-Drop，DnD）API，它爲瀏覽器提供了原生的DnD支持，使得編寫代碼更加容易。

HTML5DND受所有主要瀏覽器的支持，如Chrome、Firefox3.5和Safari4等。

Drag and Drop Events

在拖放操作的各個階段中觸發的事件數。下面列出了這些事件;

Sr.No. Events & Description
1

dragstart公司

當用戶開始拖動對象時激發。
2

德拉根特

當滑鼠第一次移動到目標元素上而發生拖動時激發。此事件的偵聽器應指示是否允許刪除此位置。如果沒有偵聽器，或者偵聽器不執行任何操作，則默認情況下不允許刪除。
3

排水管

當發生拖動時，當滑鼠移到某個元素上時，將觸發此事件。大多數情況下，偵聽器期間發生的操作將與dragenter事件相同。
4

德拉格里夫

當滑鼠在拖動時離開元素時，將觸發此事件。監聽器應移除用於放置反饋的任何突出顯示或插入標記。
5

阻力

每次拖動對象時移動滑鼠時激發。
6

下降

拖放事件將在拖放操作結束時發生拖放的元素上觸發。監聽器將負責檢索被拖動的數據並將其插入拖放位置。
7

德拉根德

當用戶在拖動對象時釋放滑鼠按鈕時激發。

注意−注意，僅觸發拖動事件;在拖動操作期間不會觸發滑鼠事件（如mousemove）。

The DataTransfer Object

所有拖放事件的事件偵聽器方法都接受event對象，該對象具有名爲dataTransfer的只讀屬性。

event.dataTransfer返回與事件關聯的dataTransfer對象，如下所示−

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

DataTransfer對象保存有關拖放操作的數據。可以根據與DataTransfer對象相關聯的各種屬性來檢索和設置這些數據，如下所述−

Sr.No. DataTransfer attributes and their description
1

dataTransfer.dropEffect[=值]

  • 返回當前選定的操作類型。

  • 可以設置此屬性，以更改選定的操作。

  • 可能的值爲「無」、「複製」、「連結」和「移動」。
2

datatransfer.effectallowed[=value

  • 返回允許的操作類型。

  • 可以設置此屬性，以更改允許的操作。

  • 可能的值有：none、copy、copy link、copy move、link、linkMove、move、all和uninitialized。
3

數據傳輸.types

返回一個DOMStringList，列出在dragstart事件中設置的格式。此外，如果正在拖動任何文件，則其中一種類型將是字符串「files」。
4

dataTransfer.clearData（[格式]）

刪除指定格式的數據。如果省略參數，則刪除所有數據。
5

datatransfer.setdata（format，data

添加指定的數據。
6

data=dataTransfer.getData（格式）

返回指定的數據。如果沒有這樣的數據，則返回空字符串。
7

數據傳輸.files

返回要拖動的文件的文件列表（如果有）。
8

dataTransfer.setDragImage（元素，x，y）

使用給定元素更新拖動反饋，替換以前指定的任何反饋。
9

數據傳輸.addElement（元素）

將給定元素添加到用於呈現拖動反饋的元素列表中。

Drag and Drop Process

以下是執行拖放操作的步驟;

Step 1 - Making an Object Draggable

下面是需要採取的步驟;

  • 如果要拖動元素，則需要將該元素的draggable屬性設置爲true。

  • Set an event listener for dragstart公司 that stores the data being dragged.

  • The event listener dragstart公司 will set the allowed effects (copy, move, link, or some combination).

下面是使對象可拖動的示例−

Live Demo 
<!DOCTYPE HTML>

<html>
   <head>
      
      <style type = "text/css">
         
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      
      <script type = "text/javascript">
         
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed = 'move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            
            return true;
         }
      </script>
      
   </head>
   <body>
      
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         
         <div id = "boxA" draggable = "true" 
            ondragstart = "return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         
         <div id = "boxB">Dustbin</div>
      </center>
      
   </body>
</html>

這將產生以下結果&負;

Step 2 - Dropping the Object

要接受丟棄，丟棄目標必須至少偵聽三個事件。

  • The 德拉根特 event, which is used to determine whether or not the drop target is to accept the drop. If the drop is to be accepted, then this event has to be canceled.

  • The 排水管 event, which is used to determine what feedback is to be shown to the user. If the event is canceled, then the feedback (typically the cursor) is updated based on the dropEffect attribute's value.

  • Finally, the 下降 event, which allows the actual drop to be performed.

下面是將一個對象放入另一個對象中的示例−

Live Demo 
<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
         function dragEnter(ev) {
            event.preventDefault();
            return true;
         }
         function dragOver(ev) {
            return false;
         }
         function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

這將產生以下結果&負;

HTML5 - Web Workers

JavaScript被設計爲在單線程環境中運行，這意味著多個腳本不能同時運行。考慮這樣一種情況：您需要處理UI事件、查詢和處理大量API數據以及操作DOM。

JavaScript會在CPU利用率高的情況下掛起瀏覽器。讓我們舉一個簡單的例子，JavaScript會經歷一個大循環&負;

Live Demo 
<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         function bigLoop() {
            
            for (var i = 0; i <= 10000; i += 1) {
               var j = i;
            }
            alert("Completed " + j + "iterations" );
         }
         
         function sayHello(){
            alert("Hello sir...." );
         }
      </script>
      
   </head>
   
   <body>
      <input type = "button" onclick = "bigLoop();" value = "Big Loop" />
      <input type = "button" onclick = "sayHello();" value = "Say Hello" />
   </body>
</html>

它將產生以下結果&負;

當您單擊大循環按鈕時，它在Firefox−中顯示以下結果;

Big Loop

What is Web Workers?

上面解釋的情況可以使用Web工作者來處理，他們將在不中斷用戶界面的情況下完成所有計算開銷較大的任務，並且通常在單獨的線程上運行。

Web Worker允許長時間運行的腳本，這些腳本不會被響應單擊或其他用戶交互的腳本中斷，並且允許長時間執行任務，而不會讓頁面保持響應。

webworker是後台腳本，它們相對較重，不打算大量使用。例如，爲400萬像素圖像的每個像素啓動一個worker是不合適的。

當腳本在Web工作者內部執行時，它無法訪問Web頁面的窗口對象（window.document），這意味著Web工作者不能直接訪問Web頁面和DOM API。儘管Web工作者無法阻止瀏覽器UI，但他們仍然可以消耗CPU周期，並使系統響應性降低。

How Web Workers Work?

Web工作程序是用JavaScript文件的URL初始化的，該文件包含工作程序將執行的代碼。此代碼設置事件偵聽器，並與從主頁生成它的腳本通信。下面是簡單的語法−

var worker = new Worker('bigLoop.js');

如果指定的javascript文件存在，瀏覽器將生成一個新的工作線程，該線程將異步下載。如果到工作進程的路徑返回404錯誤，則該工作進程將以靜默方式失敗。

如果應用程式有多個支持的JavaScript文件，則可以導入它們importScripts（）方法，該方法以文件名作爲參數，用逗號分隔，如下所示−

importScripts("helper.js", "anotherHelper.js");

生成Web Worker後，Web Worker與其父頁面之間的通信將使用postMessage（）方法完成。根據瀏覽器/版本的不同，postMessage（）可以接受字符串或JSON對象作爲其單個參數。

使用主頁中的onmessage事件訪問Web Worker傳遞的消息。現在讓我們使用Web Worker編寫bigLoop示例。下面是主頁（hello.htm），它將生成一個web工作者來執行循環並返回變量j−的最終值;

Live Demo 
<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         var worker = new Worker('bigLoop.js');
         
         worker.onmessage = function (event) {
            alert("Completed " + event.data + "iterations" );
         };
         
         function sayHello() {
            alert("Hello sir...." );
         }
      </script>
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello();" value = "Say Hello"/>
   </body>
</html>

下面是bigLoop.js文件的內容。這利用postMessage（）API將通信傳遞迴主頁−

for (var i = 0; i <= 1000000000; i += 1) {
   var j = i;
}
postMessage(j);

這將產生以下結果&負;

Stopping Web Workers

Web工作者不會自行停止，但是啓動它們的頁面可以通過調用terminate（）方法來停止它們。

worker.terminate();

已終止的Web工作進程將不再響應消息或執行任何其他計算。不能重新啓動工作進程;相反，可以使用相同的URL創建新的工作進程。

Handling Errors

下面顯示了將錯誤記錄到控制台的Web工作者JavaScript文件中的錯誤處理函數的示例。使用錯誤處理代碼，上面的示例將變爲以下−

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         var worker = new Worker('bigLoop.js');
         
         worker.onmessage = function (event) {
            alert("Completed " + event.data + "iterations" );
         };
         
         worker.onerror = function (event) {
            console.log(event.message, event);
         };
         
         function sayHello() {
            alert("Hello sir...." );
         }
      </script>
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello();" value = "Say Hello"/>
   </body>
</html>

Checking for Browser Support

以下是檢測瀏覽器中可用的Web輔助功能支持的語法−

Live Demo 
<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      <script src = "/js/modernizr-1.5.min.js"></script>
      
      <script>
      function myFunction() {
         
         if (Modernizr.webworkers) {
            alert("Congratulation!! you have web workers support." );
         } else {
            alert("Sorry!! you do not have web workers support." );
         }
      }
      </script>
   </head>
   
   <body>
      <button onclick = "myFunction()">Click me</button>
   </body>
</html>

這將產生以下結果&負;

HTML5 - IndexedDB

indexeddb是一個新的HTML5概念，用於在用戶瀏覽器中存儲數據。indexeddb比本地存儲更強大，對於需要存儲大量數據的應用程式非常有用。這些應用程式運行效率更高，加載速度更快。

Why to use indexeddb?

W3C已經宣布Web SQL資料庫是一個不推薦使用的本地存儲規範，因此Web開發人員不應該再使用此技術。indexeddb是web-SQL資料庫的另一種選擇，比舊技術更有效。

Features

  • it stores key-pair values
  • it is not a relational database
  • IndexedDB API is mostly asynchronous
  • it is not a structured query language
  • it has supported to access the data from same domain

IndexedDB

在進入indexeddb之前，我們需要添加一些實現的前綴，如下所示

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || 
window.msIndexedDB;
 
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || 
window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || 
window.webkitIDBKeyRange || window.msIDBKeyRange
 
if (!window.indexedDB) {
   window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

Open an IndexedDB database

在創建資料庫之前，我們必須爲資料庫準備一些數據。讓我們從公司員工的詳細信息開始。

const employeeData = [
   { id: "01", name: "Gopal K Varma", age: 35, email: "contact@tutorialspoint.com" },
   { id: "02", name: "Prasad", age: 24, email: "prasad@tutorialspoint.com" }
];

Adding the data

這裡手動將一些數據添加到數據中，如下所示;

function add() {
   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .add({ id: "01", name: "prasad", age: 24, email: "prasad@tutorialspoint.com" });
   
   request.onsuccess = function(event) {
      alert("Prasad has been added to your database.");
   };
   
   request.onerror = function(event) {
      alert("Unable to add data\r\nPrasad is already exist in your database! ");
   }
}

Retrieving Data

我們可以使用get（）從資料庫檢索數據

function read() {
   var transaction = db.transaction(["employee"]);
   var objectStore = transaction.objectStore("employee");
   var request = objectStore.get("00-03");
   
   request.onerror = function(event) {
      alert("Unable to retrieve daa from database!");
   };
   
   request.onsuccess = function(event) {
      
      if(request.result) {
         alert("Name: " + request.result.name + ", Age: 
            " + request.result.age + ", Email: " + request.result.email);
      } else {
         alert("Kenny couldn't be found in your database!");  
      }
   };
}

使用get（），我們可以將數據存儲在對象中，而不是將數據存儲在游標中，並且可以從游標中檢索數據。

function readAll() {
   var objectStore = db.transaction("employee").objectStore("employee");
   
   objectStore.openCursor().onsuccess = function(event) {
      var cursor = event.target.result;
      
      if (cursor) {
         alert("Name for id " + cursor.key + " is " + cursor.value.name + ", 
            Age: " + cursor.value.age + ", Email: " + cursor.value.email);
         cursor.continue();
      } else {
         alert("No more entries!");
      }
   };
}

Removing the data

我們可以使用remove（）從IndexedDB中刪除數據

function remove() {
   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .delete("02");
   
   request.onsuccess = function(event) {
      alert("prasad entry has been removed from your database.");
   };
}

HTML Code

要顯示所有數據，我們需要使用onClick事件，如下所示code−

<!DOCTYPE html>

<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <title>IndexedDb Demo | onlyWebPro.com</title>
   </head>
   
   <body>
      <button onclick = "read()">Read </button>
      <button onclick = "readAll()"></button>
      <button onclick = "add()"></button>
      <button onclick = "remove()">Delete </button>
   </body>
</html>

最終代碼應該是as−

<!DOCTYPE html>

<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <script type = "text/javascript">
         
         //prefixes of implementation that we want to test
         window.indexedDB = window.indexedDB || window.mozIndexedDB || 
         window.webkitIndexedDB || window.msIndexedDB;
         
         //prefixes of window.IDB objects
         window.IDBTransaction = window.IDBTransaction || 
         window.webkitIDBTransaction || window.msIDBTransaction;
         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || 
         window.msIDBKeyRange
         
         if (!window.indexedDB) {
            window.alert("Your browser doesn't support a stable version of IndexedDB.")
         }
         
         const employeeData = [
            { id: "00-01", name: "gopal", age: 35, email: "gopal@tutorialspoint.com" },
            { id: "00-02", name: "prasad", age: 32, email: "prasad@tutorialspoint.com" }
         ];
         var db;
         var request = window.indexedDB.open("newDatabase", 1);
         
         request.onerror = function(event) {
            console.log("error: ");
         };
         
         request.onsuccess = function(event) {
            db = request.result;
            console.log("success: "+ db);
         };
         
         request.onupgradeneeded = function(event) {
            var db = event.target.result;
            var objectStore = db.createObjectStore("employee", {keyPath: "id"});
            
            for (var i in employeeData) {
               objectStore.add(employeeData[i]);
            }
         }
         
         function read() {
            var transaction = db.transaction(["employee"]);
            var objectStore = transaction.objectStore("employee");
            var request = objectStore.get("00-03");
            
            request.onerror = function(event) {
               alert("Unable to retrieve daa from database!");
            };
            
            request.onsuccess = function(event) {
               // Do something with the request.result!
               if(request.result) {
                  alert("Name: " + request.result.name + ", 
                     Age: " + request.result.age + ", Email: " + request.result.email);
               } else {
                  alert("Kenny couldn't be found in your database!");
               }
            };
         }
         
         function readAll() {
            var objectStore = db.transaction("employee").objectStore("employee");
            
            objectStore.openCursor().onsuccess = function(event) {
               var cursor = event.target.result;
               
               if (cursor) {
                  alert("Name for id " + cursor.key + " is " + cursor.value.name + ", 
                     Age: " + cursor.value.age + ", Email: " + cursor.value.email);
                  cursor.continue();
               } else {
                  alert("No more entries!");
               }
            };
         }
         
         function add() {
            var request = db.transaction(["employee"], "readwrite")
            .objectStore("employee")
            .add({ id: "00-03", name: "Kenny", age: 19, email: "kenny@planet.org" });
            
            request.onsuccess = function(event) {
               alert("Kenny has been added to your database.");
            };
            
            request.onerror = function(event) {
               alert("Unable to add data\r\nKenny is aready exist in your database! ");
            }
         }
         
         function remove() {
            var request = db.transaction(["employee"], "readwrite")
            .objectStore("employee")
            .delete("00-03");
            
            request.onsuccess = function(event) {
               alert("Kenny's entry has been removed from your database.");
            };
         }
      </script>
      
   </head>
   <body>
      <button onclick = "read()">Read </button>
      <button onclick = "readAll()">Read all </button>
      <button onclick = "add()">Add data </button>
      <button onclick = "remove()">Delete data </button>
   </body>
</html>

它將產生以下輸出&負;

HTML5 - Web messaging

Web消息傳遞是文檔在沒有Dom的情況下分離瀏覽上下文以共享數據的方式。它覆蓋不同域、協議或埠中的跨域通信問題

例如，您希望將數據從頁面發送到放置在iframe或voice上的ad容器，在這種情況下，Browser拋出一個安全異常。使用web消息，我們可以將數據作爲消息事件傳遞。

Message Event

消息事件觸發跨文檔消息、通道消息、伺服器發送的事件和web套接字。它由消息事件接口描述。

Attributes

Sr.No. Attributes & Description
1

數據

包含字符串數據
2

origine

包含域名和埠
3

上次事件ID

包含當前消息事件的唯一標識符。
4

來源

包含對原始文檔窗口的引用
5

港口

包含由任何消息埠發送的數據

Sending a cross-document message

在發送跨文檔消息之前，我們需要通過創建新的iframe或新窗口來創建新的web瀏覽上下文。我們可以使用with postMessage（）發送數據，它有兩個參數。它們是-;

  • message − The message to send
  • targetOrigin − Origin name

Examples

從iframe發送消息到按鈕

var iframe = document.querySelector('iframe');
var button = document.querySelector('button');

var clickHandler = function() {
   iframe.contentWindow.postMessage('The message to send.',
      'https://www.tutorialspoint.com);
}
button.addEventListener('click',clickHandler,false);

在接收文檔中接收跨文檔消息

var messageEventHandler = function(event){
   
   // check that the origin is one we want.
   if(event.origin == 'https://www.tutorialspoint.com') {
      alert(event.data);
   }
}
window.addEventListener('message', messageEventHandler,false);

Channel messaging

瀏覽上下文之間的雙向通信稱爲通道消息傳遞。它對於跨多個來源的通信非常有用。

The MessageChannel and MessagePort Objects

在創建messageChannel時，它在內部創建兩個埠來發送數據並轉發到另一個瀏覽上下文。

  • Post message（）−發布消息拋出通道

  • start（）−它發送數據

  • close（）−它關閉埠

在這個場景中，我們將數據從一個iframe發送到另一個iframe。在這裡，我們調用函數中的數據並將數據傳遞給DOM。

var loadHandler = function() {
   var mc, portMessageHandler;
   mc = new MessageChannel();
   window.parent.postMessage('documentAHasLoaded','http://foo.example',[mc.port2]);
   
   portMessageHandler = function(portMsgEvent) {
      alert( portMsgEvent.data );
   }
   
   mc.port1.addEventListener('message', portMessageHandler, false);
   mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);

上面的代碼，它從埠2獲取數據，現在它將把數據傳遞給第二個iframe

var loadHandler = function() {
   var iframes, messageHandler;
   iframes = window.frames;
   
   messageHandler = function(messageEvent) {
      
      if( messageEvent.ports.length > 0 ) {
         
         // transfer the port to iframe[1]
         iframes[1].postMessage('portopen','http://foo.example',messageEvent.ports);
      }
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

現在，第二個文檔使用portMsgHandler函數處理數據。

var loadHandler() {
   
   // Define our message handler function
   var messageHandler = function(messageEvent) {
   
      // Our form submission handler
      
      var formHandler = function() {
         var msg = 'add <foo@example.com> to game circle.';
         messageEvent.ports[0].postMessage(msg);
      }
      document.forms[0].addEventListener('submit',formHandler,false);
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

HTML5 - CORS

跨源資源共享（CORS）是一種允許來自web瀏覽器中另一個域的受限資源的機制。

假設，如果您在HTML5演示部分中單擊HTML5-video player。它會得到攝像機的許可。如果用戶允許該權限，則只有它會打開相機，否則它不會爲web應用程式打開相機。

Making a CORS request

這裡Chrome、Firefox、Opera和Safari都使用XMLHttprequest2對象，而Internet Explorer使用類似的XDomainRequest對象object。

function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
      
      // Check if the XMLHttpRequest object has a "withCredentials" property.
      // "withCredentials" only exists on XMLHTTPRequest2 objects.
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
      
      // Otherwise, check if XDomainRequest.
      // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {
      
      // Otherwise, CORS is not supported by the browser.
      xhr = null;
   }
   return xhr;
}

var xhr = createCORSRequest('GET', url);

if (!xhr) {
   throw new Error('CORS not supported');
}

Event handles in CORS

Sr.No. Event Handler & Description
1

加載開始

啓動請求
2

進展

加載數據並發送數據
3

奧納博特

中止請求
4

誤差

請求失敗
5

加載

請求加載成功
6

準時下班

請求完成之前發生超時
7

在線

當請求完成時，無論是成功還是失敗

Example of onload or onerror event

xhr.onload = function() {
   var responseText = xhr.responseText;
   
   // process the response.
   console.log(responseText);
};

xhr.onerror = function() {
   console.log('There was an error!');
};

Example of CORS with handler

下面的示例將顯示makeCorsRequest（）和onload處理程序的示例

// Create the XHR object.
function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
      
      // XHR for Chrome/Firefox/Opera/Safari.
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
      
      // XDomainRequest for IE.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {
      
      // CORS not supported.
      xhr = null;
   }
   return xhr;
}

// Helper method to parse the title tag from the response.
function getTitle(text) {
   return text.match('<title>(.*)?</title>')[1];
}

// Make the actual CORS request.
function makeCorsRequest() {
   
   // All HTML5 Rocks properties support CORS.
   var url = 'http://www.tutorialspoint.com';
   
   var xhr = createCORSRequest('GET', url);
   
   if (!xhr) {
      alert('CORS not supported');
      return;
   }
   
   // Response handlers.
   xhr.onload = function() {
      var text = xhr.responseText;
      var title = getTitle(text);
      alert('Response from CORS request to ' + url + ': ' + title);
   };
   
   xhr.onerror = function() {
      alert('Woops, there was an error making the request.');
   };
   xhr.send();
}

HTML5 - Web RTC

全球資訊網聯盟（W3C）推出的Web RTC。支持瀏覽器到瀏覽器的應用程式，用於語音通話、視頻聊天和P2P文件共享。

如果你想試試？web RTC可用於Chrome、Opera和Firefox。一個好的開始是在這裡的簡單視頻聊天應用程式。Web RTC實現了三個API，如下所示−

  • MediaStream−訪問用戶的相機和麥克風。

  • RTCPeerConnection−訪問音頻或視頻呼叫設備。

  • RTCDataChannel−訪問對等通信。

MediaStream

MediaStream表示媒體的同步流，例如，單擊HTML5演示部分中的HTML5視頻播放器，或者單擊此處的。

上面的示例包含stream.getAudioTracks（）和stream.VideoTracks（）。如果沒有音頻軌跡，它將返回一個空數組並檢查視頻流;如果連接了網絡攝像頭，stream.getVideoTracks（）將返回一個表示網絡攝像頭流的MediaStreamTrack數組。一個簡單的例子是聊天應用程式，聊天應用程式從網絡攝像頭、後置攝像頭、麥克風獲取流。

Sample code of MediaStream

function gotStream(stream) {
   window.AudioContext = window.AudioContext || window.webkitAudioContext;
   var audioContext = new AudioContext();
   
   // Create an AudioNode from the stream
   var mediaStreamSource = audioContext.createMediaStreamSource(stream);
   
   // Connect it to destination to hear yourself
   // or any other node for processing!
   mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);

Screen capture

在Chrome瀏覽器中也可以使用mediaStreamSource，它需要HTTPS。opera中尚未提供此功能。示例演示可在此處獲得

Session Control, Network & Media Information

Web RTC需要瀏覽器之間的對等通信。這種機制需要信令、網絡信息、會話控制和媒體信息。Web開發人員可以選擇不同的機制在瀏覽器之間進行通信，如SIP或XMPP或任何雙向通信。XHR的一個示例是這裡的。