84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
html5具備的功能：1、新的圖形庫，可以讓網站內容變得更加豐富；2、更方便的多媒體內容；3、地理定位；4、拖放功能；5、桌面通知；6、離線和儲存；7、效能和整合；8、設備存取；9、樣式設計等。
本教學操作環境：windows7系統、HTML5版、Dell G3電腦。
html5具備的功能
#1、新的圖庫：
HTML5引進了Canvas和WebGL函數庫，可以讓網站內容變得更豐富。特別是WebGL函數庫，幾乎可以改變這一領域的整個遊戲規則，只要看看這個著名的雷神之鎚II遊戲場景的畫面，這可完全是用HTML5來開發的。對我來說，這代表了新的時代，讓人可以想像未來的遊戲是怎麼玩的。
2、更方便的多媒體內容：
如果曾經設計過需要包含許多影音內容的網站，你就會了解那種笨重的感覺。常常需要用一堆Flash加上和標記才能獲得想要的效果。但以後再也不用這麼麻煩了，HTML5引入了容易使用的 和 標記，所以要在網站上加入多媒體內容變得比以往更加容易。也因為有這樣的功能，所以很多線上影片網站已經開始轉移到HTML5了。 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中文網其他相關文章！ 相關標籤： html5 來源：php.cn 上一篇：HTML5中thead是什麼意思 下一篇：html5中新增加的屬性與元素有哪些 本網站聲明 本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn 作者最新文章 深入搞懂Redis中的哨兵 2023-04-26 17:59:18 【整理分享】7個熱門的React狀態管理工具 2023-04-26 17:47:48 一文討論Vue2中key和Vue3中key的差別 2023-04-26 17:41:42 一文聊聊Node中的記憶體控制 2023-04-26 17:37:05 實用Excel技巧分享：4種刪除重複值的小妙招！ 2023-04-26 17:31:25 實用Word技巧分享：簡繁轉換功能竟然可以這樣用！ 2023-04-26 17:27:32 如何解決跨域？常見解決方案淺析 2023-04-25 19:57:58 一文理解JavaScript中的單例模式 2023-04-25 19:53:11 深入了解Node中的Buffer 2023-04-25 19:49:11 探討如何在Vue3中撰寫單元測試 2023-04-25 19:41:54 最新問題 如何使用Javascript設定HTML5的required屬性？ 我正在嘗試在Javascript中將text輸入框標記為必需。 來自於 2023-10-13 08:52:25 0 2 317 無法取得滑鼠準確座標的問題：在調整頁面大小時使用HTML5畫布 我想從前端專家那裡創建這個像素效果。雖然我能夠在全螢幕畫布上實現整個像素效果：constcanvas=getElementById('canvas');canvas.height=... 來自於 2023-09-12 12:20:33 0 1 280 使用Base64編碼的HTML5視訊M3U8 我想在HTML5的Video標籤中加入一個base64編碼的M3U8文件，我該怎麼做 來自於 2023-09-09 23:07:18 0 1 247 vue.js / bootstrap：未呼叫 onclick 事件方法，錯誤'找不到變數：updateDocument” 我是前端開發新手，但對HTML5、CSS和Javascript有基本了解。我創建了一個vue.js專案並添加了bootstrap和axios。我的應用程式會載入數據並顯示它們。但是... 來自於 2023-09-09 20:06:48 0 1 362 XHTML中移除影像標籤中的閉合斜線'/' 我有一個儲存圖像的字串txt1。它的值是XHTML格式，即元素已關閉：。但我需要刪除該關閉斜杠，因此它可以是像HTML5中一樣。有沒有辦法做到這一點。 來自於 2023-09-06 12:15:38 0 1 240 相關專題 更多> html5動畫製作有哪些製作方法 HTML與HTML5的差別 python中float()函數的作用 edge瀏覽器相容性設定 流量分為哪幾種 parseint函數的作用 SpringBoot專案建置步驟 全角和半角切換方法 熱門推薦 什麼是URL地址 web端是什麼意思 程式語言有哪些 什麼是IT產業 error是什麼意思 熱門教學 更多> 相關教學 熱門推薦 最新課程 野秀堂HTML5+CSS3影片教學 8577 HTML5基礎精講影片教學 24122 html5基礎知識入門影片教學 63438 HTML5入門基礎影片教學 35988 HTML5新功能基礎影片教學 26910 HTML5 Canvas 動畫實戰教學 53196 html5開發實戰之百度外送手機站前端製作 58942 最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程) 1394746次學習 JAVA 初級入門影片教學 2347153次學習 小甲魚零基礎入門學習Python影片教學 493052次學習 Web前端開發極速入門 213403次學習 零基礎精通 PS 影片教學 842464次學習 【web前端】Node.js快速入門 3072次學習 國外Web開發全端課程全集 2480次學習 Go語言實戰之 GraphQL 1958次學習 550W粉絲大佬手把手從零學JavaScript 464次學習 python大神Mosh，零基礎小白6小時完全入門 10687次學習 最新下載 更多> 網站特效 網站源碼 網站素材 前端模板 [表單按鈕] jQuery企業留言表單聯絡程式碼 [播放器特效] HTML5 MP3音樂盒播放特效 [選單導航] HTML5酷炫粒子動畫導覽選單特效 [表單按鈕] jQuery可視化表單拖曳編輯程式碼 [播放器特效] VUE.JS仿酷狗音樂播放器代碼 [html5特效] 經典html5推箱子小遊戲 [圖片特效] jQuery滾動添加或減少圖片特效 [相簿特效] CSS3個人相簿封面懸停放大特效 [前端模板] 家居裝潢清潔維修服務公司網站模板 [前端模板] 清新配色個人求職履歷引導頁模板 [前端模板] 設計師創意求職履歷網頁模板 [前端模板] 現代工程建築公司網站模板 [前端模板] 教育服務機構響應式HTML5模板 [前端模板] 網上電子書店商城網站模板 [前端模板] IT技術解決互聯網公司網站模板 [前端模板] 紫色風格外匯交易服務網站模板 [PNG素材] 可愛的夏天元素向量素材(EPS+PNG) [PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG) [banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS) [PNG素材] 金色的畢業帽向量素材(EPS+PNG) [PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG) [PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG) [banner圖] 扁平風格的植樹節banner向量素材(AI+EPS) [PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG) [前端模板] 家居裝潢清潔維修服務公司網站模板 [前端模板] 清新配色個人求職履歷引導頁模板 [前端模板] 設計師創意求職履歷網頁模板 [前端模板] 現代工程建築公司網站模板 [前端模板] 教育服務機構響應式HTML5模板 [前端模板] 網上電子書店商城網站模板 [前端模板] IT技術解決互聯網公司網站模板 [前端模板] 紫色風格外匯交易服務網站模板 關於我們 免責聲明 Sitemap PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！
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。允許使用和操作電腦的攝像頭，並從中存取照片。
觸控事件。對使用者按下觸控螢幕的事件做出反應的處理程序。
使用地理位置定位。讓瀏覽器使用地理位置服務來定位使用者的位置。
偵測設備方向。讓使用者在執行瀏覽器的裝置變更方向時能夠得到資訊。這可以被用作一種輸入設備（例如製作能夠對設備位置做出反應的遊戲）或使頁面的佈局跟螢幕的方向相適應（橫向或縱向）。
9、樣式設計
新的背景樣式特性。現在可以使用 box-shadow 為邏輯框設定一個陰影，而且還可以設定 多背景。
更精美的邊框。現在不僅可以使用影像來格式化邊框，使用 border-image 和它關聯的普通屬性，而且可以透過 border-radius 屬性來支援圓角邊框。
為你的樣式設定動畫。使用 CSS Transitions 在不同的狀態之間設定動畫，或是使用 CSS Animations 在頁面的某些部分設定動畫而不需要一個觸發事件，你現在可以在頁面中控制移動元素了。
排版方面的改進。作者擁有更高的控制已達到更佳的排版。他們不但可以控制 text-overflow 和 hyphenation， 而且還可以給它設定一個 陰影 或更精細地控制它的 decorations。感謝新的 @font-face 規則，現在我們可以下載並套用自訂的字體了。 .
新的展示性佈局。為了提高設計的靈活性，已經有兩種新的佈局被添加了進來：CSS 多欄佈局, 以及 CSS 靈活方框佈局。
相關推薦：《html影片教學》
以上是html5具備什麼功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
