HTML5前端開發(fā)培訓(xùn)

1、HTML5前端開發(fā)培訓(xùn)前端開發(fā)培訓(xùn)我們從這里開始這里不是速成班結(jié)構(gòu)Structure表現(xiàn)Presentation行為BehaviorWeb標(biāo)準(zhǔn)Web標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合XHTML&XMLHTMLCSSCSSDOM&ECMAScriptJavaScript各自職責(zé)HTML: 結(jié)構(gòu)&內(nèi)容CSS: 樣式JS: 結(jié)構(gòu)&內(nèi)容&樣式&動(dòng)畫&交互各自職責(zé)發(fā)展演變HTML: 結(jié)構(gòu)&內(nèi)容&交互CSS: 樣式&動(dòng)畫JS: 結(jié)構(gòu)&內(nèi)容&樣式&動(dòng)畫&交互 HTML CSS JavaScript目錄HTML超文本標(biāo)記語言Hyper Text Markup LanguageWeb應(yīng)用的基石發(fā)展簡史19

2、89 Tim Berners-Lee 發(fā)明HTML1993 第一款 瀏覽器“Mosaic”發(fā)布1994 W3C成立1997 HTML 3.21999 HTML4.012000 XHTML 1.02008 HTML5超文本標(biāo)記語言HTML語法起始標(biāo)記結(jié)束標(biāo)記元素屬性內(nèi)容標(biāo)題 內(nèi)容.基本結(jié)構(gòu)HEADBODY 與 之間的文本描述網(wǎng)頁 與 之間定義文檔的頭部 與 之間的文本是可見的頁面內(nèi)容Doctype文檔類型聲明 HTML4.0 & XHTML 1.1 HTML4.0 HTML5.0說明你用的說明你用的 的的XHTML或者或者 者者HTML是什么版本是什么版本向上向下兼容DOCTYPE的奇怪影響 t

3、itle頁面標(biāo)題，而且必須唯一 meta提供有關(guān)頁面的元信息（meta-information），比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞 link定義文檔與外部資源的關(guān)系 script定義文檔內(nèi)部的JavaScript style定義文檔內(nèi)部的CSSHead文件常用元素結(jié)構(gòu)：p,div,span,h1h6,body列表：ul,ol,dl,li,dd,dt文本：a,em,strong,pre表單：form,input,button,label媒體：img,object表格：table,tr,td,caption,tbody元素分類行內(nèi)元素塊級(jí)元素嵌套規(guī)則元素分類 塊級(jí)元素(block)div、

4、p、h1h6、table、td、tr、ul、li、fieldset、legend.特點(diǎn)：在文檔流中默認(rèn)占據(jù)整行位置 行內(nèi)元素(inline)span、en、strong、label、a、img、input、button、select.特點(diǎn)：在文檔流中默認(rèn)一行可以展示多個(gè)行內(nèi)元素 嵌套規(guī)則塊級(jí)元素可以嵌套行內(nèi)元素，除a以外的行內(nèi)元素不能嵌套塊級(jí)元素語義化元素 header，footer section，article nav，aside，figure h1h6 ol，ul，dl table，tr，th，tdHTML5介紹語義化標(biāo)簽語義化意義 增強(qiáng)頁面的可訪問性 提高開發(fā)效率 搜索引擎優(yōu)化SEO

5、id 唯一性 class 不再使用的屬性algin，bgcolor，background，color.元素通用屬性CSS定義 - 樣式與結(jié)構(gòu)分離書籍推薦 HTML CSS JavaScript目錄CSS層疊樣式表Cascading Style Sheets程序員的畫筆發(fā)展簡史1994 HakonWium Lie提出CSS概念1996 CSS Level 11997 CSSWorking Group1998 CSS Level 2CSS Level 3 進(jìn)化中例如： p color:#ff0000;CSS語法 選擇器屬性值selectorproperty:value多個(gè)屬性之間采用分號(hào)分隔CSS

6、選擇器元素選擇器 h1類選擇器 .classnameid選擇器 #id全局選擇器 *繼承選擇器 div p分組選擇器 h1,h2偽類選擇器 :hover屬性選擇器 inputtype=button層疊樣式的優(yōu)先級(jí) 瀏覽器缺省設(shè)置 外部樣式表 內(nèi)部樣式表 標(biāo)簽自定義樣式CSS優(yōu)先級(jí)CSS優(yōu)先級(jí)清除瀏覽器缺省樣式清除瀏覽器缺省樣式html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, a,code, em, img, q, small, strong, dd, dl,dt, li, ol, ul, f

7、ieldset, form, label, table,tbody, tr, th, td, input.reset.cssClass方式定義樣式CSS 盒子模型瀏覽器的盒模型與兼容性display:blockdisplay:inlinedisplay:inline-blockCSS 兼容問題源自哪里？ 盒模型展示方式不同IE9+/FF/ChromeIE6-IE8 瀏覽器引擎本身的差異CSS 兼容問題源自哪里？CSS 兼容問題源自哪里？ 瀏覽器本身BUG升級(jí)瀏覽器安裝補(bǔ)丁文件兼容Hack瀏覽器的盒模型與兼容性#box color:black; /*firefox*/color:red9; /*

8、所有IE*/*color:blue; /*IE7*/_color:green; /*IE6*/CSS Hack (樣式補(bǔ)丁)CSS瀏覽器兼容案例!-if!-if!-if!-if!-if IE 7 IE 8 IE 9 gt IE 9!IE!-漸進(jìn)增強(qiáng)的CSS3 圓角 border-radius 漸變 gradient 過渡動(dòng)畫 transition致友、點(diǎn)點(diǎn)、淘寶視覺設(shè)計(jì)師需要了解Web知識(shí)CSS3介紹CSS Sprites 優(yōu)點(diǎn)1.減少HTTP請(qǐng)求,降低服務(wù)器負(fù)擔(dān)2.文件體積更小 1+1 2 缺點(diǎn)1.開發(fā)/維護(hù)成本高2.擴(kuò)展性差圖片合并提高Web性能書籍推薦 HTML CSS JavaScri

