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中文網其他相關文章!