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

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

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

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

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

5、謹(jǐn)?shù)拇a會(huì)讓他的頁(yè)面破綻百出，問(wèn)題驗(yàn)證。不嚴(yán)謹(jǐn)?shù)拇a會(huì)讓他的頁(yè)面破綻百出，問(wèn)題不斷，一個(gè)好的方法就是不斷，一個(gè)好的方法就是邊開(kāi)發(fā)邊驗(yàn)證，驗(yàn)證，邊開(kāi)發(fā)邊驗(yàn)證，驗(yàn)證，驗(yàn)證，再驗(yàn)證！。驗(yàn)證，再驗(yàn)證！。前端開(kāi)發(fā)工具三、html開(kāi)展簡(jiǎn)介第一階段：HTMLHyperText Markup Language超文本標(biāo)志言語(yǔ)第一版在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ā)布，基于嚴(yán)厲的HTML 4.01語(yǔ)法，是國(guó)際規(guī)范化組織和國(guó)際電工委員會(huì)的規(guī)范。特點(diǎn)：開(kāi)展歷史緣由導(dǎo)致松散語(yǔ)義，規(guī)范化程度不夠。比較適宜新手上手，一些簡(jiǎn)單的脫漏、錯(cuò)誤不影響頁(yè)面展現(xiàn)。第二階段：XHTML XHTML 1.0 用XML句法來(lái)規(guī)范HTML4。 比如doctype類(lèi)型選擇、標(biāo)簽屬性必需小寫(xiě)、屬性值要用引號(hào)、img、br、meta標(biāo)簽自閉合等。分類(lèi)款式和內(nèi)容。廢除、粗體和斜體等XHTML 1.1 頁(yè)面必需用新的MIME type來(lái)分發(fā)。這個(gè)規(guī)范并沒(méi)有很多人采用。XHTML 2.0 試圖發(fā)明一個(gè)實(shí)際純粹的標(biāo)志言語(yǔ)，不思索向前兼容。最終夭折。XHTML是學(xué)術(shù)派的w3

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

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

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

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

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

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

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

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

15、ss代碼中很長(zhǎng)很長(zhǎng)代碼中很長(zhǎng)很長(zhǎng)的層級(jí)承繼選擇器。的層級(jí)承繼選擇器。書(shū)寫(xiě)書(shū)寫(xiě)csscss代碼前思索好款式代碼的重用。代碼前思索好款式代碼的重用。7.7.不要運(yùn)用內(nèi)聯(lián)不要運(yùn)用內(nèi)聯(lián)javascriptjavascript和內(nèi)聯(lián)和內(nèi)聯(lián)csscss款式雖然有時(shí)很方款式雖然有時(shí)很方便便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方式類(lèi)似，優(yōu)點(diǎn)是可以在css中再次引入其他款式表，但是加載較晚、不能用dom控制款式和兼容性不好。8.8.應(yīng)對(duì)應(yīng)對(duì)ie6ie6，運(yùn)用單獨(dú)的，運(yùn)用單獨(dú)的csscss代碼。下面代碼只需在代碼。下面代碼只需在ie6ie6及及更低版本閱讀器時(shí)才有用更低版本閱讀器時(shí)才有用 link rel=stylesheet type=text/css media=screen href=path/to/ie.css / 9.9.運(yùn)用運(yùn)用reset.cssreset.css。閱讀器對(duì)于元素有默許。閱讀器對(duì)于元素有默許csscss參數(shù)，且參數(shù)，且能夠不一致。需求一致對(duì)常用元素常用

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

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