9、pt目錄JavaScript潛力無限的語言發(fā)展簡史1995 JavaScript 誕生1996 ECMAScript誕生1999 ECMAScript32009 ECMAScript5ECMAScriptHarmony 正在討論中應(yīng)用 - 客戶端應(yīng)用 - 服務(wù)端應(yīng)用 - 其他JavaScript 不是 Java語言特性 動(dòng)態(tài)性 弱類型 基于對(duì)象 腳本語言動(dòng)態(tài)性在一個(gè)Javascript對(duì)象中，要為一個(gè)屬性賦值，我們不必事先創(chuàng)建一個(gè)字段，只需要在使用的時(shí)候做賦值操作即可/定義一個(gè)對(duì)象var obj = new Object();/動(dòng)態(tài)創(chuàng)建屬性 = an object;/動(dòng)

10、態(tài)創(chuàng)建屬性sayHiobj.sayHi = function()return Hi;obj.sayHi();弱類型與Java，C/C+不同，Javascript 是弱類型的，它的數(shù)據(jù)類型無需在聲明時(shí)指定，解釋器會(huì)根據(jù)上下文對(duì)變量進(jìn)行實(shí)例化/定義一個(gè)變量s字符串var s = text;print(s);/賦值s為整型s = 12+5;print(s);/賦值s為浮點(diǎn)型s = 6.3;print(s);/賦值s為一個(gè)對(duì)象s = new Object(); = object;Javascript中詭異的類型轉(zhuǎn)換基本數(shù)據(jù)類型 字符串(String) 數(shù)值(Number)在JavaScri

11、pt中，所有的數(shù)字，不論是整型浮點(diǎn)，都屬于“數(shù)值”基本類型。 布爾值(Boolean)var str = Hello, world;/字符串var i = 10;/整型數(shù)var f = 2.3;/浮點(diǎn)數(shù)var b = true;/布爾值對(duì)象類型 對(duì)象(屬性的集合，即鍵值的散列表) 數(shù)組(有序的列表) 函數(shù)(包含可執(zhí)行的代碼)var obj = new Object();obj.num = 2.3;var array = new Array(foo, bar, zoo);var func = function()print(I am a function here);類型比較 typeof -

12、基本類型返回一個(gè)用來表示表達(dá)式的數(shù)據(jù)類型的字符串。number,string,boolean,object,function, undefined instanceof - 對(duì)象類型返回一個(gè) Boolean 值，指出對(duì)象是否是特定類的一個(gè)實(shí)例。obj instanceof Array;/falsearray instanceof Array;/truefunction add(x, y)return x + y;var add = function(x, y)return x + y;或函數(shù) 創(chuàng)建函數(shù)var funcName = new Function( argname1, . argnam

13、eN, body );var add = new Function(x, y, return(x+y);語法糖/調(diào)用屬性 或 objname/調(diào)用方法obj.sayHi()對(duì)象 JavaScript 是面向?qū)ο蟮木幊陶Z言 (OOP)。使我們有能力定義自己的對(duì)象和變量類型。注意：對(duì)象只是一種特殊的數(shù)據(jù)。對(duì)象擁有屬性和方法。/定義一個(gè)對(duì)象var obj = new Object();/屬性 = an object;/方法obj.sayHi = function()return Hi;容易忽略的JavaScript細(xì)節(jié)對(duì)象模板 模版定義了對(duì)象的結(jié)構(gòu)function B

14、ase()=an object;this.sayHi = function()return Hi;obj.sayHi()創(chuàng)建新的實(shí)例var obj = new Base();模版僅僅是一個(gè)函數(shù)。你需要在函數(shù)內(nèi)部向 pertiName 分配內(nèi)容。高級(jí) 原型對(duì)象(prototype) 作用域 (scope) 面向?qū)ο蟮腏avaScript 閉包深入理解JavaScript的閉包JS面向?qū)ο?1)簡單JS對(duì)象JS面向?qū)ο?2)簡單JS對(duì)象JSON JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。var obj = ;va

15、r arr = ;var obj = new Object();var arr = new Array();var obj = name: an object JSON 對(duì)象 屬性/ 值：JSON入門簡介開源框架/庫PrototypeMooToolsYUIExtJSJQueryKissy.JavaScript 框架介紹HTML5基礎(chǔ)培訓(xùn)HTML5基礎(chǔ)培訓(xùn)基礎(chǔ)培訓(xùn) HTML5概述1 HTML5的新特性2 HTML5的未來31. HTML5概述HTML5是一個(gè)新的網(wǎng)絡(luò)標(biāo)準(zhǔn)，現(xiàn)在仍處于發(fā)展階段。目標(biāo)是取代現(xiàn)有的HTML4.01和XHTML1.0標(biāo)準(zhǔn)。它希望能夠減少互聯(lián)網(wǎng)富應(yīng)用（RIA)對(duì)Flash、

16、Silverlight、JavaFX等的依賴，并且提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的API。廣義的HTML5包括HTML,CSS和JavaScript在內(nèi)的一套技術(shù)組合，其目標(biāo)是減少瀏覽器對(duì)于插件的依賴，提供豐富的RIA（富客戶端）應(yīng)用。所以CSS3，SVG，WebGL，Touch事件，動(dòng)畫支持等都屬于HTML5技術(shù)范圍HTML5時(shí)間表2004年 提出構(gòu)想2008年 發(fā)布第一份草案2012年 推廣階段2020年 最終測試2022年 正式發(fā)布2. HTML5的新特性語義離線存儲(chǔ)設(shè)備通用位置多媒體三維、圖形與特效性能與集成Web2.0帶來的豐富互聯(lián)網(wǎng)技術(shù)讓所有人都享受到了技術(shù)發(fā)展和體驗(yàn)進(jìn)步的樂趣。作為下

