主要交流以下5個方面的內(nèi)容ppt課件

1、主要交流以下5個方面的內(nèi)容：什么是前端開發(fā)技術(shù)前端開發(fā)需求掌握的技藝html開展簡介前端開發(fā)根本流程前端開發(fā)的一些建議一、什么是前端技術(shù)前端技術(shù)包括JavaScript、ActionScript、CSS、HTML等“傳統(tǒng)技術(shù),Adobe RIA、Google Gears等新技術(shù)，以及概念性較強的交互式設(shè)計,藝術(shù)性較強的視覺設(shè)計等等。 通俗來講：經(jīng)過閱讀器到用戶端計算機的統(tǒng)稱為前端技術(shù)，相反存貯于效力器端的統(tǒng)稱為后端技術(shù)。前端開發(fā)任務(wù)通常需求視覺設(shè)計師、交互設(shè)計師和網(wǎng)頁設(shè)計師相互配合完成，當(dāng)然，也可以一人兼任多種角色。前端開發(fā)主要有兩大方向：前端開發(fā)主要有兩大方向：1.網(wǎng)頁設(shè)計重構(gòu)：根據(jù)設(shè)計圖用

2、網(wǎng)頁設(shè)計重構(gòu)：根據(jù)設(shè)計圖用HTML和和CSS完完成頁面制造與視覺設(shè)計師和交互設(shè)計師配合成頁面制造與視覺設(shè)計師和交互設(shè)計師配合2.web前端開發(fā)：主要擔(dān)任交互設(shè)計。根據(jù)網(wǎng)站的前端開發(fā)：主要擔(dān)任交互設(shè)計。根據(jù)網(wǎng)站的可用性分析和用戶反響改良網(wǎng)站的前端優(yōu)化。利可用性分析和用戶反響改良網(wǎng)站的前端優(yōu)化。利用用javascript，flash actionscript3.0結(jié)合結(jié)合html+css技術(shù)開發(fā)出用戶體驗更好的網(wǎng)站頁面。技術(shù)開發(fā)出用戶體驗更好的網(wǎng)站頁面。二、前端開發(fā)所需技藝和工具 知曉HTML/XHTML、CSS等網(wǎng)頁制造技術(shù)，熟習(xí)頁面架構(gòu)和規(guī)劃盒模型，定位，浮動，段落、圖片、文字的屬性控制，閱讀

3、器bug熟習(xí)W3C規(guī)范，對表現(xiàn)與數(shù)據(jù)分別、Web語義化等有深化了解 至此即可實現(xiàn)靜態(tài)頁面開發(fā)知曉JavaScript、Ajax等Web開發(fā)技術(shù) 對算法、數(shù)據(jù)構(gòu)造以及后臺開發(fā)(C/C+/PHP/Java等)有一定了解 可實現(xiàn)交互、動畫等功能前端開發(fā)工具1.1.選擇適宜的選擇適宜的IDEIDE雖然用記事本也可以編輯網(wǎng)頁，但是強大的提示和分色雖然用記事本也可以編輯網(wǎng)頁，但是強大的提示和分色顯示功能、自動補全等一系列功能會使我們的開發(fā)更顯示功能、自動補全等一系列功能會使我們的開發(fā)更便利。便利。IntelliJ IDEAIntelliJ IDEA、SublimeSublime、Notepad+Notep

4、ad+、InTypeInType、E-E-Text EditorText Editor、AptanaAptana、 DreamWeaver DreamWeaver 2.2.選擇適宜的閱讀器和調(diào)試工具選擇適宜的閱讀器和調(diào)試工具 引薦運用火狐和引薦運用火狐和firebugfirebug插件插件3.3.運用運用 驗證工具：火狐插件驗證工具：火狐插件Web Developer ToolbarWeb Developer Toolbar。具有非常強大的分析調(diào)實驗證功能具有非常強大的分析調(diào)實驗證功能在編碼過程中隨時運用在編碼過程中隨時運用HTMLHTML規(guī)范驗證和規(guī)范驗證和“CSS“CSS規(guī)范規(guī)范驗證。不嚴

