第1講HTML5基礎(chǔ)

1、Page 1 HTML5基礎(chǔ) Page 2 目錄 l一一 什么是什么是HTML5 l二二 HTML5新特性和那些效果新特性和那些效果 l三三 HTML5目前存在的應(yīng)用局限目前存在的應(yīng)用局限 l四四 開放討論：開放討論：HTML5適合應(yīng)用于我們哪些項目？適合應(yīng)用于我們哪些項目？ Page 3 1 HTML歷史 今天 1991年 1994年 1997年1995年 2009年 一 什么是HTML5 Page 4 2 什么是HTML5 l官方概念：HTML5草案的前身名為Web Applications 1.0，是HTML4的 更新加強(qiáng)版本。它增加了新的標(biāo)簽和屬性，強(qiáng)化了網(wǎng)頁的標(biāo)準(zhǔn)、語 義化、圖像表達(dá)

2、能力和交互效果。 l廣義概念：HTML5代表瀏覽器端技術(shù)的一個發(fā)展階段。在這個階段， 瀏覽器呈現(xiàn)技術(shù)得到了一個飛躍發(fā)展和廣泛支持，這些技術(shù)包括： HTML5，DOM3，CSS3，JS API，SVG，WebGL（3D）等 后面我們描述的HTML5就是基于廣義來講述 Page 5 l媒體支持：Video和Audio l畫布元素-Canvas以及WebGL視頻加速 l增強(qiáng)的表單Form l更炫的平面動畫-CSS3頁面渲染及 CSS3 3D l矢量支持-SVG lHTML5的圖形機(jī)制比較-SVG vs Canvas l離線應(yīng)用 l原生的拖拽 l其他HTML5特性. 二 HTML5新特性和應(yīng)用 Pag

3、e 6 媒體支持 Audio Video & WebRTC l 標(biāo)簽定義視頻，比如電影片段或其他視頻流。 l 標(biāo)簽定義聲音，比如音樂或其他音頻流。 lWebRTC（Web Real-Time Communication） 是應(yīng)用在視頻會議、實 時廣播、多方會談、點對點應(yīng)用程序等等的新的協(xié)議與 API（用 navigator.getUserMedia 啟動用戶計算機(jī)的攝影機(jī)，用 PeerConnection 進(jìn)行點對點傳輸?shù)鹊龋?Page 7 當(dāng)前應(yīng)用場景 視頻點播直播-優(yōu)酷HTML5版本視頻聊天- Google html5視頻聊天功能 Page 8 演示： 0

4、/html5/video/ Video播放視頻 0:82/html5/audio - js創(chuàng)建聲音 Audio播放聲音 應(yīng)用場景 流程圖-我司某運(yùn)營產(chǎn)品 構(gòu)建3D虛擬拓?fù)鋱D-某3D網(wǎng)管 畫布元素畫布元素CanvasCanvas以及以及WebGLWebGL視頻加速視頻加速 Page 10 Canvas API canvas ，HTML5最期待元素之一，可以通過腳本可以任意創(chuàng)建圖形， 編輯圖形，導(dǎo)入圖片，導(dǎo)出圖片。其中分2D與3D： l2D context API：基本線條、路徑、插入圖像、像素級操作、文字、 陰影、顏色漸變等提供圖形繪制功能。 l3D conte

5、xt API（WebGL）： WebGl 定義了一套API, 能夠允許在網(wǎng)頁 中使用類似于Open GL，實際上是一套基于OpenGL ES 2.0的3d圖形 API。這些API是通過HTML 5的canvas標(biāo)簽來使用的。 Page 11 演示： 構(gòu)造一個簡單的Canvas 3D物體 Canvas基本作圖API之畫板 0/html5/Canvas Painter/0/html5/webgl/cube.html Page 12 應(yīng)用場景 配置頁面-增加配置的流暢性和容錯性 注冊-增加注冊的流暢性和無障礙瀏覽 http:/10.