17、一代互聯(lián)網(wǎng)標(biāo)準(zhǔn)，HTML5自然也是備受期待和矚目，技術(shù)人員、設(shè)計(jì)者、互聯(lián)網(wǎng)愛好者們都在熱議HTML5究竟能帶來什么。那么就一起來窺探一下這個(gè)還未誕生就已經(jīng)聲名在外的新標(biāo)準(zhǔn)吧。2. HTML5的新特性 語義HTML5引入了新的HTML元素，通過使用這些元素，開發(fā)者可以更細(xì)致的描述文檔結(jié)構(gòu)，讓文檔更加易讀，搜索引擎也能更好的理解頁面中各部分間的關(guān)系，我們也可以搜索到更快，更準(zhǔn)確的信息。2. HTML5的新特性 多媒體Audio和Video是首批添加到HTML規(guī)范中的標(biāo)簽。它們的加入使得我們可以像插入圖片一樣來處理音頻及視頻文件。2. HTML5的新特性 三維、圖形與特效基于SVG、Canvas、W

18、ebGL及CSS3的3D功能，用戶會(huì)驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺效果。 var ctx = document.getElementById(canvas).getContext(2d); ctx.fillRect(20, 25, 150, 100); ctx.beginPath(); ctx.arc(220, 110, 100, Math.PI * 1/2, Math.PI * 3/2); ctx.lineWidth = 15; ctx.lineCap = round; ctx.strokeStyle = rgba(255, 127, 0, 0.5); ctx.stroke();2. H

19、TML5的新特性 離線存儲(chǔ)現(xiàn)在，web應(yīng)用的火爆已經(jīng)是不折不扣的現(xiàn)實(shí)，并且相對(duì)傳統(tǒng)的應(yīng)用,web應(yīng)用不需要安裝，所占空間小的特性使其具備傳統(tǒng)軟件應(yīng)用所不具備的優(yōu)勢，然而，目前制約web應(yīng)用最大的問題在于網(wǎng)絡(luò)連接不能夠無時(shí)無處。在飛機(jī)上，汽車上，火車上，有很多地方都無法被網(wǎng)絡(luò)信號(hào)所覆蓋，因此web應(yīng)用也就無法使用。HTML5的離線存儲(chǔ)使得這個(gè)問題迎刃而解。2. HTML5的新特性 離線存儲(chǔ)HTML5的webstorageAPI采用了離線緩存，會(huì)生成一個(gè)清單文件（manifestfile），這個(gè)清單文件實(shí)質(zhì)就是一系列的URL列表文件，這些URL分別指向頁面當(dāng)中的HTML,CSS,Javascrpi

20、t,圖片等相關(guān)內(nèi)容。當(dāng)使用離線應(yīng)用時(shí)，應(yīng)用會(huì)引入這一清單文件，瀏覽器會(huì)讀取這一文件，下載相應(yīng)的文件，并將其緩存到本地。使得這些web應(yīng)用能夠脫離網(wǎng)絡(luò)使用，而用戶在離線時(shí)的更改也同樣會(huì)映射到清單文件中，并在重新連線之后將更改返回應(yīng)用，工作方式與我們現(xiàn)在所使用的網(wǎng)盤有著異曲同工之處。2. HTML5的新特性 設(shè)備通用性從Geolocation功能的API文檔公開以來，HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來了更多體驗(yàn)功能的優(yōu)勢。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)。

21、2. HTML5的新特性 位置這個(gè)大頭針圖標(biāo)從2010年到2011年在各類應(yīng)用和互聯(lián)網(wǎng)上應(yīng)該是非?；鸨税?？沒錯(cuò)，就是地理位置，各處都可以看到人們在簽到，查找自己當(dāng)前的地理位置和周邊。作為新標(biāo)準(zhǔn)的HTML5自然也不會(huì)置身事外，HTML5通過提供應(yīng)用接口GeolocationAPI，在用戶允許的情況下共享當(dāng)前的地理位置信息，并為用戶提供其他相關(guān)的信息。3. HTML5的未來隨著網(wǎng)絡(luò)架構(gòu)的完善，寬帶提升，網(wǎng)速滿足實(shí)時(shí)交互需求時(shí)，計(jì)算機(jī)結(jié)構(gòu)也將發(fā)生變化，光驅(qū)消失，硬盤消失，內(nèi)存增大，GPU愈加重要，現(xiàn)在B/S結(jié)構(gòu)的應(yīng)用越來越多，而HTML5旨在富互聯(lián)網(wǎng)應(yīng)用，能夠改善B/S結(jié)構(gòu)應(yīng)用的用戶體驗(yàn)，是互聯(lián)網(wǎng)

22、應(yīng)用的趨勢之一。面向未來互聯(lián)網(wǎng)，基于“云+終端”的構(gòu)架，終端的HTML5的兼容解決方案必然會(huì)出現(xiàn)，那時(shí)候你就可以全面擁抱HTML5了。HTML5表單 Day1 新增input輸入類型1 新增input屬性2 新增form元素3 新增form屬性41. 新增input輸入類型HTML5 擁有多個(gè)新的表單輸入類型。這些新特性提供了更好的輸入控制和驗(yàn)證： email-輸入郵件地址的文本框 url-輸入U(xiǎn)RL地址的文本框 number-輸入數(shù)字的文本框,可以設(shè)置范圍 range-通過滑動(dòng)條改變一定范圍內(nèi)的數(shù)字 date-選擇日期(年、月、日、星期)的文本框 search-輸入搜索關(guān)鍵字操作的文本框 C

