web前端開發(fā)實(shí)訓(xùn)總結(jié)web前端開發(fā)實(shí)訓(xùn)總結(jié)「篇一」做了整一年web前端開發(fā)，對(duì)這個(gè)職業(yè)感觸頗多。這是一個(gè)新的職業(yè)，入門相對(duì)后臺(tái)的開發(fā)人員較低，會(huì)一些基本的技術(shù)就可以了，如：html、css、js等。但是，隨著開發(fā)時(shí)間的增長你就會(huì)發(fā)現(xiàn)自己很快的就會(huì)進(jìn)入一個(gè)瓶頸，可能會(huì)錯(cuò)誤的認(rèn)為，做前端開發(fā)不過如此?？墒?，如果你靜下心來在回頭看你寫的代碼，你會(huì)發(fā)現(xiàn)之前需求的實(shí)現(xiàn)方式并不是最好的，舉個(gè)最簡單的例子，有沒有使用jquery的連綴式編程。如：$(#id).css({color:red});$(#id).show可以寫成，$(#id).css({color:red}).show不要小看這次小小的優(yōu)化，實(shí)力都是慢慢積累的。上面只是一個(gè)簡單舉例，要說明的是，雖然這個(gè)職業(yè)入門比較低，但是每一次提高都是艱難的。幾乎每個(gè)前臺(tái)工程師都是自學(xué)成才，因?yàn)榕Ｈ吮緛砭蜕?，難得遇見，就算遇到一個(gè)你也不一定就有機(jī)會(huì)能跟著他學(xué)習(xí)。所以在自學(xué)過程是坎坷的，甚至都不知道改如何進(jìn)步，當(dāng)然本人也在努力中，呵呵。分享一點(diǎn)經(jīng)驗(yàn)：1.千萬注意寫代碼、和命名規(guī)范（也許n久之后或者項(xiàng)目大的時(shí)候這才是重中之重）。2.html的文檔結(jié)構(gòu)。好的文檔結(jié)構(gòu)會(huì)讓你寫css，js變的簡單合理（勝過好的代碼實(shí)現(xiàn)方式）。3.盡量盡自己的水平優(yōu)化代碼html，css，js（每一次優(yōu)化都是提高）。4.多去關(guān)組網(wǎng)站性能優(yōu)化的方式（最后網(wǎng)站的訪問速度和用戶體驗(yàn)是證明你能力的時(shí)候）。個(gè)人目前的水平有限，就分享這么多吧。學(xué)習(xí)經(jīng)驗(yàn)：個(gè)人覺得，盡量看書加上實(shí)際操作來學(xué)習(xí)，因?yàn)閺臅蠈W(xué)習(xí)東西比較系統(tǒng)，學(xué)到的東西是系統(tǒng)的而不是一片一片或者一點(diǎn)一點(diǎn)的。最重要的是要去驗(yàn)證書上寫的跟實(shí)戰(zhàn)的結(jié)果進(jìn)行對(duì)比，你會(huì)發(fā)現(xiàn)實(shí)際可能還真不一定是那樣的。等系統(tǒng)學(xué)習(xí)完之后，再要提高可能就要找論壇，博客等針對(duì)某個(gè)點(diǎn)進(jìn)行突破，后面的成長還有很長。個(gè)人能力不到那個(gè)地方不在妄加說辭。如果按照這樣的方式來學(xué)習(xí)，那么開什么書就是最重要的了，看一本好的書可以使你恍然大悟，看一本垃圾的書可能連作者都不知道他寫的是什么。個(gè)人覺得“圖靈”系列的書籍都是不錯(cuò)的，清晰、透徹，比較適合我們來學(xué)習(xí)，比如：javascript高級(jí)程序設(shè)計(jì),精通html與css設(shè)計(jì)模式等。記得，每個(gè)web前臺(tái)開發(fā)工程師都應(yīng)該具有很強(qiáng)的想象力，發(fā)揮想象力，并去驗(yàn)證自己的想法才會(huì)提高。web前端開發(fā)實(shí)訓(xùn)總結(jié)「篇二」20xx年不知不覺已經(jīng)在我們手中流逝，也許是因?yàn)槊β?，也許是因?yàn)槌鋵?shí)，所有覺得時(shí)間過得很快。來到來到我們的這個(gè)積極向上的長沙seo搜遇網(wǎng)絡(luò)已經(jīng)有2年多了。在工作中，經(jīng)歷了很多歡快困難的時(shí)刻，結(jié)識(shí)了一批工作上的好同事，生活上的好朋友，領(lǐng)悟了很多新技能，感謝領(lǐng)導(dǎo)給了我展示的空間。在20xx年的這段時(shí)間里，通過自身的不懈努力，在工作上取得了一定的成果，但也存在了很多不足之處。回首20xx年，現(xiàn)在將web前端開發(fā)工作總結(jié)一下。從去年開始，我們項(xiàng)目組就接手了OA系統(tǒng)開發(fā)，由于框架的前端樣式老舊，我們打算將框架的樣式全面改版，包括樣式風(fēng)格，用戶體驗(yàn)等多方面著手處理。一、框架采用樣式風(fēng)格一個(gè)系統(tǒng)好不好，第一映像很重要，就像別人對(duì)你的認(rèn)識(shí)是從第一印象開始的，這種第一印象一且形成將很難改變。研究表明，當(dāng)一個(gè)人見到另一個(gè)人時(shí)第一印象往往是在前3秒確定的，而且是在沒有任何語言交流的前3秒，因?yàn)閯e人已從你的形象氣質(zhì)窺見了你的基本特征。在應(yīng)酬中，如果第一印象不好，想要挽回，就要做很大的努力，所以，一定要特別注意第一印象。所以系統(tǒng)的第一印象也是非常重要的。我們采用layui樣式風(fēng)格，在layui上加以個(gè)性化樣式的修改，讓網(wǎng)站第一印象看上去大氣，清晰，簡潔。在中間我們付出了很多努力與堅(jiān)持，才能讓我們現(xiàn)在的OA系統(tǒng)看上去簡約而不簡單。二、提升用戶體驗(yàn)操作1、我們采用了簡單易懂的網(wǎng)站架構(gòu)，讓用戶看到網(wǎng)站界面就知道如何操作，將每個(gè)用戶桌面做自定義操作，讓每個(gè)用戶都有自己個(gè)性化的桌面。2、系統(tǒng)采用方便明了的操作方式，系統(tǒng)都是為了迎合用戶，如果操作界面太麻煩，用戶可能直接放棄，所以需要將系統(tǒng)的設(shè)置盡量人性化。3、系統(tǒng)采用用戶引導(dǎo)方式的界面，一個(gè)步驟接著下一個(gè)步驟，讓用戶不知不覺中處理好工作上的任務(wù)。三、web前端開發(fā)存在不足雖然網(wǎng)站整體樣式風(fēng)格已經(jīng)調(diào)整過來，由于之前系統(tǒng)框架原因，網(wǎng)站樣式調(diào)整起來十分吃力，有部分樣式只能做風(fēng)格上的調(diào)整，離預(yù)期效果稍有偏差。在工作時(shí)間很倉促的情況下，事情多了，就一定要有詳實(shí)而主次分明的計(jì)劃，哪些需要立即完成，哪些可以緩緩加班完成，今年在計(jì)劃上自己進(jìn)步很大，但在這方面還有很大的優(yōu)化空間。20xx年web前端開發(fā)工作計(jì)劃在新的一年來臨之際，我希望我們的OA系統(tǒng)做得更好，繼續(xù)完善系統(tǒng)整體前端樣式風(fēng)格，用戶體驗(yàn)。不斷加強(qiáng)個(gè)人web前端開發(fā)的技能，提高工作效率，揚(yáng)長避短，發(fā)奮工作，克難攻堅(jiān)，做好web前端開發(fā)的工作計(jì)劃，力求把OA系統(tǒng)做到更好。也希望我們OA團(tuán)隊(duì)給公司帶來更大的價(jià)值，祝我們搜遇網(wǎng)絡(luò)公司成功上市！在新的一年里大展宏圖。web前端開發(fā)實(shí)訓(xùn)總結(jié)「篇三」一、實(shí)訓(xùn)目的通過對(duì)java語言、JavaWeb、Oracle數(shù)據(jù)庫應(yīng)用設(shè)計(jì)及SQL語言的復(fù)習(xí)和鍛煉，并且通過使用MyEclipse開發(fā)平臺(tái)設(shè)計(jì)庫存管理系統(tǒng)項(xiàng)目，以達(dá)到充分熟悉開發(fā)平臺(tái)及其應(yīng)用設(shè)計(jì)。同時(shí)掌握并實(shí)踐軟件項(xiàng)目設(shè)計(jì)規(guī)范及其開發(fā)流程：需求分析、概要設(shè)計(jì)、詳細(xì)設(shè)計(jì)、代碼編寫、系統(tǒng)測試及軟件手冊(cè)編寫，以便提前適應(yīng)軟件公司開發(fā)流程、環(huán)境和工作要求進(jìn)一步了解java開發(fā)的相關(guān)知識(shí)，掌握java開發(fā)的基本技術(shù)，豐富java開發(fā)的實(shí)戰(zhàn)經(jīng)驗(yàn)。學(xué)習(xí)SQL的基礎(chǔ)知識(shí)及正確的運(yùn)用方法，和有用的相關(guān)技術(shù)，提高自己的工作效率。通過實(shí)訓(xùn)，培養(yǎng)我們綜合運(yùn)用已學(xué)知識(shí)Java語言的面向?qū)ο缶幊棠芰?；培養(yǎng)我們動(dòng)手能力；培養(yǎng)我們良好編程規(guī)范、編程方法；以便能較全面地理解、掌握和綜合運(yùn)用所學(xué)的知識(shí)，提高自身的編程能力；增強(qiáng)自己的團(tuán)隊(duì)協(xié)作意識(shí)，了解軟件開發(fā)的思考角度和主要流程。為畢業(yè)之后能夠更快地進(jìn)入工作狀態(tài)并且能夠更好的工作，打好一定的基礎(chǔ)。二、實(shí)訓(xùn)主要流程1、公司管理規(guī)則，程序員素質(zhì)，程序員編碼規(guī)范；2、需求開發(fā)與管理；3、面向?qū)ο蠓治雠c設(shè)計(jì)，面向?qū)ο缶幊痰奶匦裕?、javaSE、javaWeb、頁面設(shè)計(jì)—JSP頁面；5、數(shù)據(jù)庫設(shè)計(jì)、SQL應(yīng)用；6、軟件需求分析與設(shè)計(jì)；7、項(xiàng)目實(shí)戰(zhàn)；三、實(shí)訓(xùn)內(nèi)容1.Oracle數(shù)據(jù)庫數(shù)據(jù)庫是數(shù)據(jù)的結(jié)構(gòu)化集合。計(jì)算機(jī)是處理大量數(shù)據(jù)的理想工具，因此，數(shù)據(jù)庫管理系統(tǒng)在計(jì)算方面扮演著關(guān)鍵的中心角色，或是作為獨(dú)立的實(shí)用工具，或是作為其他應(yīng)用程序的組成部分。Oracle服務(wù)器還有一套實(shí)用的特性集合，這些特性是通過與我們用戶的密切合作而開發(fā)的。在我們的基準(zhǔn)測試主頁上，給出了Oracle服務(wù)器和其他數(shù)據(jù)庫管理器的比較結(jié)果。Oracle服務(wù)器最初是為處理大型數(shù)據(jù)庫而開發(fā)的，與已有的解決方案相比，它的速度更快，多年以來，它已成功用于眾多要求很高的生產(chǎn)環(huán)境。盡管Oracle始終在不斷發(fā)展，但目前Oracle服務(wù)器已能提供豐富和有用的功能。它具有良好的連通性、速度和安全性，這使的Oracle十分適合于訪問Internet上的數(shù)據(jù)庫。2.java與SQL的應(yīng)用。Java語言是編寫數(shù)據(jù)庫應(yīng)用程序的杰出語言之一，它提供了方便訪問數(shù)據(jù)的技術(shù)。利用Java語言中的JDBC技術(shù)，用戶能方便地開發(fā)出基于Web網(wǎng)頁的數(shù)據(jù)庫訪問程序，從而擴(kuò)充網(wǎng)絡(luò)應(yīng)用功能。JDBC（JavaDatabaseConnectivity，Java數(shù)據(jù)庫連接）是一種用于執(zhí)行SQL語句的JavaAPI，可以為多種關(guān)系數(shù)據(jù)庫提供統(tǒng)一的訪問接口。JDBC由一組用Java語言編寫的類與接口組成，通過調(diào)用這些類和接口所提供的方法，用戶能夠以一致的方式連接多種不同的數(shù)據(jù)庫系統(tǒng)（如Access、SQLServer20xx、Oracle、Sybase等），進(jìn)而可使用標(biāo)準(zhǔn)的SQL語言來存取數(shù)據(jù)庫中的數(shù)據(jù)，而不必再為每一種數(shù)據(jù)庫系統(tǒng)編寫不同的Java程序代碼。web前端開發(fā)實(shí)訓(xùn)總結(jié)「篇四」進(jìn)入xxweb班近一個(gè)月了，從一無所知的小白到現(xiàn)在也完成了京東詳情頁的一個(gè)小項(xiàng)目。學(xué)習(xí)過程中除了偶爾遇到困難，總體還算順利。在這里主要想分享自己以一個(gè)文科生——零基礎(chǔ)學(xué)員的角度來學(xué)習(xí)web前端開發(fā)的感受。由于之前在大學(xué)里是學(xué)的旅游專業(yè)，和計(jì)算機(jī)毫無關(guān)系，來到xx時(shí)對(duì)自己有些半信半疑。不少人甚至懷疑xx是行騙機(jī)構(gòu)。在做了全面的了解之后，我勸服家人同意我來這里學(xué)習(xí)。另一方面，我向老師咨詢了自己學(xué)習(xí)的方向，考慮到自己從文科到計(jì)算機(jī)專業(yè)跨度較大的轉(zhuǎn)變，我在Java與web之間選擇了web。相對(duì)于Java，web的學(xué)習(xí)更基礎(chǔ)，容易入手，就業(yè)的機(jī)會(huì)也非常多。Web開班第一天，老師即從網(wǎng)頁基礎(chǔ)、HTML入手，攫取重點(diǎn)，給我們介紹了它的相關(guān)知識(shí)。我們主要學(xué)習(xí)了HTML5，里面有很多的新特性且時(shí)下較為流行。它相當(dāng)于一個(gè)網(wǎng)頁界面的宏觀架構(gòu)。如果把一個(gè)網(wǎng)頁的實(shí)現(xiàn)比作是一座建筑的建造過程，那么HTML即是這座建筑里的鋼筋混泥土，搭建起整個(gè)建筑的框架、承重。之后，我們又學(xué)習(xí)了CSS基礎(chǔ)樣式，仍然借用上面的比喻，CSS則相當(dāng)于建筑里各個(gè)房間的不同結(jié)構(gòu)，它們使得這座建筑更加的多樣化。且相對(duì)于HTML，它更加的復(fù)雜、多樣化，呈現(xiàn)的效果也具有更多的可能性。老師向我們推薦了《CSS禪意花園》這本書，里面列舉了豐富且多種多樣的CSS樣式。作為今后可能成為的優(yōu)秀前端工程師，僅僅學(xué)習(xí)自己內(nèi)部的知識(shí)是遠(yuǎn)遠(yuǎn)不夠的。因此，第一個(gè)月中我們也學(xué)習(xí)了UI中PS繪圖制作基礎(chǔ)，這對(duì)于一個(gè)前端來說也是非常重要的，在今后的工作中，我們可能會(huì)面對(duì)各種各樣的問題，如果掌握部分PS尤其是切圖技術(shù)，在和UI的接觸中可以減少很多不必要的繁瑣工作?？傊?，作為一個(gè)前端工程師，我們所要掌握的知識(shí)是全面的，當(dāng)我們寫代碼時(shí)的思維是縝密的。HTML和CSS是基礎(chǔ)中的基礎(chǔ)。之后我們會(huì)學(xué)習(xí)更多的JavaScript相關(guān)知識(shí)和其他，希望自己在這過程中仍能保持謙遜的的心態(tài)，去學(xué)習(xí)前人留下的珍貴寶藏。web前端開發(fā)實(shí)訓(xùn)總結(jié)「篇五」這里跟大家談?wù)剛€(gè)人對(duì)WEB前端開發(fā)的一些經(jīng)驗(yàn)（當(dāng)然都是個(gè)人的一些理解，有什么地方說的欠妥或不對(duì)的地方還請(qǐng)包含和指正），這里我就從WEB標(biāo)準(zhǔn)開始吧。WEB標(biāo)準(zhǔn)是什么？說是WEB標(biāo)準(zhǔn)，不過我這里主要是對(duì)XHTML1.1和CSS2.1的一些經(jīng)驗(yàn)總結(jié)。因?yàn)閃EB含蓋的內(nèi)容實(shí)在是太多了，“WEB標(biāo)準(zhǔn)”是一系列標(biāo)準(zhǔn)的總稱，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以這里要跟大家指出來一下，WEB標(biāo)準(zhǔn)不是我們所說的DIV+CSS。剛剛上面提到了——DIV+CSS，這里要說明下，這樣說其實(shí)是不正確的。DIV+CSS準(zhǔn)確的說法（個(gè)人的理解）應(yīng)該是：采用W3C推薦的WEB標(biāo)準(zhǔn)中的XHTML1.1結(jié)合CSS2.0樣式表制作頁面的方法，DIV應(yīng)該指的是XHTML標(biāo)簽，而CSS顯示是指的CSS樣式表了。采用WEB標(biāo)準(zhǔn)開發(fā)的好處？那么W3C為什么會(huì)推薦這樣的頁面制作方法呢？下面我們就簡單的看看采用WEB標(biāo)準(zhǔn)開發(fā)（個(gè)人理解的）相對(duì)以前TABLE布局的優(yōu)勢有哪些？1、節(jié)約運(yùn)營成本看看我們的WEB標(biāo)準(zhǔn)制作方法是如何做到的？采用WEB標(biāo)準(zhǔn)制作，我們可以做到表現(xiàn)很形式的分離，我們用XHTML來表現(xiàn)（數(shù)據(jù)），用CSS來控制（頁面元素呈現(xiàn)的）形式。寫的好的頁面，XHTML代碼中基本上都是用戶要看的數(shù)據(jù)，還其他修飾性的東西，全部由我們的CSS來控制。這樣一來我們的（XHTML）頁面的體積就大大減小了，這樣你在帶寬上的費(fèi)用就會(huì)大家降低了，這個(gè)怎么降低的，你可以想象一下，YAHOO的首頁小1K，100W個(gè)人一起訪問，那么帶寬節(jié)約了多少？而且可以更充分的利用帶寬。而我們的CSS控制了，所有的頁面元素的樣式，現(xiàn)在想改網(wǎng)站的整體風(fēng)格，你只需要花幾分鐘修改一下一個(gè)CSS文件，就可以輕松搞定了。維護(hù)的成本也下來了，省了不少錢了吧？還有，你開這個(gè)頁面的速度會(huì)快很多啊，一個(gè)讓你等半分鐘的頁面，除非里面的信息對(duì)你很有用，不然我們大家基本都沒有太多的時(shí)間去用來等待的。2、對(duì)用戶友好更友好，且有機(jī)會(huì)獲得更多的用戶?，F(xiàn)在來說說用戶友好。首先我想把我們的用戶來分下類。第一類：普通用戶（每個(gè)訪問我們網(wǎng)站的人）；第二類：搜索引擎；采用WEB標(biāo)準(zhǔn)開發(fā)的頁面，結(jié)構(gòu)清晰，頁面體積小，瀏覽器兼容性好。普通用戶訪問的時(shí)候，頁面打開速度快，而且不管用戶使用那種瀏覽器，都能夠正常訪問（顯示）頁面，且頁面的結(jié)構(gòu)清晰，要找的數(shù)據(jù)可以很方便的瀏覽到。而對(duì)搜索引擎來說，一個(gè)好的采用WEB標(biāo)準(zhǔn)開發(fā)的頁面，都是做過SEO優(yōu)化的，它訪問起來很友好，很容易理解你的頁面中哪里是標(biāo)題（H1~H6標(biāo)簽），哪里是段落（p標(biāo)簽），哪里是段落里要強(qiáng)調(diào)的內(nèi)容（strong標(biāo)簽）等，它可以很容易的分析出來。而一個(gè)SEO好的站點(diǎn)，大家都知道，被搜索引擎收錄的機(jī)會(huì)更多，這個(gè)也意味著您的網(wǎng)站會(huì)被更多的普通用戶訪問到，給你的站點(diǎn)帶來更多的用戶。一個(gè)能幫我們省下大筆費(fèi)用，提高工作效率。同時(shí)又能夠提高頁面瀏覽速度，對(duì)用戶友好，甚至能夠不花錢宣傳，就能給你帶來更多用戶的技術(shù)。你說你會(huì)不會(huì)去使用它？這個(gè)也正式我們的W3C推薦使用WEB標(biāo)準(zhǔn)開放網(wǎng)站的原因啊。而這個(gè)技術(shù)也得到了我們廣大用戶的認(rèn)可，所以您現(xiàn)在需要學(xué)習(xí)WEB標(biāo)準(zhǔn)啊。溫習(xí)完了基礎(chǔ)課程，現(xiàn)在正式開始講XHTML和CSS的技巧了。合理的布局有朋友會(huì)開始問了，怎么一開始就開始講合理的布局了呢?前面我們提到了一些知識(shí)點(diǎn)——“結(jié)構(gòu)清晰、SEO優(yōu)化、頁面體積小、XHTML代碼中基本上都是用戶要看的數(shù)據(jù)”。這些東西，都是我們做了合理布局的結(jié)果。而且我個(gè)人覺得，我們采用WEB標(biāo)準(zhǔn)制作的一切都是從這個(gè)知識(shí)點(diǎn)開始的，所以我這里就先來說這個(gè)話題。那么大家又會(huì)開始問，怎樣的一個(gè)頁面，才算是合理的布局的呢？這個(gè)問題問題問得好，也是我們大家剛開始學(xué)用WEB標(biāo)準(zhǔn)的問得最多的問題之一，我也曾經(jīng)常被這個(gè)問題所困擾，這里就說說我對(duì)合理布局的一些理解。在開始講合理布局的頁面要達(dá)到的要素前，我們還是用個(gè)實(shí)例來講解會(huì)更直觀些。先來看看這個(gè)圖片：不錯(cuò)，這個(gè)是一個(gè)文章詳細(xì)頁，沒有左右兩欄布局，不過這里我重點(diǎn)要講的是合理的布局，在稍后的文章中我會(huì)詳細(xì)的介紹浮動(dòng)元素。好，回到剛才的話題，大家看到了這個(gè)頁面了。web前端開發(fā)實(shí)訓(xùn)總結(jié)「篇六」前端工作了一段時(shí)間經(jīng)驗(yàn)總結(jié)，獻(xiàn)給做前端的同學(xué)，希望對(duì)大家有所幫助。一、編輯器的選擇推薦webstorm，絕對(duì)的神器。不要用dw了，它最驕傲的所見即所得其實(shí)沒什么用，因?yàn)楦揪筒粶?zhǔn)，代碼提示也不人性話，不方便。Webstorm的方便之處（目前用到的）1.可以分屏，左右同時(shí)編輯兩個(gè)文件，比如左邊編輯html，右邊編輯它的css/js。2.代碼提示很人性話，分級(jí)結(jié)構(gòu)也很清洗。3.方便查找，如ctrl+點(diǎn)擊類名，就可自動(dòng)定位到該css樣式。4.支持自定義模版，這樣快速開始完成一些經(jīng)常用到的代碼。5.支持個(gè)性化主題，字體等。6.強(qiáng)大的插件庫，自己去選吧。7.ctrl+/,注釋所選區(qū)域。sublime編輯器，簡單靈活輕量級(jí)，支持代碼自動(dòng)完成、代碼高亮、快速生成，以及更多好用的插件，也可以配置scss。sublime編輯器配置二、布局提到布局最頭疼就是瀏覽器兼容性，現(xiàn)在才發(fā)現(xiàn)其實(shí)很多兼容性其實(shí)是很容易避免的，只要做到你對(duì)自己的每一句代碼都知道它的意義和作用，還有避免用一些有兼容性的樣式屬性就行了，很多情況都可以不用hack，一樣能實(shí)現(xiàn)多瀏覽器兼容。1.不要用hack，一定有更好的解決辦法。很多情況都是因?yàn)榇a結(jié)構(gòu)不夠好才會(huì)出現(xiàn)兼容性問題。2.思考如何用最少的標(biāo)簽及屬性實(shí)現(xiàn)頁面。3.理解結(jié)構(gòu)，表現(xiàn)，行為分離的意義。4.布局前一定要先分析頁面結(jié)構(gòu)，磨刀不誤砍柴工，分析怎么用更好的辦法實(shí)現(xiàn)，理清思路后，再切圖寫代碼。5.深刻理解類的概念，注重歸類元素，多總結(jié)，保持代碼風(fēng)格（包括前后代碼的空格位置、多少，以及命名風(fēng)格）嚴(yán)格一致并且盡量簡潔。6.多用組合，少用繼承。7.命名空間：駝峰命名法用于區(qū)別不同單詞，劃線用于表明從屬關(guān)系。8.低權(quán)重原則避免濫用子選擇器(即類似#testspan這樣的選擇符)。三、技巧1.寫js效果時(shí)一定要注意先分析好效果的行為，盡量用最簡單通用性的代碼。分析步驟可以是1.先把要實(shí)現(xiàn)的功能一步一步的寫在紙上（即自然語言）2.再根據(jù)自然語言翻譯成機(jī)器語言，用jquery寫的代碼一定要注意代碼的可移植性、通用性。2.組織css，推薦使用base、common、page三層，base可以分為兩大部分：cssreset（覆蓋掉瀏覽器提供的默認(rèn)樣式，可以參考：/yui/）和通用原子類。（疑問：如果使用cssreset后，那么之前的要求的標(biāo)簽語義化是否就沒有意義了呢？因?yàn)樗姓Z義化的標(biāo)簽?zāi)J(rèn)樣式都被reset了）,不用*{margin:0;padding:0;}的原因是因?yàn)椤?”表示所有標(biāo)簽，其中包含大量生僻標(biāo)簽和為向前兼容而留下來的淘汰標(biāo)簽。3.把多個(gè)按鈕放在一張圖定位時(shí)，最好兩個(gè)按鈕之間隔一個(gè)像素，要不然有些版本的chrome可能解析不準(zhǔn)確。4..clearfix:before,.clearfix:after{content:"";display:table;}.clearfix:after{clear:both;}.clearfix{zoom:1;}注意如果用了浮動(dòng)，一定要清除浮動(dòng)，深刻理解浮動(dòng)的作用很重要。在層里調(diào)整文字的垂直位置可以用1.lineheight2.padding。注意模塊化布局，增加代碼的重用性，盡量只給最里層的內(nèi)容層設(shè)高度，一般如果高度不確定的都設(shè)置成自適應(yīng)，這樣有助于內(nèi)容拉伸，也便于修改模塊的高度。大框架，盡量簡單的分，比如左右結(jié)構(gòu)最好就設(shè)置成左右，沒必要搞成左中右。盡量不要在html代碼里插入img，把他設(shè)置在結(jié)構(gòu)里，然后用css插入圖片。5.jquery編程習(xí)慣可以參考：把所有用$（）選中的元素保存在前綴為$的js變量里2.每個(gè)函數(shù)結(jié)束都要用returnfalse結(jié)束掉函數(shù)。6.布局前，先構(gòu)思好整個(gè)頁面的結(jié)構(gòu)，一個(gè)好的結(jié)構(gòu)要便于維護(hù)，加載更快，布局時(shí)也更容易。布局時(shí)，穩(wěn)扎穩(wěn)打，一步步弄好后（既沒有用hack，也沒有兼容性問題了），再布局下一個(gè)板塊。布局一個(gè)帶js效果的頁面，要先把效果圖上的頁面效果，完整布局好后，再考慮加動(dòng)作的事情。并且一定要分析好頁面的結(jié)構(gòu)，以最少的標(biāo)簽，以及標(biāo)簽要與所放內(nèi)容對(duì)應(yīng)來布局。7.jquery代碼一般要用$(document).ready(function{}確保頁面dom準(zhǔn)備好了再進(jìn)行js操作。頁面按鈕點(diǎn)擊時(shí)邊框變紅，點(diǎn)擊完后邊框變藍(lán)可以用outline:none;解決。有動(dòng)畫的層最好設(shè)置overflow：hidden以免層里面的內(nèi)容在外層寬高改變時(shí)撐出層外。8.寫js效果時(shí)一定要注意先分析好效果的行為，盡量用最簡單通用性的代碼。分析步驟：1.先把要實(shí)現(xiàn)的功能一步一步的寫在紙上（即自然語言）2.再根據(jù)自然語言翻譯成機(jī)器語言，用jquery寫的代碼一定要注意代碼的可移植性、通用性。9.a標(biāo)簽的四種狀態(tài)的排序問題，可以用lovehate原則，即l（link）ov（visited）eh（hover）a（active）te，順序?qū)戝e(cuò)可能出現(xiàn)點(diǎn)擊后hover樣式失效。10.一般情況下，建議盡量使用class，少用id。11.css編碼風(fēng)格：多行式和一行式。多行式：可讀性強(qiáng)，但使行數(shù)過多，編輯需要來回拖動(dòng)滾動(dòng)條，影響開發(fā)速度，增大css文件大小。一行式：可讀性稍差，有效減小css文件行數(shù)，有利于提高開發(fā)速度，同時(shí)減小css文件大小。一行式逐漸成為主流。12.csssprite：即把多個(gè)甚至所有的圖標(biāo)都放在一張圖里，然后用背景定位來控制圖標(biāo)的顯示。使用難點(diǎn)：圖片如何排列能夠緊湊，同時(shí)保證不會(huì)影響擴(kuò)展性。優(yōu)點(diǎn)：減少http請(qǐng)求數(shù)，減小服務(wù)器壓力。缺點(diǎn)：影響開發(fā)速度，大大降低了可維護(hù)性。是否使用取決于網(wǎng)站流量，對(duì)于流量不大的網(wǎng)站來說，csssprite帶來的好處并不明顯，而付出的代價(jià)是巨大的，不劃算。13.定義有：hover偽類的樣式時(shí)，多定義一個(gè)它的hover類，這樣有助于js調(diào)用生成current的效果，如定義btn{xxx}，btn：hover，btn_hover{xxx}。14.低權(quán)重原則避免濫用子選擇器(即類似#testspan這樣的選擇符)。css的選擇符是有權(quán)重的，當(dāng)不同選擇符的樣式設(shè)置有沖突時(shí)，會(huì)采用權(quán)重高的選擇符設(shè)置的樣式。規(guī)則：html標(biāo)簽的權(quán)重是1，class的權(quán)重是10，id的權(quán)重是100.如“divem”的權(quán)重是1+1=2，“strong.demo”的權(quán)重是10+1=11，“#test.red”的權(quán)重是100+10=110.如果css選擇符權(quán)重相同，那么樣式會(huì)遵循就近原則，哪個(gè)選擇符最后定義，就采用哪個(gè)選擇符的樣式，與掛class名的先后順序無關(guān)。為了保證樣式容易被覆蓋，提供可維護(hù)性，css選擇符需保證權(quán)重盡可能低。15.如果不確定模塊的上下margin特別穩(wěn)定，最好不要將它寫到模塊的類里，而是使用類的組合，單獨(dú)為上下margin掛用于邊距的原子類（例如mt10、mt20）。模塊最好不要混用margintop和marginbottom，統(tǒng)一使用margintop或marginbottom。16.拆分模塊技巧：模塊與模塊之間盡量不要包含相同的部分，如果有相同部分，應(yīng)將它們提取出來，拆分成一個(gè)獨(dú)立的模塊。2.模塊應(yīng)在保證數(shù)量盡可能少的原則下，做到盡可能簡單，以提高重用性。17.觸發(fā)hasLayout一般情況用zoom：1就行了，但當(dāng)用dhtml的時(shí)候，可能失效，這時(shí)用position：relative就行了。18.布局最基本的元素：塊級(jí)元素（常見：div,p,form,ul,ol,li）和行內(nèi)元素（span,strong,em）等。塊級(jí)元素：獨(dú)占一行，默認(rèn)情況下，其寬度自動(dòng)填滿父元素寬度（即使設(shè)置了寬帶也會(huì)獨(dú)占一行）。行內(nèi)元素：不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排不下，才會(huì)換行，其寬度隨元素的內(nèi)容而變化（沒有上下邊距，只有左右邊距）?？梢杂胐isplay：inline/block，切換。19.ie6、7不支持display：inline-block，但行內(nèi)元素可以用此屬性觸發(fā)hasLayout（是ie瀏覽器為解析盒模型而設(shè)計(jì)的一個(gè)專有屬性，它的設(shè)計(jì)初衷是用于塊級(jí)元素的，如果觸發(fā)行內(nèi)元素的hasLayout，就會(huì)讓行內(nèi)元素?fù)碛幸恍K級(jí)元素的特性），從而模擬出inline-block的效果，然后再用*vertical-align控制文字的垂直對(duì)齊。但這樣做用hack，所以不推薦。20.排列地板磚一樣的布局的元素時(shí)，盡量用給每個(gè)元素用相同的類來實(shí)現(xiàn)，如果最左邊的元素間距和右邊的有區(qū)別可以給所有元素套一個(gè)父層，然后設(shè)置其右邊距為負(fù)就行了。21.如果一個(gè)類中有些部分會(huì)經(jīng)常變化，我們可以將這個(gè)經(jīng)常變化的部分抽離出來單獨(dú)設(shè)成一個(gè)類，然后用組合來實(shí)現(xiàn)最終樣式。22.可以用(function{})這樣的匿名函數(shù)來避免全局變量沖突。讓js不產(chǎn)生沖突，需要避免全局變量的泛濫，合理使用命名空間以及為代碼添加必要的注釋?？梢远x一個(gè)全局對(duì)象，然后用其屬性來定義全局變量，同時(shí)結(jié)合命名空間（即類似，GLOBAL.A.xx,和GLOBAL.B.xx之類的）。四、常見問題1.ie只有a支持hover,并且注意a里要