html5具備什麼功能 - tw511教學網

html5具備的功能：1、新的圖形庫，可以讓網站內容變得更加豐富；2、更方便的多媒體內容；3、地理定位；4、拖放功能；5、桌面通知；6、離線和儲存；7、效能和整合；8、裝置存取；9、樣式設計等。

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

html5具備的功能

1、新的圖形庫：

HTML5引入了Canvas和WebGL函數庫，可以讓網站內容變得更加豐富。特別是WebGL函數庫，幾乎可以改變這一領域的整個遊戲規則，只要看看這個著名的雷神之錘II遊戲場景的畫面，這可完全是用HTML5來開發的。對我來說，這代表了新的時代，讓人可以想象未來的遊戲是怎麼玩的。

2、更方便的多媒體內容：

如果曾經設計過需要包含許多影音內容的網站，你就會了解那種笨重的感覺。常常需要用一堆Flash加上<object>和<embed>標記才能獲得想要的效果。但是以後再也不用這麼麻煩了，HTML5引入了容易使用的<video>和<audio>標記，所以要在網站上加入多媒體內容變得比以往更加容易。也正因為有這樣的功能，所以很多線上視訊網站已經開始轉移到HTML5了。

3、地理定位：

人們越來越少通過桌上型電腦甚至筆記型電腦來使用網路了。在今天，有很多人通過手持可移動裝置瀏覽網路，例如智慧手機和平板電腦。目前這種移動化的網路存取特徵，再加上HTML5中新的地理定位功能，結合在一起開創了無數新的可能性。當使用者存取你的網站時，可以知道他們的精確位置，讓你能夠提供個性化內容，以配合使用者所在的環境。例如，當存取一個與郊遊有關的網站時，如果發現你處於鬧市區，就可以提供行程規劃相關的資訊；但如果你是在郊區位置存取該網站，則預設會顯示互動式地圖功能。

4、拖放功能：

這是個細微的變動，但卻非常重要。拖放功能可以讓你將瀏覽器的內容直接拖拉到電腦上，也可以將內容從電腦拖拉到瀏覽器上。真的是很劃時代的改變，不是嗎？來看看這個展示，想想看，如果社群網站有這樣的功能，當你度假回來後，就可以很容易選好你的假期照片，然後拖拉到瀏覽器，就可以馬上和網上的朋友分享。這才
是我想要的網站互動方式！

5、桌面通知：

桌面通知是出現在瀏覽器之外的小彈窗，即使在使用者沒有瀏覽網站時，也可以和網站進行互動。目前這個功能只有Google Chrome瀏覽器可以使用，你可以在這裡看到展示。這些通知很適合用來做電子郵件通知、社群網路更新、微博資訊，還有其他服務中使用。再配合拖放功能後，就真的弱化了線上和本地應用程式之間的區別。

6、離線和儲存

離線資源：應用程式快取。火狐全面支援 HTML5 離線資源規範。其他大多數針對離線資源僅提供了某種程度上的支援。

線上和離線事件。 Firefox 3 支援 WHATWG 線上和離線事件，這可以讓應用程式和擴充套件檢測是否存在可用的網路連線，以及在連線建立和斷開時能感知到。

WHATWG 使用者端對談和持久化儲存 (又名 DOM 儲存)。使用者端對談和持久化儲存讓 web 應用程式能夠在使用者端儲存結構化資料。

IndexedDB。是一個為了能夠在瀏覽器中儲存大量結構化資料，並且能夠在這些資料上使用索引進行高效能檢索的 Web 標準。

自 web 應用程式中使用檔案。對新的 HTML5 檔案 API 的支援已經被新增到 Gecko 中，從而使 Web 應用程式可以存取由使用者選擇的本地檔案。這包括使用 type file 的 <input> 元素的新的 multiple 屬性針對多檔案選擇的支援。還有 FileReader。

7、效能和整合

Web Workers。能夠把 JavaScript 計算委託給後臺執行緒，通過允許這些活動以防止使互動型事件變得緩慢。

XMLHttpRequest Level 2。允許非同步讀取頁面的某些部分，允許其顯示動態內容，根據時間和使用者行為而有所不同。這是在 Ajax背後的技術。

即時編譯的 JavaScript 引擎。新一代的 JavaScript 引擎功能更強大，效能更傑出。

History API。允許對瀏覽器歷史記錄進行操作。這對於那些互動地載入新資訊的頁面尤其有用。

conentEditable 屬性：把你的網站改變成 wiki ! HTML5 已經把 contentEditable 屬性標準化了。瞭解更多關於這個特性的內容。

拖放。 HTML5 的拖放 API 能夠支援在網站內部和網站之間拖放專案。同時也提供了一個更簡單的供擴充套件和基於 Mozilla 的應用程式使用的 API。

HTML 中的焦點管理。支援新的 HTML5 activeElement 和 hasFocus 屬性。

基於 Web 的協定處理程式。你現在可以使用 navigator.registerProtocolHandler() 方法把 web 應用程式註冊成一個協定處理程式。

requestAnimationFrame。允許控制動畫渲染以獲得更優效能。

全螢幕 API。為一個網頁或者應用程式控制使用整個螢幕，而不顯示瀏覽器介面。

指標鎖定 API。允許鎖定到內容的指標，這樣遊戲或者類似的應用程式在指標到達視窗限制時也不會失去焦點。

線上和離線事件。為了構建一個良好的具有離線功能的 web 應用程式，你需要知道什麼時候你的應用程式確實離線了。順便提一句，在你的應用程式又再回到線上狀態時你也需要知道。

8、裝置存取

使用 Camera API。允許使用和操作計算機的攝像頭，並從中存取照片。

觸控事件。對使用者按下觸控屏的事件做出反應的處理程式。

使用地理位置定位。讓瀏覽器使用地理位置服務定位使用者的位置。

檢測裝置方向。讓使用者在執行瀏覽器的裝置變更方向時能夠得到資訊。這可以被用作一種輸入裝置（例如製作能夠對裝置位置做出反應的遊戲）或者使頁面的佈局跟螢幕的方向相適應（橫向或縱向）。

指標鎖定 API。允許鎖定到內容的指標，這樣遊戲或者類似的應用程式在指標到達視窗限制時也不會失去焦點。

9、樣式設計

新的背景樣式特性。現在可以使用 box-shadow 給邏輯框設定一個陰影，而且還可以設定多背景。

更精美的邊框。現在不僅可以使用影象來格式化邊框，使用 border-image 和它關聯的普通屬性，而且可以通過 border-radius 屬性來支援圓角邊框。

為你的樣式設定動畫。使用 CSS Transitions 以在不同的狀態間設定動畫，或者使用 CSS Animations 在頁面的某些部分設定動畫而不需要一個觸發事件，你現在可以在頁面中控制移動元素了。

排版方面的改進。作者擁有更高的控制已達到更佳的排版。他們不但可以控制 text-overflow 和 hyphenation，而且也可以給它設定一個陰影或者更精細地控制它的 decorations。感謝新的 @font-face 規則，現在我們可以下載並應用自定義的字型了。.

新的展示性佈局。為了提高設計的靈活性，已經有兩種新的佈局被新增了進來：CSS 多欄佈局, 以及 CSS 靈活方框佈局。