23、olor-顏色選擇器瀏覽器支持注釋：Opera對(duì)新的輸入類型的支持最好。不過您已經(jīng)可以在所有主流的瀏覽器中使用它們了。即使不被支持，仍然可以顯示為常規(guī)的文本域。Input typeIEFirefox OperaChromeSafariemailNo4.09.010.0NourlNo4.09.010.0NonumberNoNo9.07.0NorangeNoNo9.04.04.0DatepickersNoNo9.010.0NosearchNo4.011.010.0NocolorNoNo11.0NoNoEmail - 輸入郵件地址的文本框email類型用于應(yīng)該包含e-mail地址的輸入域。在提交表單

24、時(shí)，會(huì)自動(dòng)驗(yàn)證email域的值。實(shí)例:E-mail:url-輸入U(xiǎn)RL地址的文本框url類型用于應(yīng)該包含URL地址的輸入域。在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證url域的值。實(shí)例：Homepage:number-輸入數(shù)字的文本框number類型用于應(yīng)該包含數(shù)值的輸入域。您還能夠設(shè)定對(duì)所接受的數(shù)字的限定：實(shí)例:Points:number-輸入數(shù)字的文本框下面的屬性來規(guī)定對(duì)數(shù)字類型的限定：屬性值描述maxnumber規(guī)定允許的最大值minnumber規(guī)定允許的最小值stepnumber規(guī)定合法的數(shù)字間隔（如果step=3，則合法的數(shù)是-3,0,3,6等）valuenumber規(guī)定默認(rèn)值range-通過滑動(dòng)條改

25、變一定范圍內(nèi)的數(shù)字range類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。range類型顯示為滑動(dòng)條。您還能夠設(shè)定對(duì)所接受的數(shù)字的限定：實(shí)例:range-通過滑動(dòng)條改變一定范圍內(nèi)的數(shù)字下面的屬性來規(guī)定對(duì)數(shù)字類型的限定：屬性值描述maxnumber規(guī)定允許的最大值minnumber規(guī)定允許的最小值stepnumber規(guī)定合法的數(shù)字間隔（如果step=3，則合法的數(shù)是-3,0,3,6等）valuenumber規(guī)定默認(rèn)值date-選擇日期(年、月、日、星期)的文本框HTML5 擁有多個(gè)可供選取日期和時(shí)間的新輸入類型：date-選取日、月、年month-選取月、年week-選取周和年time-選取時(shí)間（小

26、時(shí)和分鐘）datetime-選取時(shí)間、日、月、年（UTC時(shí)間）datetime-local-選取時(shí)間、日、月、年（本地時(shí)間）date-選擇日期(年、月、日、星期)的文本框?qū)嵗?Date:date-選擇日期(年、月、日、星期)的文本框?qū)嵗?Month:date-選擇日期(年、月、日、星期)的文本框?qū)嵗?Week:date-選擇日期(年、月、日、星期)的文本框?qū)嵗?Time:date-選擇日期(年、月、日、星期)的文本框?qū)嵗?Dateandtime:date-選擇日期(年、月、日、星期)的文本框?qū)嵗?Dateandtime:search-輸入搜索關(guān)鍵字操作的文本框search類型用于搜索域，比如站

27、點(diǎn)搜索或Google搜索。search域顯示為常規(guī)的文本域。search-輸入搜索關(guān)鍵字操作的文本框?qū)嵗篠earch:Color-顏色選擇器這是顏色選擇器控件，相當(dāng)?shù)慕o力。使用很簡單。實(shí)例：Color：2. 新增input屬性HTML5的input標(biāo)簽新增了很多屬性，也是讓大家非常興奮的一件事，用簡單的一個(gè)屬性搞定以前復(fù)雜的JS驗(yàn)證。input新增的這些屬性，使得html和js的分工更明確了，使用起來十分舒暢。新增主要屬性如下： autoconmplete autofocus required placeholderautocompleteautocomplete可以賦值為on或者off。當(dāng)

28、為on的時(shí)候，瀏覽器能自動(dòng)存儲(chǔ)用戶輸入的內(nèi)容。當(dāng)用戶返回到曾經(jīng)填寫過值的頁面的時(shí)候，瀏覽器能把用戶寫過的值自動(dòng)填寫在相應(yīng)的input框里?，F(xiàn)在很多網(wǎng)站都實(shí)現(xiàn)了這個(gè)功能，不過基本都是用php來實(shí)現(xiàn)的。用了這個(gè)屬性，無疑可以減少很多前端和后臺(tái)的交流量和工作量。autoconmplete實(shí)例：Firstname:Lastname:E-mail:autofocusautofocus可以賦值為autofocus，也就是在頁面加載完成的時(shí)候自動(dòng)聚焦到這個(gè)input標(biāo)簽，自然type=hidden的時(shí)候是不能用的。這個(gè)也是一個(gè)比較常見的效果，至今為止的實(shí)現(xiàn)方法是用js。在頁面加載完時(shí)執(zhí)行聚焦操作，現(xiàn)在也被一

29、個(gè)屬性搞定了?？梢韵胂?，一個(gè)頁面至多只有一個(gè)input標(biāo)簽會(huì)設(shè)置autofocus，否則必然不會(huì)達(dá)到預(yù)期效果。因?yàn)椴豢赡芡瑫r(shí)聚焦在兩個(gè)input上。實(shí)例：Username:requiredinput的有一個(gè)強(qiáng)力新增屬性，免去驗(yàn)證的麻煩?？梢再x值為required。比如用戶注冊頁面的用戶名和密碼都是必填的，只要設(shè)置一個(gè)required就可以了。而在以前是需要js來驗(yàn)證或者后臺(tái)驗(yàn)證的。注意：這里required屬性是需要用戶來填寫的，所以Type是button、submit、reset、image等等不需要用戶填寫選擇的類型是不可以使用這個(gè)屬性的。實(shí)例：Name:placeholder這個(gè)新增屬性

