HTML5培訓(xùn)ppt課件

1、HTML5根底培訓(xùn)目錄一 什么是HTML5二 HTML5新特性和那些效果三 HTML5目前存在的運(yùn)用局限四 開(kāi)放討論：HTML5合順運(yùn)用于我們哪些工程？一 什么是HTML51 HTML歷史今天1991年1994年1997年1995年2021年2 什么是HTML5官方概念：HTML5草案的前身名為Web Applications 1.0，是HTML4的更新加強(qiáng)版本。它添加了新的標(biāo)簽和屬性，強(qiáng)化了網(wǎng)頁(yè)的規(guī)范、語(yǔ)義化、圖像表達(dá)才干和交互效果。廣義概念：HTML5代表閱讀器端技術(shù)的一個(gè)開(kāi)展階段。在這個(gè)階段，閱讀器呈現(xiàn)技術(shù)得到了一個(gè)飛躍開(kāi)展和廣泛支持，這些技術(shù)包括：HTML5，DOM3，CSS3，JS

2、API，SVG，WebGL3D等后面我們描畫(huà)的HTML5就是基于廣義來(lái)講述二 HTML5新特性和運(yùn)用HTML5新特性順序待調(diào)整媒體支持：Video和Audio畫(huà)布元素-Canvas以及WebGL視頻加速加強(qiáng)的表單Form更炫的平面動(dòng)畫(huà)-CSS3頁(yè)面渲染及 CSS3 3D矢量支持-SVGHTML5的圖形機(jī)制比較-SVG vs Canvas離線(xiàn)運(yùn)用原生的拖拽其他HTML5特性.媒體支持Video/Audio/webRTC當(dāng)前運(yùn)用場(chǎng)景視頻點(diǎn)播直播-優(yōu)酷HTML5版本視頻聊天- Google html5視頻聊天功能Audio Video & WebRTC 標(biāo)簽定義視頻，比如電影片段或其他視頻流。 標(biāo)簽

3、定義聲音，比如音樂(lè)或其他音頻流。WebRTCWeb Real-Time Communication 是運(yùn)用在視頻會(huì)議、實(shí)時(shí)廣播、多方談判、點(diǎn)對(duì)點(diǎn)運(yùn)用程序等等的新的協(xié)議與 API用 navigator.getUserMedia 啟動(dòng)用戶(hù)計(jì)算機(jī)的攝影機(jī)，用 PeerConnection 進(jìn)展點(diǎn)對(duì)點(diǎn)傳輸?shù)鹊妊菔荆?0.51.50/html5/video/Video播放視頻10.51.50:82/html5/audio - js創(chuàng)建聲音Audio播放聲音畫(huà)布元素-Canvas以及WebGL視頻加速運(yùn)用場(chǎng)景流程圖-我司某運(yùn)營(yíng)產(chǎn)品構(gòu)建3D虛擬拓?fù)鋱D-某3D網(wǎng)管Canvas APIcanvas ，HTML5

4、最等待元素之一，可以經(jīng)過(guò)腳本可以恣意創(chuàng)建圖形，編輯圖形，導(dǎo)入圖片，導(dǎo)出圖片。其中分2D與3D：2D context API：根本線(xiàn)條、途徑、插入圖像、像素級(jí)操作、文字、陰影、顏色漸變等提供圖形繪制功能。3D context APIWebGL： WebGl 定義了一套API, 可以允許在網(wǎng)頁(yè)中運(yùn)用類(lèi)似于Open GL，實(shí)踐上是一套基于OpenGL ES 2.0的3d圖形API。這些API是經(jīng)過(guò)HTML 5的canvas標(biāo)簽來(lái)運(yùn)用的。演示：構(gòu)造一個(gè)簡(jiǎn)單的Canvas 3D物體Canvas根本作圖API之畫(huà)板10.51.50/html5/Canvas Painter/10.51.50/html5/w

