html5具備什麼功能

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

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

html5具備的功能

#1、新的圖庫：

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

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

如果曾經設計過需要包含許多影音內容的網站，你就會了解那種笨重的感覺。常常需要用一堆Flash加上

3、地理定位：

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

4、拖曳功能：

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

5、桌面通知：

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

6、離線和儲存

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

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

WHATWG 用戶端會話和持久化儲存 (又稱為 DOM 儲存)。客戶端會話和持久化儲存讓 web 應用程式能夠在客戶端儲存結構化資料。

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

自 web 應用程式中使用檔案。對新的 HTML5 檔案 API 的支援已經被添加到 Gecko 中，從而使 Web 應用程式可以存取由使用者選擇的本機檔案。這包括使用 type file 的    元素的新的 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 靈活方框佈局。

相關推薦：《html影片教學》

以上是html5具備什麼功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！