HTML5基礎培訓

1、HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #1HTML5基礎培訓HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #2目錄l一一 什么是什么是HTML5l二二 HTML5新特性和那些效果新特性和那些效果l三三 HTML5目前存在的應用局限目前存在的應用局限l四四 開放討論：開放討論：HTML5適合應用于我們哪些項目？適合應用于我們哪些項目？一 什么是HTML5HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #41

2、 HTML歷史今天1991年1994年1997年1995年2009年HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #52 什么是HTML5l官方概念：HTML5草案的前身名為Web Applications 1.0，是HTML4的更新加強版本。它增加了新的標簽和屬性，強化了網(wǎng)頁的標準、語義化、圖像表達能力和交互效果。l廣義概念：HTML5代表瀏覽器端技術的一個發(fā)展階段。在這個階段，瀏覽器呈現(xiàn)技術得到了一個飛躍發(fā)展和廣泛支持，這些技術包括：HTML5，DOM3，CSS3，JS API，SVG，WebGL（3D）等后面我們描述的HTML

3、5就是基于廣義來講述二 HTML5新特性和應用HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #7HTML5新特性（順序待調(diào)整）l媒體支持：Video和Audiol畫布元素-Canvas以及WebGL視頻加速l增強的表單Forml更炫的平面動畫-CSS3頁面渲染及 CSS3 3Dl矢量支持-SVGlHTML5的圖形機制比較-SVG vs Canvasl離線應用l原生的拖拽l其他HTML5特性.媒體支持Video/Audio/webRTCHUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential P

4、age #9當前應用場景視頻點播直播-優(yōu)酷HTML5版本視頻聊天- Google html5視頻聊天功能HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #10Audio Video & WebRTCl 標簽定義視頻，比如電影片段或其他視頻流。l 標簽定義聲音，比如音樂或其他音頻流。lWebRTC（Web Real-Time Communication） 是應用在視頻會議、實時廣播、多方會談、點對點應用程序等等的新的協(xié)議與 API（用 navigator.getUserMedia 啟動用戶計算機的攝影機，用 PeerConnec

5、tion 進行點對點傳輸?shù)鹊龋〩UAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #11演示：0/html5/video/Video播放視頻0:82/html5/audio - js創(chuàng)建聲音Audio播放聲音畫布元素-Canvas以及WebGL視頻加速HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 應用場景流程圖-我司某運營產(chǎn)品構(gòu)建3D虛擬拓撲圖-某3D網(wǎng)管HUAWEI TECHNOLOGIES CO., LTD.Huaw

6、ei Confidential Page #14Canvas APIcanvas ，HTML5最期待元素之一，可以通過腳本可以任意創(chuàng)建圖形，編輯圖形，導入圖片，導出圖片。其中分2D與3D：l2D context API：基本線條、路徑、插入圖像、像素級操作、文字、陰影、顏色漸變等提供圖形繪制功能。l3D context API（WebGL）： WebGl 定義了一套API, 能夠允許在網(wǎng)頁中使用類似于Open GL，實際上是一套基于OpenGL ES 2.0的3d圖形API。這些API是通過HTML 5的canvas標簽來使用的。HUAWEI TECHNOLOGIES CO., LTD.Hua

7、wei Confidential Page #15演示：構(gòu)造一個簡單的Canvas 3D物體Canvas基本作圖API之畫板0/html5/Canvas Painter/0/html5/webgl/cube.html增強的表單FormHUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #17應用場景配置頁面-增加配置的流暢性和容錯性注冊-增加注冊的流暢性和無障礙瀏覽0/html5/form2.0/demo1.htmlHUAWEI TECH

8、NOLOGIES CO., LTD.Huawei Confidential Page #18新的Form元素HTML5的表單定義了十幾個新的元素和特性，這些新增元素可以代碼更為易用、簡潔和高效。這些新的東西包括：1 新元素：新元素：Email、Number、Range，color picker等2 新屬性：新屬性：placeholder、pattern、required、autofocus 、multiple等特性3 新樣式新樣式：新的偽類樣式，比如:focus,:required,:valid等4 新的輸入方式-語音輸入： x-webkit-speech可以讓標簽接受語音并轉(zhuǎn)化為數(shù)字HUAW

9、EI TECHNOLOGIES CO., LTD.Huawei Confidential Page #19演示：新特性全集0/html5/form2.0/all.html更豐富的樣式支持- CSS3HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #21應用場景通訊錄管理-圖片墻首頁portalHUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential CSS3新特性l選擇器lRGBA和透明度l多欄布局：彈性布局（水平布局、垂直布局）l多背景圖lWord Wrapl

10、文字陰影l(fā)font-face屬性l盒陰影：陰影，文本陰影l(fā)盒模型：，多背景，圓角(邊框半徑)，邊框圖片l2D：旋轉(zhuǎn)，縮放，傾斜，請參考：CSS基礎變換l3D：透視，transform 3D，等等l媒體查詢l語音HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #23演示0/html5/css3Explorer.htmlCSS3 Explorer.htmlHUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #24演示：CSS3 2Dhttp:/10.