5、ebgl/cube.html加強(qiáng)的表單Form運(yùn)用場(chǎng)景配置頁(yè)面-添加配置的流暢性和容錯(cuò)性注冊(cè)-添加注冊(cè)的流暢性和無(wú)妨礙閱讀10.51.50/html5/form2.0/demo1.html新的Form元素HTML5的表單定義了十幾個(gè)新的元素和特性，這些新增元素可以代碼更為易用、簡(jiǎn)約和高效。這些新的東西包括：1 新元素：、Number、Range，color picker等2 新屬性：placeholder、pattern、required、autofocus 、multiple等特性3 新款式：新的偽類(lèi)款式，比如:focus,:required,:valid等4 新的輸入方式-語(yǔ)音輸入： x-

6、webkit-speech可以讓標(biāo)簽接受語(yǔ)音并轉(zhuǎn)化為數(shù)字演示：新特性選集10.51.50/html5/form2.0/all.html更豐富的款式支持- CSS3運(yùn)用場(chǎng)景通訊錄管理-圖片墻首頁(yè)portalCSS3新特性選擇器RGBA和透明度多欄規(guī)劃：彈性規(guī)劃程度規(guī)劃、垂直規(guī)劃多背景圖Word Wrap文字陰影font-face屬性盒陰影：陰影，文本陰影盒模型：，多背景，圓角(邊框半徑)，邊框圖片2D：旋轉(zhuǎn)，縮放，傾斜，請(qǐng)參考：CSS根底變換3D：透視，transform 3D，等等媒體查詢(xún)語(yǔ)音演示10.51.50/html5/css3Explorer.htmlCSS3 Explorer.htm

7、l演示：CSS3 2D10.51.50/html5/bigbigwolf.html灰太狼 華為L(zhǎng)ogo10.51.50/html5/huaweilogo演示：CSS3 3D Google 3D box10.51.50/html5/Morphing power cuber/10.51.50/html5/google 3d box旋轉(zhuǎn)的立方體SVG 矢量圖形運(yùn)用場(chǎng)景矢量地圖-某產(chǎn)品構(gòu)建多樣的矢量圖形-SmartUE圖表工程10.51.50SVGchinaMap.svg10.51.50/SmartUEV2SVGSVGScalable Vector Graphics：可縮放矢量圖形，運(yùn)用 XML 來(lái)描

8、畫(huà)二維圖形和繪圖程序的言語(yǔ)?？梢栽陂喿x器中構(gòu)造 矩形、圓形、橢圓、線(xiàn)條、多邊形、折線(xiàn)、途徑、濾鏡效果、漸變效果，和動(dòng)畫(huà)等演示：簡(jiǎn)單的圖形元素10.51.50/SVG/rect2.svg復(fù)合圖表10.51.50/SmartUEV2/UI/api/complexChart.htmlHTML5的圖形機(jī)制比較:SVG VS Canvas一樣點(diǎn)均是HTML5規(guī)范的一部分均能實(shí)現(xiàn)圖形和動(dòng)畫(huà)均可以經(jīng)過(guò)腳本編程控制顯示不同點(diǎn)SVGCanvasDOM是！非！最大的區(qū)別！Everything is pixel是否矢量矢量，放大不失真像素操作，放大失真圖形內(nèi)存模式保留模式即發(fā)即棄。直接向它的位圖呈現(xiàn)它的圖形，然后對(duì)

9、所繪制的形狀沒(méi)有任何認(rèn)知，只會(huì)得到最終的位圖?；緢D形種類(lèi)豐富（線(xiàn)，圓，矩形，多邊形，路徑等）除了矩形，只有路徑原生動(dòng)畫(huà)支持支持不支持。需要js去模擬，即刷屏3D不支持支持交互支持Dom事件只能用js根據(jù)坐標(biāo)進(jìn)行編程可訪(fǎng)問(wèn)性好。Xml結(jié)構(gòu)易于分析差。程序無(wú)法感知內(nèi)容，除非圖像識(shí)別或?qū)ｉT(mén)做canvas內(nèi)容映射最終實(shí)現(xiàn)的代碼特征Svg標(biāo)簽+css，少量依賴(lài)js基本上是完全依賴(lài)js小結(jié)互有所長(zhǎng)，均適用不同運(yùn)用場(chǎng)景：SVG更適宜規(guī)那么圖形的繪制和動(dòng)畫(huà)，更好管理。典型場(chǎng)景：圖表，流程圖等高保真度矢量文檔。Canvas更適宜不規(guī)那么或涉及像素級(jí)的變化場(chǎng)景，更高效。典型場(chǎng)景：圖片編輯和圖形數(shù)據(jù)分析，位圖動(dòng)畫(huà)