30、也是非常使用，用在type=textemail等等類型的時(shí)候，提示用戶輸入信息的格式或者內(nèi)容等等。這個(gè)效果在之前也是需要js來實(shí)現(xiàn)的。是一種比較常見的效果。實(shí)例：3. 新增form元素HTML5主要新增的form元素如下： datalist keygen outputdatalistdatalist元素規(guī)定輸入域的選項(xiàng)列表。列表是通過datalist內(nèi)的option元素創(chuàng)建的。如需把datalist綁定到輸入域，請(qǐng)用輸入域的list屬性引用datalist的id。datalist實(shí)例：Webpage:keygenkeygen元素的作用是提供一種驗(yàn)證用戶的可靠方法。keygen元素是密鑰對(duì)生成器

31、（key-pairgenerator）。當(dāng)提交表單時(shí)，會(huì)生成兩個(gè)鍵，一個(gè)是私鑰，一個(gè)公鑰。私鑰（privatekey）存儲(chǔ)于客戶端，公鑰（publickey）則被發(fā)送到服務(wù)器。公鑰可用于之后驗(yàn)證用戶的客戶端證書（clientcertificate）。目前，瀏覽器對(duì)此元素的糟糕的支持度不足以使其成為一種有用的安全標(biāo)準(zhǔn)。實(shí)例：Encryption:outputoutput元素用于不同類型的輸出，比如計(jì)算或腳本輸出：實(shí)例：0100+=4. 新增form屬性HTML5主要新增的form屬性如下： autocomplete novalidateautocompleteautocomplete屬性規(guī)定fo

32、rm或input域應(yīng)該擁有自動(dòng)完成功能。注釋：autocomplete適用于標(biāo)簽，以及以下類型的標(biāo)簽：text,search,url,telephone,email,password,datepickers,range以及color。當(dāng)用戶在自動(dòng)完成域中開始輸入時(shí)，瀏覽器應(yīng)該在該域中顯示填寫的選項(xiàng)：autocomplete實(shí)例：Firstname:Lastname:E-mail:novalidatenovalidate屬性規(guī)定在提交表單時(shí)不應(yīng)該驗(yàn)證form或input域。注釋：novalidate屬性適用于以及以下類型的標(biāo)簽：text,search,url,telephone,email,pa

33、ssword,datepickers,range以及color.實(shí)例：E-mail:課后作業(yè)1.熟悉html5的新特性2.運(yùn)用所學(xué)的html5新增的輸入類型和屬性等制作一個(gè)完整的form表單。3.預(yù)習(xí)下節(jié)課的內(nèi)容html5畫布HTML5畫布 Day2&Day3 認(rèn)識(shí)HTML5 Canvas元素1 繪制簡單圖形2 繪制貝塞爾曲線3 圖形變形4 圖形組合/剪切5 顏色樣式選項(xiàng)6 繪制文字7 操作和使用圖像81. 認(rèn)識(shí)HTML5 Canvas元素HTML5最偉大之處在于引入了畫布Canvas。Canvas元素是為了客戶端點(diǎn)陣圖形而設(shè)計(jì)的，它本身沒有繪圖能力，但卻把一個(gè)繪圖API展現(xiàn)給客戶端JavaS

34、cript以使腳本能夠把想繪制的東西都繪制到一塊畫布上。本章通過下面幾點(diǎn)我們來初步認(rèn)識(shí)一下HTML的canvas元素。什么是Canvas？創(chuàng)建Canvas元素操作Canvas元素理解坐標(biāo)系統(tǒng)創(chuàng)建canvas元素用canvas標(biāo)記在網(wǎng)頁上繪制圖形和圖像，首先需要在頁面中添加一個(gè)canvas元素作為畫布，并規(guī)定元素的id、寬度和高度。實(shí)例：上面的代碼在頁面中插入了一個(gè)透明的畫布，canvas元素內(nèi)部的內(nèi)容可以在不支持canvas功能的瀏覽器下顯示你想給你的用戶提供的信息。操作canvas元素canvas元素本身是沒有繪圖能力的。所有的繪制工作必須在JavaScript內(nèi)部完成。實(shí)例：window.

35、onload=function()varvarcanvas=document.getElementById(myCanvas);varvarcontext=varcanvas.getContext(2d);/在此添加繪圖代碼varcontext.fillStyle=#FF0000;varcontext.fillRect(0,0,150,75);操作canvas元素JavaScript使用id來尋找canvas元素：varvarcanvas=document.getElementById(myCanvas);然后，創(chuàng)建context對(duì)象：varvarcontext=varcanvas.getCo

36、ntext(2d);getContext(2d)對(duì)象是內(nèi)建的HTML5對(duì)象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。下面的兩行代碼繪制一個(gè)紅色的矩形：varcontext.fillStyle=#FF0000;varcontext.fillRect(0,0,150,75);fillStyle方法將其染成紅色，fillRect方法規(guī)定了形狀、位置和尺寸。理解坐標(biāo)系統(tǒng)上面的fillRect方法擁有參數(shù)(0,0,150,75)。意思是：在畫布上繪制150 x75的矩形，從左上角開始(0,0)。如下圖所示，畫布的X和Y坐標(biāo)用于在畫布上對(duì)繪畫進(jìn)行定位。2. 繪制簡單圖形認(rèn)識(shí)了canvas元素

37、之后那么就讓我們在其上面進(jìn)行繪畫一些簡單的圖形：。矩形線條圓形和弧形矩形canvas繪制矩形的方法：fillRect(x,y,width,height)：參數(shù)x和y分別表示繪制的矩形的左上角頂點(diǎn)在頁面上的坐標(biāo)值；參數(shù)weidth和height表示矩形的寬和高strokeRect(x,y,width,height)：繪制四周產(chǎn)生描邊效果的矩形。實(shí)例：varcontext.fillRect(0,0,200,100);varcontext.strokeRect(50,500,100,100);線條我們可以通過起始坐標(biāo)，和結(jié)束坐標(biāo)，來繪制一條直線。實(shí)例：varline=document.getElem

