HTML5基礎(chǔ)培訓(xùn)

1、HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #1HTML5基礎(chǔ)培訓(xùn)HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #2目錄l一一 什么是什么是HTML5l二二 HTML5新特性和那些效果新特性和那些效果l三三 HTML5目前存在的應(yīng)用局限目前存在的應(yīng)用局限l四四 開(kāi)放討論：開(kāi)放討論：HTML5適合應(yīng)用于我們哪些項(xiàng)目？適合應(yīng)用于我們哪些項(xiàng)目？一 什么是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的更新加強(qiáng)版本。它增加了新的標(biāo)簽和屬性，強(qiáng)化了網(wǎng)頁(yè)的標(biāo)準(zhǔn)、語(yǔ)義化、圖像表達(dá)能力和交互效果。l廣義概念：HTML5代表瀏覽器端技術(shù)的一個(gè)發(fā)展階段。在這個(gè)階段，瀏覽器呈現(xiàn)技術(shù)得到了一個(gè)飛躍發(fā)展和廣泛支持，這些技術(shù)包括：HTML5，DOM3，CSS3，JS API，SVG，WebGL（3D）等后面我們描述的HTML

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

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

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

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

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

8、NOLOGIES CO., LTD.Huawei Confidential Page #18新的Form元素HTML5的表單定義了十幾個(gè)新的元素和特性，這些新增元素可以代碼更為易用、簡(jiǎn)潔和高效。這些新的東西包括：1 新元素：新元素：Email、Number、Range，color picker等2 新屬性：新屬性：placeholder、pattern、required、autofocus 、multiple等特性3 新樣式新樣式：新的偽類樣式，比如:focus,:required,:valid等4 新的輸入方式-語(yǔ)音輸入： x-webkit-speech可以讓標(biāo)簽接受語(yǔ)音并轉(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應(yīng)用場(chǎng)景通訊錄管理-圖片墻首頁(yè)portalHUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential CSS3新特性l選擇器lRGBA和透明度l多欄布局：彈性布局（水平布局、垂直布局）l多背景圖lWord Wrapl

10、文字陰影l(fā)font-face屬性l盒陰影：陰影，文本陰影l(fā)盒模型：，多背景，圓角(邊框半徑)，邊框圖片l2D：旋轉(zhuǎn)，縮放，傾斜，請(qǐng)參考：CSS基礎(chǔ)變換l3D：透視，transform 3D，等等l媒體查詢l語(yǔ)音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灰太狼 華為L(zhǎng)ogo0/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應(yīng)用場(chǎng)景矢量地圖-某產(chǎn)品構(gòu)建多樣的矢量圖形-SmartUE圖表項(xiàng)目0SVGchinaMap.svg0/SmartUEV2HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #28SVGlSVG（Scalable Vector Graphics）：可縮放矢量圖形，使用）：可縮放矢量圖形，使用 XML 來(lái)描來(lái)描述二維圖形和繪圖程序的語(yǔ)言?？梢栽跒g覽器中構(gòu)造述二維圖形和繪圖程序的語(yǔ)言?？梢栽跒g覽器中構(gòu)造 矩形、圓形、矩形、圓形、橢圓、線條、多邊形、折線、路徑、濾鏡效果、

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

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

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

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

17、 離線資源緩存l2 本地?cái)?shù)據(jù)存儲(chǔ) local storage離線存儲(chǔ)技術(shù)技術(shù)顯然至少有三個(gè)好處：離線存儲(chǔ)技術(shù)技術(shù)顯然至少有三個(gè)好處：l1 最直接的好處就是用戶可以離線訪問(wèn)你的web應(yīng)用l2 因?yàn)槲募痪彺嬖诒镜厥沟脀eb頁(yè)面加載速度提升許多l(xiāng)3 離線應(yīng)用只加載被修改過(guò)的資源，因此大大降低了用戶請(qǐng)求對(duì)服務(wù)器造成的負(fù)載壓力HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Page #37演示0:82/SmartUEV2/ (使用chrome15+觀看)如何離線存儲(chǔ)資源如何使用local storage 存儲(chǔ)數(shù)據(jù)htt

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

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