5、謹?shù)拇a會讓他的頁面破綻百出，問題驗證。不嚴謹?shù)拇a會讓他的頁面破綻百出，問題不斷，一個好的方法就是不斷，一個好的方法就是邊開發(fā)邊驗證，驗證，邊開發(fā)邊驗證，驗證，驗證，再驗證！。驗證，再驗證！。前端開發(fā)工具三、html開展簡介第一階段：HTMLHyperText Markup Language超文本標志言語第一版在1993年6月HTML 2.02019年11月作為RFC 1866發(fā)布，HTML 3.22019年1月14日，W3C引薦規(guī)范HTML 4.02019年12月18日，W3C引薦規(guī)范HTML 4.012019年12月24日，W3C引薦規(guī)范ISO/IEC 15445:2000“ISO HT

6、ML2000年5月15日發(fā)布，基于嚴厲的HTML 4.01語法，是國際規(guī)范化組織和國際電工委員會的規(guī)范。特點：開展歷史緣由導(dǎo)致松散語義，規(guī)范化程度不夠。比較適宜新手上手，一些簡單的脫漏、錯誤不影響頁面展現(xiàn)。第二階段：XHTML XHTML 1.0 用XML句法來規(guī)范HTML4。 比如doctype類型選擇、標簽屬性必需小寫、屬性值要用引號、img、br、meta標簽自閉合等。分類款式和內(nèi)容。廢除、粗體和斜體等XHTML 1.1 頁面必需用新的MIME type來分發(fā)。這個規(guī)范并沒有很多人采用。XHTML 2.0 試圖發(fā)明一個實際純粹的標志言語，不思索向前兼容。最終夭折。XHTML是學(xué)術(shù)派的w3

7、c開發(fā)的，只是用XML來規(guī)范HTML，試圖用XML來抹平HTML設(shè)計的一些缺陷。沒有一致的容錯體系導(dǎo)致不同閱讀器容錯機制不同，頁面千差萬別，甚至不能正常任務(wù)。第三階段：HTML5優(yōu)點： 語法較弱，編寫簡單 向后兼容了html4和xhtml1.0. HTML5由網(wǎng)絡(luò)公司Google, Adobe和閱讀器廠商Moz, Opera, Apple開發(fā)的，對HTML的容錯方法做出一致定義，這樣無論是什么閱讀器，只需根據(jù)規(guī)范實現(xiàn)容錯方法，即使網(wǎng)頁出現(xiàn)缺陷，其渲染結(jié)果也是完全一樣的。網(wǎng)頁設(shè)計師在遷移到HTML5的時候，根本可以不做任何事情。以前即使存在一定缺陷的非規(guī)范網(wǎng)頁也能正常而且同一地被渲染出來。提供了

8、一系列語義更明晰的標簽。 多設(shè)備 跨平臺，便于移植交互性更強。更多的系統(tǒng)JS API。比如新增表單屬性、表單驗證、 多媒體支持、canvas, websocket , webstorage等等。游戲開發(fā)，挪動開發(fā)等等。經(jīng)過調(diào)用 html5.js 可以使 ie6,7,8 支持 html5 標簽。 Html5缺陷還在開展過程中，有些新特性缺乏一致的閱讀器支持四、前端開發(fā)根本流程進展需求分析，設(shè)計UI界面構(gòu)建HTML框架構(gòu)造編寫外部款式編寫外部js文件頁面細節(jié)的完善和優(yōu)化頁面兼容性和js效果測試及修正上傳效力器及后期維護五、前端開發(fā)的一些建議1.1.制定詳細的開發(fā)規(guī)范，無論是一個人開發(fā)還是團隊開發(fā)。

9、制定詳細的開發(fā)規(guī)范，無論是一個人開發(fā)還是團隊開發(fā)。目錄規(guī)范：在不改動現(xiàn)有構(gòu)造的前提下，以最少的層次提供目錄規(guī)范：在不改動現(xiàn)有構(gòu)造的前提下，以最少的層次提供最明晰簡便的訪問構(gòu)造。最明晰簡便的訪問構(gòu)造。命名規(guī)范：以最少的字母到達最容易了解的意義。盡量用英命名規(guī)范：以最少的字母到達最容易了解的意義。盡量用英語翻譯、下劃線銜接進展標示區(qū)分，駝峰式命名法。語翻譯、下劃線銜接進展標示區(qū)分，駝峰式命名法。htmlhtml書寫規(guī)范。一致文檔類型聲明、一致言語聲明和字符編書寫規(guī)范。一致文檔類型聲明、一致言語聲明和字符編碼，添加一致的頭部信息。碼，添加一致的頭部信息。csscss書寫規(guī)范：書寫規(guī)范：JsJs書寫規(guī)