6、138.51.50/html5/form2.0/demo1.html 增強(qiáng)的表單增強(qiáng)的表單FormForm Page 13 新的Form元素 HTML5的表單定義了十幾個新的元素和特性，這些新增元素可以代 碼更為易用、簡潔和高效。這些新的東西包括： 1 新元素：新元素：Email、Number、Range，color picker等 2 新屬性：新屬性：placeholder、pattern、required、autofocus 、multiple等特 性 3 新樣式新樣式：新的偽類樣式，比如:focus,:required,:valid等 4 新的輸入方式-語音輸入： x-webkit-sp

7、eech可以讓標(biāo)簽接受語音并轉(zhuǎn) 化為數(shù)字 Page 14 演示：新特性全集 0/html5/form2.0/all.html Page 15 應(yīng)用場景 通訊錄管理-圖片墻首頁portal 更豐富的樣式支持更豐富的樣式支持- CSS3- CSS3 CSS3新特性 l選擇器 lRGBA和透明度 l多欄布局：彈性布局（水平布局、垂直布局） l多背景圖 lWord Wrap l文字陰影 lfont-face屬性 l盒陰影：陰影，文本陰影 l盒模型：，多背景，圓角(邊框半徑)，邊框圖片 l2D：旋轉(zhuǎn)，縮放，傾斜，請參考：CSS基礎(chǔ)變換 l3D：透視，transform

8、3D，等等 l媒體查詢 l語音 Page 17 演示 0/html5/css3Explorer.html CSS3 Explorer.html Page 18 演示：CSS3 2D 0/html5/bigbigwolf.html 灰太狼 演示：CSS3 3D Google 3D box 0/html5/Morphing power cuber/ 0/html5/google 3d box 旋轉(zhuǎn)的立方體 Page 20 應(yīng)用場景 矢量地圖-某產(chǎn)品 構(gòu)建多樣的矢量

9、圖形-SmartUE圖表項目 0SVGchinaMap.svg0/SmartUEV2 SVG SVG 矢量圖形矢量圖形 Page 21 SVG lSVG（Scalable Vector Graphics）：可縮放矢量圖形，使用：可縮放矢量圖形，使用 XML 來描來描 述二維圖形和繪圖程序的語言?？梢栽跒g覽器中構(gòu)造述二維圖形和繪圖程序的語言?？梢栽跒g覽器中構(gòu)造 矩形、圓形、矩形、圓形、 橢圓、線條、多邊形、折線、路徑、濾鏡效果、漸變效果，和動畫橢圓、線條、多邊形、折線、路徑、濾鏡效果、漸變效果，和動畫 等等 Page 22 演示

10、： 簡單的圖形元素 0/SVG/rect2.svg 復(fù)合圖表 0/SmartUEV2/UI/api/complexChart.html Page 23 相同點 l均是均是HTML5規(guī)范的一部分規(guī)范的一部分 l均能實現(xiàn)圖形和動畫均能實現(xiàn)圖形和動畫 l均可以通過腳本編程控制顯示均可以通過腳本編程控制顯示 HTML5HTML5的圖形機(jī)制比較的圖形機(jī)制比較: : SVG VS CanvasSVG VS Canvas Page 24 不同點 SVGCanvas DOM 是！非！最大的區(qū)別！ Everything is pixel 是否矢

11、量 矢量，放大不失真像素操作，放大失真 圖形內(nèi)存模式 保留模式即發(fā)即棄。直接向它的位圖呈現(xiàn)它的圖形， 然后對所繪制的形狀沒有任何認(rèn)知，只會 得到最終的位圖。 基本圖形種類 豐富（線，圓，矩形，多邊形，路徑等）除了矩形，只有路徑 原生動畫支持 支持不支持。需要js去模擬，即刷屏 3D 不支持支持 交互 支持Dom事件只能用js根據(jù)坐標(biāo)進(jìn)行編程 可訪問性 好。Xml結(jié)構(gòu)易于分析差。程序無法感知內(nèi)容，除非圖像識別或 專門做canvas內(nèi)容映射 最終實現(xiàn)的代碼特征 Svg標(biāo)簽+css，少量依賴js基本上是完全依賴js Page 25 小結(jié) 互有所長，均適用不同應(yīng)用場景：互有所長，均適用不同應(yīng)用場景：