38、entById(line);varc=line.getContext(2d);c.moveTo(20,20);c.lineTo(200,100);c.lineTo(20,100);c.stroke();線條moveTo(x，y)：設(shè)置繪圖起始坐標(biāo)。lineTo(x,y)：從上一個(gè)起點(diǎn)到(x,y)的點(diǎn)畫線，上一個(gè)起點(diǎn)可以通過moveTo來指定，默認(rèn)為原先路徑的終點(diǎn)。stroke()：描邊路徑。注解：嘗試一下使用closePath()方法(在stroke()方法之前調(diào)用該方法，closePath()方法創(chuàng)建從當(dāng)前點(diǎn)到開始點(diǎn)的路徑。)，測試一下效果圓形和弧形我們可以通過規(guī)定尺寸、顏色和位置，來繪制一

39、個(gè)圓或者弧形。實(shí)例：varc=document.getElementById(circle);varr=c.getContext(2d);r.fillStyle=#ff0000;r.beginPath();r.arc(70,80,45,0,Math.PI*2,true);r.closePath();r.fill();圓形和弧形beginPath()：創(chuàng)建路徑的第一步是調(diào)用beginPath方法，開始一條路徑，或重置當(dāng)前的路徑。closePath()：從當(dāng)前的點(diǎn)到起始點(diǎn)閉合路徑。arc(x,y,radius,startAngle,endAngle,anticlockwise)：(x,y)是圓弧的

40、圓心，radius-半徑,startAngle和endAngle是圓弧的開始和結(jié)束弧度（弧度=(Math.PI/180)*degree)，anticlockwise為true的話是逆時(shí)針，否則為順時(shí)針。fillStyle：設(shè)置填充色。fill()：填充路徑。圓形和弧形看看上圖中的外觀。弧沒有超過部分的一個(gè)假想的圓的周長。這個(gè)虛構(gòu)的循環(huán)可以被定義centerX，centerY，和半徑。接下來，我們可以定義沿所定義的虛圓的周長有兩個(gè)點(diǎn)的弧本身startingAngle和endingAngle。這兩個(gè)角度定義的弧度和形式來自圓心和虛線相交的弧線，我們希望創(chuàng)建兩端?；》椒ǖ淖詈笠粋€(gè)參數(shù)是逆時(shí)針，這是一

41、個(gè)可選的參數(shù)，它定義的兩個(gè)結(jié)束點(diǎn)之間的ARC路徑的方向。除非另有規(guī)定，這種說法是默認(rèn)為false，這將導(dǎo)致順時(shí)針要繪制弧。arc(x,y,radius,startAngle,endAngle,anticlockwise)方法圖解：3. 繪制貝塞爾曲線貝賽爾曲線的每一個(gè)頂點(diǎn)都有兩個(gè)控制點(diǎn)，用于控制在該頂點(diǎn)兩側(cè)的曲線的弧度。它是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。曲線的定義有四個(gè)點(diǎn)：起始點(diǎn)、終止點(diǎn)（也稱錨點(diǎn)）以及兩個(gè)相互分離的中間點(diǎn)。滑動(dòng)兩個(gè)中間點(diǎn)，貝塞爾曲線的形狀會(huì)發(fā)生變化。二十世紀(jì)六十年代晚期，PierreBzier應(yīng)用數(shù)學(xué)方法為雷諾公司的汽車制造業(yè)描繪出了貝塞爾曲線。二次貝塞爾曲線quadra

42、ticCurveTo(cpx,cpy,x,y)/cpx，cpy表示控制點(diǎn)的坐標(biāo),x，y表示終點(diǎn)坐標(biāo)；數(shù)學(xué)公式表示如下：二次方貝茲曲線的路徑由給定點(diǎn)P0、P1、P2的函數(shù)B（t）追蹤：二次貝塞爾曲線實(shí)例：/繪制起始點(diǎn)、控制點(diǎn)、終點(diǎn)context.beginPath();context.moveTo(20,170);context.lineTo(130,40);context.lineTo(180,150);context.stroke();/繪制2次貝塞爾曲線context.beginPath();context.moveTo(20,170);context.quadraticCurveTo(1

43、30,40,180,150);context.strokeStyle=red;context.stroke();三次貝塞爾曲線bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)/cp1x，cp1y表示第一個(gè)控制點(diǎn)的坐標(biāo),cp2x，cp2y表示第二個(gè)控制點(diǎn)的坐標(biāo),x，y表示終點(diǎn)的坐標(biāo)；數(shù)學(xué)公式表示如下：P0、P1、P2、P3四個(gè)點(diǎn)在平面或在三維空間中定義了三次方貝茲曲線。曲線起始于P0走向P1，并從P2的方向來到P3。一般不會(huì)經(jīng)過P1或P2；這兩個(gè)點(diǎn)只是在那里提供方向資訊。P0和P1之間的間距，決定了曲線在轉(zhuǎn)而趨進(jìn)P3之前，走向P2方向的“長度有多長”。三次貝塞爾曲線實(shí)

44、例：/繪制起始點(diǎn)、控制點(diǎn)、終點(diǎn)context.beginPath();context.moveTo(25,175);context.lineTo(60,80);context.lineTo(150,30);context.lineTo(170,150);context.stroke();/繪制3次貝塞爾曲線context.beginPath();context.moveTo(25,175);context.bezierCurveTo(60,80,150,30,170,150);context.strokeStyle=red;context.stroke();4. 圖形變形首先說在前頭，Canv