10、范書寫規(guī)范注釋規(guī)范注釋規(guī)范開發(fā)工具和測試工具商定開發(fā)工具和測試工具商定更多開發(fā)規(guī)范例如詳見：更多開發(fā)規(guī)范例如詳見：chenchaojun/f2e/Front-end-development-process-and-chenchaojun/f2e/Front-end-development-process-and-specification.htmlspecification.html比如采用哪個css rest，有些屬性bug的處置方法、款式命名規(guī)那么、class和id的運用、圖片背景能否采用sprite和如何劃分模塊、CSS屬性書寫順序商定等。需求引入的js庫，變量、類、函數(shù)命名規(guī)那么，存在

11、兼容性問題的方法的處置原那么，js文件與html分別要求、注釋規(guī)那么等。我的感受：這些規(guī)范商定有些看似是無關(guān)緊要，有些甚至是可有可無的，在一人開發(fā)時覺得作用不是非常明顯，但是在多人開發(fā)、團隊開發(fā)的過程中就非常重要了。開場學(xué)習(xí)時我們能夠不清楚哪些是需求規(guī)范的東西、該如何去規(guī)范，但是只需我們知道哪些應(yīng)該規(guī)范、知道如何規(guī)范，哪怕只需一點點，也要盡量去做好規(guī)范。養(yǎng)成習(xí)慣積累的多了，才干在大的工程開發(fā)中做的更好。另外這一條是個總的規(guī)那么，后面是一些詳細的建議。2.2.養(yǎng)成好習(xí)慣，不要怕費事，完善頁面構(gòu)造細節(jié)。養(yǎng)成好習(xí)慣，不要怕費事，完善頁面構(gòu)造細節(jié)。HTML5頁面根本構(gòu)造/設(shè)置文檔主言語My Blog另

12、外，html5新增了很多語義化的標志，比如header，nav，footer，aside，article，section等，盡量運用這些新標簽，防止?jié)M世界的div。此處不區(qū)分大小寫，引號也可有可無，但是盡量一致運用一種嚴厲的格式.Htmlbodyhead這些元素雖然可以省略，解析時閱讀器會自動加上，但是ie有些版本要求必需有，并且這樣做會使他人看不懂他的代碼。3.3.按照按照XHTMLXHTML要求規(guī)范頁面標志語法。便于團隊交流和要求規(guī)范頁面標志語法。便于團隊交流和后期維護，加強代碼可讀性。比如閉合一切標簽，標后期維護，加強代碼可讀性。比如閉合一切標簽，標簽屬性小寫、屬性值要用引號、簽屬性小寫

13、、屬性值要用引號、imgimg、brbr、metameta標簽標簽自閉合等。自閉合等。4. 4. 學(xué)習(xí)一切標簽的特點，以及嵌套關(guān)系，便于優(yōu)化構(gòu)造。學(xué)習(xí)一切標簽的特點，以及嵌套關(guān)系，便于優(yōu)化構(gòu)造。比如：比如：li li 必需包含在在必需包含在在ul ul或或ol ol中，中，spanspan作為行內(nèi)標簽盡作為行內(nèi)標簽盡量不要用來包含其他塊元素，量不要用來包含其他塊元素，sectionsection包含在包含在articlearticle中中等等等等尤其要留意檢查尤其要留意檢查html5html5新標簽和屬性的閱讀器兼容新標簽和屬性的閱讀器兼容性，盡量不用廢棄的標簽。性，盡量不用廢棄的標簽。5.5