11、138.51.50/html5/bigbigwolf.html灰太狼 華為Logo0/html5/huaweilogoHUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示：CSS3 3D Google 3D box0/html5/Morphing power cuber/0/html5/google 3d box旋轉(zhuǎn)的立方體SVG 矢量圖形HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page

12、 #27應用場景矢量地圖-某產(chǎn)品構(gòu)建多樣的矢量圖形-SmartUE圖表項目0SVGchinaMap.svg0/SmartUEV2HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #28SVGlSVG（Scalable Vector Graphics）：可縮放矢量圖形，使用）：可縮放矢量圖形，使用 XML 來描來描述二維圖形和繪圖程序的語言?？梢栽跒g覽器中構(gòu)造述二維圖形和繪圖程序的語言?？梢栽跒g覽器中構(gòu)造 矩形、圓形、矩形、圓形、橢圓、線條、多邊形、折線、路徑、濾鏡效果、

13、漸變效果，和動畫橢圓、線條、多邊形、折線、路徑、濾鏡效果、漸變效果，和動畫等等HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #29演示：簡單的圖形元素0/SVG/rect2.svg復合圖表0/SmartUEV2/UI/api/complexChart.htmlHTML5的圖形機制比較:SVG VS CanvasHUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #31相同點l均是均是HTML5規(guī)范的一部分規(guī)范的

14、一部分l均能實現(xiàn)圖形和動畫均能實現(xiàn)圖形和動畫l均可以通過腳本編程控制顯示均可以通過腳本編程控制顯示HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #32不同點SVGCanvasDOM是！非！最大的區(qū)別！Everything is pixel是否矢量矢量，放大不失真像素操作，放大失真圖圖形內(nèi)存模式形內(nèi)存模式保留模式即發(fā)即棄。直接向它的位圖呈現(xiàn)它的圖形，然后對所繪制的形狀沒有任何認知，只會得到最終的位圖?；緢D形種類豐富（線，圓，矩形，多邊形，路徑等）除了矩形，只有路徑原生動畫支持支持不支持。需要js去模擬，即刷屏3D不支持支持交互交互支

15、持Dom事件只能用js根據(jù)坐標進行編程可可訪問訪問性性好。Xml結(jié)構(gòu)易于分析差。程序無法感知內(nèi)容，除非圖像識別或?qū)ｉT做canvas內(nèi)容映射最最終實現(xiàn)終實現(xiàn)的代的代碼碼特征特征Svg標簽+css，少量依賴js基本上是完全依賴jsHUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #33小結(jié)互有所長，均適用不同應用場景：互有所長，均適用不同應用場景：lSVG更適合規(guī)則圖形的繪制和動畫，更好管理。典型場景：圖表，流程圖等高保真度矢量文檔。lCanvas更適合不規(guī)則或涉及像素級的變化場景，更高效。典型場景：圖片編輯和圖形數(shù)據(jù)分析，位圖動畫，2D游

16、戲，3D虛擬空間等像素操作。離線應用HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #35應用場景頻道緩存，海報緩存，減低服務器負載，提升用戶開機體驗-IPTV Webkit 機頂盒離線保存桌面和通訊錄數(shù)據(jù)，定時和服務器同步-UC web版HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #36離線應用：讓網(wǎng)絡應用變?yōu)樽烂鎽秒x線存儲使得你的離線存儲使得你的web應用可以在用戶離線的狀況下進行訪問。離線應用可以在用戶離線的狀況下進行訪問。離線存儲的兩個特性：存儲的兩個特性：l1

17、 離線資源緩存l2 本地數(shù)據(jù)存儲 local storage離線存儲技術技術顯然至少有三個好處：離線存儲技術技術顯然至少有三個好處：l1 最直接的好處就是用戶可以離線訪問你的web應用l2 因為文件被緩存在本地使得web頁面加載速度提升許多l(xiāng)3 離線應用只加載被修改過的資源，因此大大降低了用戶請求對服務器造成的負載壓力HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #37演示0:82/SmartUEV2/ (使用chrome15+觀看)如何離線存儲資源如何使用local storage 存儲數(shù)據(jù)htt

18、p:/0/html5/localstorage/localStorage.html拖拽HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #39應用場景拖放文件實現(xiàn)上傳和預覽拖拽操作頁面上的UI組件和數(shù)據(jù)HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #40Drag&Drop簡介HTML5為元素新增了用于拖拽的屬性draggable，這個屬性決定了元素是否能被拖拽，或只能選擇元素的文本。同時HTML5使用dataTransfer接口用來支持拖拽數(shù)據(jù)存

19、儲。三個重要特性：ldraggable 屬性：就是標簽元素要設置draggable=true，否則不會有效果，例如：列表1lDataTransfer 對象：退拽對象用來傳遞的媒介，使用一般為Event.dataTransfer。lDrag事件：ondragstart 、ondragenter、ondragover、ondrop 、ondragend HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #41演示如何實現(xiàn)本地文件拖拽至網(wǎng)頁網(wǎng)頁內(nèi)拖拽事件演示0/html5/dragdrop/list.htm0/html5/dragdrop/imagevi