12、lSVG更適合規(guī)則圖形的繪制和動畫，更好管理。 典型場景：圖表，流程圖等高保真度矢量文檔。 lCanvas更適合不規(guī)則或涉及像素級的變化場景，更高效。 典型場景：圖片編輯和圖形數(shù)據(jù)分析，位圖動畫，2D游戲，3D虛擬 空間等像素操作。 Page 26 應(yīng)用場景 頻道緩存，海報緩存，減低服務(wù)器負(fù)載，提升用戶開機(jī)體驗 -IPTV Webkit 機(jī)頂盒 離線保存桌面和通訊錄數(shù)據(jù)，定時和服務(wù)器同步 -UC web版 離線應(yīng)用離線應(yīng)用 Page 27 離線應(yīng)用：讓網(wǎng)絡(luò)應(yīng)用變?yōu)樽烂鎽?yīng)用 離線存儲使得你的離線存儲使得你的web應(yīng)用可以在用戶離線的狀況下進(jìn)行訪問。離線應(yīng)用可以在用戶離線的狀況下進(jìn)行訪問。離線 存

13、儲的兩個特性：存儲的兩個特性： l1 離線資源緩存 l2 本地數(shù)據(jù)存儲 local storage 離線存儲技術(shù)技術(shù)顯然至少有三個好處：離線存儲技術(shù)技術(shù)顯然至少有三個好處： l1 最直接的好處就是用戶可以離線訪問你的web應(yīng)用 l2 因為文件被緩存在本地使得web頁面加載速度提升許多 l3 離線應(yīng)用只加載被修改過的資源，因此大大降低了用戶請求對服 務(wù)器造成的負(fù)載壓力 Page 28 演示 0:82/SmartUEV2/ (使用chrome15+觀看) 如何離線存儲資源如何使用local storage 存儲數(shù)據(jù) 0/html5

14、/localstorage/localStorage.html Page 29 應(yīng)用場景 拖放文件實現(xiàn)上傳和預(yù)覽 拖拽操作頁面上的UI組件和數(shù)據(jù) 拖拽拖拽 Page 30 Drag&Drop簡介 HTML5為元素新增了用于拖拽的屬性draggable，這個屬性決定了元 素是否能被拖拽，或只能選擇元素的文本。同時HTML5使用 dataTransfer接口用來支持拖拽數(shù)據(jù)存儲。三個重要特性： ldraggable 屬性：就是標(biāo)簽元素要設(shè)置draggable=true，否則不會有 效果，例如：列表1 lDataTransfer 對象：退拽對象用來傳遞的媒介，使用一般為 Event.dataTran

15、sfer。 lDrag事件：ondragstart 、ondragenter、ondragover、ondrop 、 ondragend Page 31 演示 如何實現(xiàn)本地文件拖拽至網(wǎng)頁 網(wǎng)頁內(nèi)拖拽事件演示 0/html5/dragdrop/list.htm0/html5/dragdrop/imageview.html 其他其他HTML5特性特性 Page 33 lfont-face使網(wǎng)頁自由引入新的字體 0/html5/font/fontFace.html l頁面預(yù)渲染及可見性 rel=“prerender”，提升 頁面打開速度 l。 更多觀看： http:/ 5.html web workers：不影響用戶主要任務(wù)的情況下， 瀏覽器運(yùn)行多個后臺運(yùn)行程序 Web Sockets：Web和服務(wù)器