10、，2D游戲，3D虛擬空間等像素操作。離線(xiàn)運(yùn)用運(yùn)用場(chǎng)景頻道緩存，海報(bào)緩存，減低效力器負(fù)載，提升用戶(hù)開(kāi)機(jī)體驗(yàn)-IPTV Webkit 機(jī)頂盒離線(xiàn)保管桌面和通訊錄數(shù)據(jù)，定時(shí)和效力器同步-UC web版離線(xiàn)運(yùn)用：讓網(wǎng)絡(luò)運(yùn)用變?yōu)樽烂孢\(yùn)用離線(xiàn)存儲(chǔ)使得他的web運(yùn)用可以在用戶(hù)離線(xiàn)的情況下進(jìn)展訪(fǎng)問(wèn)。離線(xiàn)存儲(chǔ)的兩個(gè)特性：1 離線(xiàn)資源緩存2 本地?cái)?shù)據(jù)存儲(chǔ) local storage離線(xiàn)存儲(chǔ)技術(shù)技術(shù)顯然至少有三個(gè)益處：1 最直接的益處就是用戶(hù)可以離線(xiàn)訪(fǎng)問(wèn)他的web運(yùn)用2 由于文件被緩存在本地使得web頁(yè)面加載速度提升許多3 離線(xiàn)運(yùn)用只加載被修正正的資源，因此大大降低了用戶(hù)懇求對(duì)效力器呵斥的負(fù)載壓力演示10.51.5

11、0:82/SmartUEV2/ (運(yùn)用chrome15+觀看)如何離線(xiàn)存儲(chǔ)資源如何運(yùn)用local storage 存儲(chǔ)數(shù)據(jù)10.51.50/html5/localstorage/localStorage.html拖拽運(yùn)用場(chǎng)景拖放文件實(shí)現(xiàn)上傳和預(yù)覽拖拽操作頁(yè)面上的UI組件和數(shù)據(jù)Drag&Drop簡(jiǎn)介HTML5為元素新增了用于拖拽的屬性draggable，這個(gè)屬性決議了元素能否能被拖拽，或只能選擇元素的文本。同時(shí)HTML5運(yùn)用dataTransfer接口用來(lái)支持拖拽數(shù)據(jù)存儲(chǔ)。三個(gè)重要特性：draggable屬性：就是標(biāo)簽元素要設(shè)置draggable=true，否那么不會(huì)有效果，例如：列表1Data

12、Transfer對(duì)象：退拽對(duì)象用來(lái)傳送的媒介，運(yùn)用普通為Event.dataTransfer。Drag事件：ondragstart、ondragenter、ondragover、ondrop、ondragend演示如何實(shí)現(xiàn)本地文件拖拽至網(wǎng)頁(yè)網(wǎng)頁(yè)內(nèi)拖拽事件演示10.51.50/html5/dragdrop/list.htm10.51.50/html5/dragdrop/imageview.html其他HTML5特性font-face使網(wǎng)頁(yè)自在引入新的字體http10.51.50/html5/font/fontFace.html頁(yè)面預(yù)渲染及可見(jiàn)性 rel=“prerender，提升頁(yè)面翻開(kāi)速度。更多觀看：html5china/CSS3/20211226_725.htmlwebworkers：不影響用戶(hù)主要義務(wù)的情況下，閱讀器運(yùn)轉(zhuǎn)多個(gè)后臺(tái)運(yùn)轉(zhuǎn)程序WebSockets：Web和效力器全雙工通訊，收發(fā)信息不再有延遲Geolocation：允許Web運(yùn)用感知位置，顯示他地理位置附近的內(nèi)容三 HTML5目前