45、as的變形，是“畫面”的位移，縮放和旋轉(zhuǎn)，而不是畫布。畫布是指canvas，但畫面是指canvas的Context2d對(duì)象，他們千萬不能混淆。畫面的位移縮放和旋轉(zhuǎn)，即畫布不變，而把畫布上的那一層“畫”給進(jìn)行變化。平移translate縮放scale旋轉(zhuǎn)rotate平移 - translate大家應(yīng)該了解canvas有個(gè)“原點(diǎn)”，即坐標(biāo)(0,0)的位置，一般是畫布的左上角。translate的作用就是把這個(gè)“原點(diǎn)”到處移動(dòng)，他的語法是我們很熟悉的translate(x,y)形式,但他和moveTo方法毫無相同。當(dāng)原點(diǎn)變化時(shí)，畫面的一切都會(huì)發(fā)生偏移。context.translate(x,y)x:

46、坐標(biāo)原點(diǎn)向x軸方向平移xy:坐標(biāo)原點(diǎn)向y軸方向平移y平移 - translate實(shí)例：context.fillStyle=red;/繪制起始點(diǎn)、控制點(diǎn)、終點(diǎn)context.fillRect(0,0,50,50);/平移context.translate(100,100);context.fillRect(0,0,50,50);context.translate(100,100);context.fillRect(0,0,50,50);縮放 - scale縮放是很容易理解的概念，但在canvas中縮放要記?。嚎s放是基于“原點(diǎn)”進(jìn)行的。scale也經(jīng)常與translate搭配使用。scale接受兩

47、個(gè)參數(shù)，依次是水平方向的縮放和垂直方向的縮放。參數(shù)可以是小數(shù)，如果小于1就是縮小，大于1則是放大等于1則什么都不做。context.scale(x,y)x:x坐標(biāo)軸按x比例縮放y:y坐標(biāo)軸按y比例縮放縮放 - scale實(shí)例：context.fillStyle=red;/繪制起始點(diǎn)、控制點(diǎn)、終點(diǎn)context.fillRect(0,0,50,50);/平移context.translate(100,100);context.scale(1,2);/x坐標(biāo)不縮放，y坐標(biāo)變成2倍context.fillRect(0,0,50,50);旋轉(zhuǎn) - rotate旋轉(zhuǎn)也是一個(gè)很好理解的概念，而且旋轉(zhuǎn)也是基

48、于原點(diǎn)進(jìn)行的。rotate接受一個(gè)表示度數(shù)的參數(shù)而且是弧度。context.rotate(angle)angle:坐標(biāo)軸旋轉(zhuǎn)x角度（角度變化模型和畫圓的模型一樣）旋轉(zhuǎn) - rotate實(shí)例：context.fillStyle=red;/繪制起始點(diǎn)、控制點(diǎn)、終點(diǎn)context.fillRect(0,0,50,50);/平移context.translate(100,100);/旋轉(zhuǎn)45度，默認(rèn)是順時(shí)針context.rotate(Math.PI/4);context.fillRect(0,0,50,50);課后作業(yè)1.繪制右側(cè)的餅狀圖：2.用貝塞爾曲線畫出右側(cè)氣泡框：5. 圖形組合/剪切圖形組合

49、就是兩個(gè)圖形相互疊加了圖形的表現(xiàn)形式,是后畫的覆蓋掉先畫的呢，還是相互重疊的部分不顯示等等。剪切就是從原始畫布中剪切任意形狀和尺寸。一旦剪切了某個(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)。（不能訪問畫布上的其他區(qū)域）圖形組合圖形組合context.globalCompositeOperation=typetype：source-over（默認(rèn)值）:在原有圖形上繪制新圖形destination-over:在原有圖形下繪制新圖形source-in:顯示原有圖形和新圖形的交集，新圖形在上，所以顏色為新圖形的顏色destination-in:顯示原有圖形和新圖形的交集，原有圖形在上，所以顏色為

50、原有圖形的顏色source-out:只顯示新圖形非交集部分destination-out:只顯示原有圖形非交集部分source-atop:顯示原有圖形和交集部分，新圖形在上，所以交集部分的顏色為新圖形的顏色destination-atop:顯示新圖形和交集部分，新圖形在下，所以交集部分的顏色為原有圖形的顏色lighter:原有圖形和新圖形都顯示，交集部分做顏色疊加xor:重疊飛部分不現(xiàn)實(shí)copy:只顯示新圖形圖形組合文字看得人眼花繚亂，特意畫圖一張：圖形剪切圖形剪切context.clip()實(shí)例：varc=document.getElementById(myCanvas);varctx=c.

51、getContext(2d);/剪切矩形區(qū)域ctx.rect(50,20,200,120);ctx.stroke();ctx.clip();/在clip()之后繪制綠色矩形ctx.fillStyle=green;ctx.fillRect(0,0,150,100);6. 顏色樣式選項(xiàng)前面的內(nèi)容我們只用到了默認(rèn)的線條和填充樣式。而在這一節(jié)，我們將會(huì)探討canvas可選項(xiàng)，來繪制出更加吸引人的內(nèi)容。色彩Colors：如果我們想要給圖形上色，有兩個(gè)重要的屬性可以做到：fillStyle和strokeStyle。透明度Transparency：除了可以繪制實(shí)色圖形，我們還可以用canvas來繪制半透明的

