這是html5教程ppt（部分ppt內(nèi)容已做更新升級(jí)），包括了什么是HTML5，HTML5新特性和那些效果，HTML5瀏覽器支持情況，HTML5移動(dòng)開(kāi)發(fā)框架介紹，HTML5目前存在的應(yīng)用局限等內(nèi)容，歡迎點(diǎn)擊下載。

html5教程ppt是由紅軟PPT免費(fèi)下載網(wǎng)推薦的一款培訓(xùn)教程PPT類(lèi)型的PowerPoint.

介紹目錄什么是HTML5？ HTML5時(shí)間表 HTML5的八大新特性語(yǔ)義語(yǔ)義化的標(biāo)簽增強(qiáng)的表單控件離線(xiàn)存儲(chǔ) Web 存儲(chǔ) (Web Storage) HTML5 提供了兩種在客戶(hù)端存儲(chǔ)數(shù)據(jù)的新方法： localStorage - 用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期。 sessionStorage - 用于存儲(chǔ)一個(gè)會(huì)話(huà)（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話(huà)中的頁(yè)面才能訪(fǎng)問(wèn)，當(dāng)會(huì)話(huà)結(jié)束后數(shù)據(jù)也隨之銷(xiāo)毀。 以前，這些都是由 Cookie 完成的。但是 Cookie 有4KB的大小限制，而且會(huì)隨HTTP請(qǐng)求一起被傳遞，無(wú)形中拖慢網(wǎng)頁(yè)速度而且效率不高。 Web SQL DataBase 對(duì)于存儲(chǔ)少量的數(shù)據(jù)，Web Storage能夠很好的完成任務(wù)，但是對(duì)大量的結(jié)構(gòu)化數(shù)據(jù)進(jìn)行處理時(shí)，它就力所不及了，而這正是DB的應(yīng)用所在。  DB嚴(yán)格遵循W3C的同源策略，每個(gè)源都擁有獨(dú)立的存儲(chǔ)空間，每個(gè)存儲(chǔ)空間內(nèi)又可以創(chuàng)建多個(gè)數(shù)據(jù)庫(kù)，每個(gè)數(shù)據(jù)庫(kù)可以包含多個(gè)表，每個(gè)表都是一個(gè)json對(duì)象列表，可以存儲(chǔ)多個(gè)json對(duì)象，比如{"name": "sonic"， "age": 27}。 核心方法： 1. openDatabase(""，""，""，""，function(t){})//創(chuàng)建數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)名，版本號(hào)，描述，大小(b)，匿名函數(shù)(可省略) 2. transaction(function(tx){})//執(zhí)行查詢(xún)，匿名函數(shù)，tx，事物類(lèi)型，負(fù)責(zé)實(shí)際的查詢(xún)。 3. executeSql(""，[]，function(tx，result){}，function(tx，error){})//真正執(zhí)行查詢(xún)，sql語(yǔ)句，參數(shù)，成功函數(shù)(事物參數(shù)，結(jié)果集)，失敗函數(shù)(事物參數(shù)，結(jié)果集) Demo var db = openDatabase(' DBName '，'1.0'，'test database'，5*1024*1024); //5MB If(db) { db.transaction(function(tx){ tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT，msg TEXT，time INTEGER)'，[]); }) db.transaction(function(tx){ tx.executeSql('SELECT * FROM MsgData'，[]，function(tx，result){ for(var i=0; i < result.rows.length; i++){ showData(result.rows.item(i)); } }); }) db.transaction(function(tx){ tx.executeSql('INSERT INTO MsgData VALUES(?，?，?)'， [name，msg，time]， function(tx，result) { }，function(tx，error){ result.innerHTML= error.source + ':' + error.message; }) }) db.transaction(function(tx){ tx.executeSql('DROP TABLE MsgData'，[]); }) } Application Cache 使用Application Cache，你可以指定哪一個(gè)文件是瀏覽器緩存保留的并提供給用戶(hù)離線(xiàn)使用的。這時(shí)候你的網(wǎng)站工作起來(lái)就像是線(xiàn)上一樣，并且他們不會(huì)感覺(jué)到和真正在線(xiàn)使用有任何差異。那么，哪一部分文件是瀏覽器要保存的呢？這一切都定義在緩存清單文件中。設(shè)備通用拖拽與拖放 (Drag & Drop) 與 文件處理 (File API) 過(guò)去我們想實(shí)現(xiàn)網(wǎng)頁(yè)中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的鼠標(biāo)事件監(jiān)聽(tīng)來(lái)模擬拖拽效果，為了實(shí)現(xiàn)實(shí)時(shí)的拖拽移動(dòng)效果，還要不停地獲取鼠標(biāo)的坐標(biāo)，不停的修改元素的位置，代碼要堆很多，而且性能也很差，現(xiàn)在有了HTML5原生的Drag & Drop 拖拽事件，再結(jié)合FileAPI 中的 FileReader，一切變得so easy~ 連接桌面通知 (Notifications) 通過(guò)桌面通知系統(tǒng)，網(wǎng)站可以在用戶(hù)桌面彈出一條通知，無(wú)論用戶(hù)是否瀏覽當(dāng)前網(wǎng)頁(yè)，甚至最小化了瀏覽器，通知均可到達(dá)用戶(hù)桌面。多媒體音頻和視頻 (Audio + Video) Audio和Video是首批添加到HTML規(guī)范中的標(biāo)簽。它們的加入使得我們可以像插入圖片一樣來(lái)處理音頻及視頻文件。三維、圖形與特效 Canvas 畫(huà)布元素傳統(tǒng)的網(wǎng)頁(yè)，總是使用GIF或者JPEG來(lái)顯示圖像，這種圖形是需要事先畫(huà)好的“靜態(tài)”的圖像。而Canvas，則是用Javascript的一種繪圖手段�？梢杂盟鼇�(lái)畫(huà)圖、合成圖象、或做簡(jiǎn)單的(和不那么簡(jiǎn)單的)動(dòng)畫(huà)。 SVG 矢量圖形 SVG（Scalable Vector Graphics）：可縮放矢量圖形，使用 XML 來(lái)描述二維圖形和繪圖程序的語(yǔ)言�？梢栽跒g覽器中構(gòu)造 矩形、圓形、橢圓、線(xiàn)條、多邊形、折線(xiàn)、路徑、濾鏡效果、漸變效果，和動(dòng)畫(huà)等。 CSS3 CSS選擇器 (CSS Selector) 顏色 (Color) 分欄 (Columns) 邊框 (Border)與文本 (Text) 漸變 (Gradients) 變形 (Transforms) 瀏覽器支持情況移動(dòng)開(kāi)發(fā)框架 Mobile Web框架比較 1、jQTouch    jQTouch 是一個(gè) jQuery 的插件，主要用于手機(jī)上的 Webkit 瀏覽器上實(shí)現(xiàn)一些包括動(dòng)畫(huà)、列表導(dǎo)航、默認(rèn)應(yīng)用樣式等各種常見(jiàn)UI效果的 JavaScript 庫(kù)。支持包括 iPhone、Android 等手機(jī)。演示：http://jqtjs.com/preview/demos/main/#home 2、 jQuery Mobile    jQuery Mobile 是 jQuery 在手機(jī)上和平板設(shè)備上的版本。jQuery Mobile跟jQTouch相比很相似，但是更加標(biāo)準(zhǔn)，更有適應(yīng)性，對(duì)用戶(hù)接口和style的支持范圍更加寬廣了。jQuery Mobile 不僅會(huì)給主流移動(dòng)平臺(tái)帶來(lái)jQuery核心庫(kù)，而且會(huì)發(fā)布一個(gè)完整統(tǒng)一的jQuery移動(dòng)UI框架，支持全球主流的移動(dòng)平臺(tái)。演示： http://jquerymobile.com/   3、Sencha Touch   這是個(gè)與Ext JS框架完全不同的產(chǎn)物，可以快速的開(kāi)發(fā)出運(yùn)行于移動(dòng)終端的應(yīng)用程序。使用Sencha與jQTouch/jQuery相比，雖然app很明顯地不那么輕量級(jí)，但是其性能和可靠性方面明顯提高了，不過(guò)其初始化加載時(shí)間略慢。全面兼容 Android 和 Apple iOS 設(shè)備。它擁有大量的用戶(hù)接口組件，直接的iPad支持，擁有JSON和HTML5線(xiàn)下存儲(chǔ)技術(shù)使得存儲(chǔ)和數(shù)據(jù)綁定更加方便。資料：http://www.cnblogs.com/mlzs/ http://www.sencha.com/products/touch/ http://docs.sencha.com/touch/2.2.1/ 開(kāi)發(fā)工具：Sencha Architect   4、 PhoneGap   PhoneGap是一個(gè)用基于HTML，CSS和JavaScript的，創(chuàng)建移動(dòng)跨平臺(tái)移動(dòng)應(yīng)用程序的快速開(kāi)發(fā)平臺(tái)。它使開(kāi)發(fā)者能夠利用iPhone，Android，Palm，Symbian，WP7，Bada和Blackberry智能手機(jī)的核心功能——包括地理定位，加速器，聯(lián)系人，聲音和振動(dòng)等，此外PhoneGap擁有豐富的插件，可以以此擴(kuò)展無(wú)限的功能。 PhoneGap是免費(fèi)的，但是它需要特定平臺(tái)提供的附加軟件，例如iPhone的iPhone SDK，Android的Android SDK等，也可以和DW5.5配套開(kāi)發(fā)。使用PhoneGap只比為每個(gè)平臺(tái)分別建立應(yīng)用程序好一點(diǎn)點(diǎn)，因?yàn)殡m然基本代碼是一樣的，但是你仍然需要為每個(gè)平臺(tái)分別編譯應(yīng)用程序。 HTML5 PhoneGap PhoneGap 功能特點(diǎn) 1、兼容性。 2、標(biāo)準(zhǔn)化。PhoneGap用W3C標(biāo)準(zhǔn)，特別標(biāo)準(zhǔn)，Web App直接一字不改就能運(yùn)行。尤其是和JQ Mobile結(jié)合在一起使用，實(shí)在是威力無(wú)窮��！ 當(dāng)然目前PhoneGap缺陷還是蠻多的，比如運(yùn)行速度慢，UI反應(yīng)延時(shí)——這是個(gè)致命傷。不過(guò)嘛，這種問(wèn)題是會(huì)隨著技術(shù)的進(jìn)步而消失的。它的優(yōu)勢(shì)是無(wú)以倫比的：開(kāi)發(fā)成本低——筆者個(gè)人估計(jì)，至多是Native App的五分之一吧。當(dāng)然，Native App永遠(yuǎn)會(huì)有一席之地，比如高端游戲。 PhoneGap作為HTML5的一個(gè)跨平臺(tái)框架，發(fā)展前景很大。 HTML5目前的局限各瀏覽器支持程度不同。如目前支持較好的有 FIREFOX ，Chrome，IE8 國(guó)內(nèi)存在高比例舊款瀏覽器兼容性不同，如視頻格式開(kāi)發(fā)工具不健全規(guī)范未正式發(fā)布瀏覽器效率未到達(dá)理想 THANK YOUZVy紅軟基地

ppt轉(zhuǎn)換html5：這是ppt轉(zhuǎn)換html5，包括了HTML5介紹，HTML5定義頁(yè)面結(jié)構(gòu)，HTML5增強(qiáng)的表單控件，多媒體，畫(huà)布、SVG、拖放等內(nèi)容，歡迎點(diǎn)擊下載。

html5 ppt開(kāi)發(fā)：這是html5 ppt開(kāi)發(fā)，包括了什么是HTML5，HTML5新特性和那些效果，HTML5瀏覽器支持情況，HTML5移動(dòng)開(kāi)發(fā)框架介紹，HTML5目前存在的應(yīng)用局限等內(nèi)容，歡迎點(diǎn)擊下載。

html5介紹ppt：這是html5介紹ppt，包括了什么是HTML5，HTML5新特性和那些效果，HTML5瀏覽器支持情況，HTML5移動(dòng)開(kāi)發(fā)框架介紹，HTML5目前存在的應(yīng)用局限等內(nèi)容，歡迎點(diǎn)擊下載。