html5具備哪些功能

這篇文章主要介紹“html5具備哪些功能”，在日常操作中，相信很多人在html5具備哪些功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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加上<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 靈活方框布局。

到此，關于“html5具備哪些功能”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！