52、圖形。通過設(shè)置globalAlpha屬性或者使用一個(gè)半透明顏色作為輪廓或填充的樣式。線型Linestyles：可以通過一系列屬性來設(shè)置線的樣式。漸變Gradients：就好像一般的繪圖軟件一樣，我們可以用線性或者徑向的漸變來填充或描邊。色彩 Colors如果我們想要給圖形上色，有兩個(gè)重要的屬性可以做到：fillStyle和strokeStyle。fillStyle=colorstrokeStyle=colorstrokeStyle是用于設(shè)置圖形輪廓的顏色，而fillStyle用于設(shè)置填充顏色。color可以是表示CSS顏色值的字符串，漸變對(duì)象或者圖案對(duì)象。默認(rèn)情況下，線條和填充顏色都是黑色(C

53、SS顏色值#000000)。/這些fillStyle的值均為橙色ctx.fillStyle=orange;ctx.fillStyle=#FFA500;ctx.fillStyle=rgb(255,165,0);ctx.fillStyle=rgba(255,165,0,1);色彩 Colors實(shí)例：varvarcontext=canvas.getContext(2d);/設(shè)置填充顏色varcontext.fillStyle=#FF0000;varcontext.fillRect(0,0,150,75);/設(shè)置輪廓顏色varcontext.strokeStyle=#0000ff;varcontext

54、.strokeRect(200,200,151,76);透明度 TransparencyCanvas的透明度globalAlpha屬性影響到canvas元素內(nèi)所有圖形的透明度，在需要繪制大量擁有相同透明度的圖形時(shí)，這個(gè)屬性相當(dāng)高效。其有效值的范圍是0.0（完全透明）到1.0（完全不透明），默認(rèn)值是1.0。不過，一般情況下，由于strokeStyle和fillStyle屬性接受符合CSS3規(guī)范的顏色值，所以使用CSS3的rgba()來分別設(shè)置具有透明度的填充顏色和輪廓顏色的情況比較多，也具有更好的可操作性和使用彈性。透明度 Transparency實(shí)例：ctx.fillStyle=red;ctx

55、.fillRect(20,20,75,50);/調(diào)節(jié)透明度ctx.globalAlpha=0.2;ctx.fillStyle=blue;ctx.fillRect(50,50,75,50);ctx.fillStyle=green;ctx.fillRect(80,80,75,50);同學(xué)們可以試著用使用css的rgba()來做這個(gè)例子ctx.fillStyle=rgba(255,0,0,0.5);線型 Line stylescanvas通過下面的一系列屬性來設(shè)置線的樣式。屬性屬性描述描述lineCap設(shè)置或返回線條的結(jié)束端點(diǎn)樣式lineJoin設(shè)置或返回兩條線相交時(shí)，所創(chuàng)建的拐角類型lineWid

56、th設(shè)置或返回當(dāng)前的線條寬度miterLimit設(shè)置或返回最大斜接長度lineCap值值描述描述butt默認(rèn)。向線條的每個(gè)末端添加平直的邊緣。round向線條的每個(gè)末端添加圓形線帽。square向線條的每個(gè)末端添加正方形線帽。實(shí)例（繪制圓形的結(jié)束線帽）：ctx.beginPath();ctx.lineCap=round;ctx.moveTo(20,20);ctx.lineTo(20,200);ctx.stroke();lineJoin值值描述描述bevel創(chuàng)建斜角。round創(chuàng)建圓角。miter默認(rèn)。創(chuàng)建尖角。實(shí)例（當(dāng)兩條線條交匯時(shí)，創(chuàng)建圓形邊角）：ctx.beginPath();ctx.li

57、neJoin=round;ctx.moveTo(20,20);ctx.lineTo(100,50);ctx.lineTo(20,100);ctx.stroke();lineWidth值值描述描述number當(dāng)前線條的寬度，以像素計(jì)。實(shí)例（用寬度為10像素的線條來繪制矩形：）：ctx.lineWidth=10;ctx.strokeRect(20,20,80,100);漸變 Gradientscanvars漸變是指在顏色集上使用逐步抽樣算法，并將結(jié)果應(yīng)用于描邊樣式和填充樣式中。Canvars漸變主要包括線性漸變和徑向漸變。所謂線性漸變，是指從開始地點(diǎn)到結(jié)束地點(diǎn)，顏色呈直線的徐徐變化的效果。徑向漸變

58、，其實(shí)就是環(huán)形的漸變了，由圓心（或者是較小的同心圓）開始向外擴(kuò)散漸變的效果，聽著有些抽象，往線性漸變指定了起點(diǎn)和終點(diǎn)，徑向漸變則指定了開始的結(jié)束園的圓心和半徑。線性漸變createLinearGradient()方法用來創(chuàng)建線性的漸變對(duì)象。漸變可用于填充矩形、圓形、線條、文本等等。語法：context.createLinearGradient(x0,y0,x1,y1);參數(shù)值：參數(shù)描述x0漸變開始點(diǎn)的x坐標(biāo)y0漸變開始點(diǎn)的y坐標(biāo)x1漸變結(jié)束點(diǎn)的x坐標(biāo)y1漸變結(jié)束點(diǎn)的y坐標(biāo)線性漸變實(shí)例（繪制一個(gè)矩形，并用放射狀/圓形漸變進(jìn)行填充）：varc=document.getElementById(myC

59、anvas);varctx=c.getContext(2d);vargrd=ctx.createRadialGradient(75,50,5,90,60,100);/使用addColorStop方法指定各個(gè)位置的顏色grd.addColorStop(0,red);grd.addColorStop(1,white);/Fillwithgradientctx.fillStyle=grd;ctx.fillRect(10,10,150,100);徑向漸變createLinearGradient()方法用來創(chuàng)建放射狀/圓形漸變對(duì)象。漸變可用于填充矩形、圓形、線條、文本等等。語法：context.crea

60、teRadialGradient(x0,y0,r0,x1,y1,r1);參數(shù)值：參數(shù)描述x0漸變的開始圓的x坐標(biāo)y0漸變的開始圓的y坐標(biāo)r0開始圓的半徑x1漸變的結(jié)束圓的x坐標(biāo)y1漸變的結(jié)束圓的y坐標(biāo)r1結(jié)束圓的半徑徑向漸變實(shí)例（定義一個(gè)從黑到紅再到白的漸變，作為矩形的填充樣式：）：varc=document.getElementById(myCanvas);varctx=c.getContext(2d);varmy_gradient=ctx.createLinearGradient(0,0,170,0);/使用addColorStop方法指定各個(gè)位置的顏色my_gradient.addCol