14、.堅持內(nèi)容與款式分別的原那么。在內(nèi)容構(gòu)造完成之前最堅持內(nèi)容與款式分別的原那么。在內(nèi)容構(gòu)造完成之前最好不要參與款式代碼。千萬不要寫一點代碼加一點款式，好不要參與款式代碼。千萬不要寫一點代碼加一點款式，缺乏全局觀念。最好是按照模塊來寫缺乏全局觀念。最好是按照模塊來寫CSSCSS代碼，層級關(guān)代碼，層級關(guān)系明確，構(gòu)造更明晰。比如：系明確，構(gòu)造更明晰。比如：6.6.運用一致的運用一致的id id和和classclass定義格式。用語義起名字定義格式。用語義起名字; ;根據(jù)內(nèi)根據(jù)內(nèi)容展現(xiàn)款式來確定哪些標簽用一樣的類，哪些用獨立的容展現(xiàn)款式來確定哪些標簽用一樣的類，哪些用獨立的id id。防止。防止cssc

15、ss代碼中很長很長代碼中很長很長的層級承繼選擇器。的層級承繼選擇器。書寫書寫csscss代碼前思索好款式代碼的重用。代碼前思索好款式代碼的重用。7.7.不要運用內(nèi)聯(lián)不要運用內(nèi)聯(lián)javascriptjavascript和內(nèi)聯(lián)和內(nèi)聯(lián)csscss款式雖然有時很方款式雖然有時很方便便External style sheet * Internal style sheet hr color:sienna; p margin-left:20px; body background-image:url(images/back40.gif); * Inline style This is a paragraph.

16、還有Import方式比較少用，與link方式類似，優(yōu)點是可以在css中再次引入其他款式表，但是加載較晚、不能用dom控制款式和兼容性不好。8.8.應(yīng)對應(yīng)對ie6ie6，運用單獨的，運用單獨的csscss代碼。下面代碼只需在代碼。下面代碼只需在ie6ie6及及更低版本閱讀器時才有用更低版本閱讀器時才有用 link rel=stylesheet type=text/css media=screen href=path/to/ie.css / 9.9.運用運用reset.cssreset.css。閱讀器對于元素有默許。閱讀器對于元素有默許csscss參數(shù)，且參數(shù)，且能夠不一致。需求一致對常用元素常用

17、能夠不一致。需求一致對常用元素常用csscss參數(shù)手動參數(shù)手動設(shè)定一致效果。開場可以運用已有的，后面可以根據(jù)設(shè)定一致效果。開場可以運用已有的，后面可以根據(jù)需求本人定義。需求本人定義。Normalize.css:Normalize.css:necolas.github.io/normalize.css/necolas.github.io/normalize.css/10.10.給一切圖片加上給一切圖片加上“alt“alt屬性屬性11.11.將一切外部將一切外部csscss文件放入文件放入headhead標簽內(nèi)，盡能夠減少外標簽內(nèi)，盡能夠減少外部部CSSCSS文件數(shù)量。這樣可以加快頁面的渲染速度。

18、文件數(shù)量。這樣可以加快頁面的渲染速度。12.javascript12.javascript文件放在底部文件放在底部,前面。根據(jù)情況，前面。根據(jù)情況，跟頁面展現(xiàn)無關(guān)的盡量放在下面，提高加載速度跟頁面展現(xiàn)無關(guān)的盡量放在下面，提高加載速度13.13.緊縮代碼。緊縮代碼。js js中不要運用中不要運用/./.這種單行注釋方式這種單行注釋方式14.14.背景圖片盡量運用背景圖片盡量運用css spritecss sprite技術(shù)，減少技術(shù)，減少httphttp懇求。懇求。/*文件用途作者姓名制造日期、版本等信息*/15.15.在公共組件和獨立頁面前面加上注釋闡明信息。在公共組件和獨立頁面前面加上注釋闡明信息。還是不要怕費事！今天的費事是為了以后防止更大還是不要怕費事！今天的費事是為了以后防止更大的費事的費事16.16.不要運用不要運用dwdw等工具的設(shè)計視圖等自動生成代碼工等工具的設(shè)計視圖等自動生成代碼工具具更多細節(jié)請參考更多細節(jié)請參考: :給給HTMLHTML初學(xué)者的