web前端開發實訓總結

時間：2021-12-21 11:29:28 web前端開發實訓總結我要投稿

web前端開發實訓總結

　　一、web前端開發的核心技術是哪些

　　1、HTML

　　掌握HTML是網頁的核心，是一種制作萬維網頁面的標準語言，是萬維網瀏覽器使用的一種語言，它消除了不同計算機之間信息交流的障礙。因此，它是網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言，學好HTML是成為Web開發人員的基本條件。

　　HTML是一種標記語言，能夠實現Web頁面并在瀏覽器中顯示。HTML5作為HTML的最新版本，引入了多項新技術，大大增強了對于應用的支持能力，使得Web技術不再局限于呈現網頁內容。

　　隨著CSS、JavaScript、Flash等技術的發展，Web對于應用的處理能力逐漸增強，用戶瀏覽網頁的體驗已經有了較大的改善。不過HTML5中的幾項新技術實現了質的突破，使得Web技術首次被認為能夠接近于本地原生應用技術，開發Web應用真正成為開發者的一個選擇。

　　HTML5可以使開發者的工作大大簡化，理論上單次開發就可以在不同平臺借助瀏覽器運行，降低開發的成本，這也是產業界普遍認為HTML5技術的主要優點之一。AppMobi、摩托羅拉、Sencha、Appcelerator等公司均已推出了較為成熟的開發工具，支持HTML5應用的發展。

　　2、CSS

　　學好CSS是網頁外觀的重要一點，CSS可以幫助把網頁外觀做得更加美觀。

　　3、JavaScript

　　學習JavaScript的基本語法，以及如何使用JavaScript編程將會提高開發人員的個人技能。

　　4、操作系統

　　了解Unix和Linux的基本知識，對于開發人員有益無害。

　　5、網絡服務器

　　了解Web服務器，包括對Apache的基本配置，htaccess配置技巧的掌握等。

　　二、web前端開發實訓總結（通用10篇）

　　總結是對某一特定時間段內的學習和工作生活等表現情況加以回顧和分析的一種書面材料，它能夠使頭腦更加清醒，目標更加明確，因此我們要做好歸納，寫好總結。總結怎么寫才不會千篇一律呢？下面是小編為大家收集的web前端開發實訓總結（通用10篇），供大家參考借鑒，希望可以幫助到有需要的朋友。

　　web前端開發實訓總結1

　　所謂行萬里路，必先始于足下。剛開始學習WEB前端基礎的時候，老師說，其實你們學的這個后面真正去工作的時候可能也不是很會用到，所以就有很多人會問，既然我們都用不到，那干嘛還學呀？其實，對于一個程序員來說，你不僅要有很好的后端專業能力，你還應當具備一定的前端素養，知道一些起碼的前端知識。

　　來到xx的第一個月，我們是以基礎為主吧，因為大家到這里的基礎都不一樣，有一些本身就具備很高水準的人，也有很多像自己一樣從小白開始的人，所以，對我們而言，xx開設的這種雙元模式對我們是有很大用處的。我們從最基礎的開始學習，在學習HTML的時候，我們還延續著很古老和古老的表格制作網站，然后到后面的CSS學習，用CSS樣式去進一步完善我們制作的網址，再到著一期的難點JS課程體系，一級最后的JQ和BOOtstrap，可以說這個過程其實也是一個循序肩頸的過程，有簡到難的過程。

　　第一部分：HTML的學習

　　其實HTML的四天學習的話，重要的就是一個標記的學習，這大概是學習一門語言最基礎的一部分吧。但是也不是說背一背就解決問題的，選擇IT，程序員這一方面，只要多練習，多敲代碼感覺就好了，所以熟練的使用這些標記其實不是很大的問題，對自己來說，比較難的是一個表格和框架，也許會有人說，表格有什么難的，就行列的問題啊，但是不知道為什么，在學習的那幾天對于表格的學習和接受能力都沒有別的那么好，表格的整體框架能搭出來，但是就是對于表格的美化總做不到自己心里所預期的那樣。其實練習的話也是挺多的，對于表格的網頁練習做了應該也有一二十個的，但是就是沒那么理想，所以這方面的話也是需要自己多加練習和修正的，因為表格的用處還是挺大的。HTML的學習方面還有框架和表單，框架的話，就是一個網頁的主體了，網頁的大致形式基本上從你的框架結構就可以知道的，學習框架，重要的就是網頁的布局如何劃分，然后利用框架的嵌套，浮動就可以解決的，學習過程也不會是很大的難度。

　　想想HTML還學了些什么呢？表單！表單對前端開發來說還是挺高的，因為我們能在一個網頁中看到很多的表單應用。包括用戶的注冊啦，密碼驗證啦，還有搜索欄之類的，幾乎全是表單的應用。表單學習比較重要的地方應該就是那十來個表單控件的應用，這些表單控件進一步區分的話還有就是單邊標記和雙邊標的的表單控件，因為很多單邊標記的表單，他的值一般只能是存在value當中，如果不注意的話，很多時候我們會忘記寫上這個value。這個階段的表單感覺并不是那么難，當然，學到后面的JS之后，相對于表單驗證之類的才感覺難了很多。

　　第二部分：CSS學習

　　對我來說，CSS課程雖然只有三天，但是卻是更應該學好的一個模塊。因為我們都知道，其實一個網站的WEB前端，就是用加CSS來寫的，不是用之前的表格來寫的，足以見得CSS的重要性。CSS就是網頁樣式，一個網頁的整體美感，在你確定了框架之后，就看你的CSS樣式的添加了，所以一直以來都很想把CSS學好。記得CSS學習的那幾天，自己的消化還是很好的，自己去獨立完成練習的時候也是沒有太大難度的，但是不知道是為什么，到后面學習JS JQ的時候，操作CSS時居然會吧CSS和HTML弄的有點混淆，這一點一直沒做好。CSS的學習還有一個地方就是浮動，因為存在塊元素和行輩元素，塊元素因為其本身特性，一個塊元素標記他要占用一整行的空間，而一個行內元素他只能占用行內的一些空間，但是在實際操作中，很多時候我們卻要想將多個塊元素排在同一行，或者將多個行內元素排在不同行，這時候就可以使用浮動的方法來實現，浮動最主要做的就是這個，唯一要記住的一點就是做了浮動之后，如果他的父元素是沒有進行匡高的設定的話，是不是要進行清除浮動，防止下面的操作也是有浮動的。

　　第三部分：重點學習JS

　　JS是相對于這整個月學習的重點吧，也是很多人沒辦法很好接觸的地方，當然，自己在這里的學習也是有不足的地方。像一些對屬性的操作的標記之類，懂得怎么用，但是不是很熟悉，所以經常在操作的'時候要去查手冊。學的最不好的一個地方應該是將數組中的元素按照一定的規則或者順序添加到指定或對應的表格中，這中題型是自己做的比較少的，也是掌握很不好的地方，所以也希望用放假的這幾天好好練習一下，不能拖到下一個階段去。個人對JS的理解其實就是大量算法的集合，因為很多時候你都會用到函數，只是多了一些找元素和對元素綁定標記的過程，最重要的還是構造函數，調用函數的過程！

　　第四部分：JQ及Bootstrap

　　對于JQ和Bootstrap的學習來說，其實就是一個應用的過程吧，所有的函數都幫你寫好了，你只需要學會調用就好了的。當然。調用他，其實對于JQ來說，學習的過程沒有具備很大的難度，只是嘗試著去多寫寫，寫兩三次基本就記住怎么用了。最后還有一天的Bootstrap學習，寫過一些案例，只要會改，基本沒有太大的難度。

　　其實對于WEB前端的學習的話重要的就是多用，很多東西我們上課聽得時候其實都基本聽得懂，但是更重要的是在于你課后的練習，離開了老師的一個思維引導，我們該怎樣去完成項目才是我們該學會的。這一個月的學習難度系數都不是很高。但卻是一個比較繁雜的過程，因為作為前端來說，我們需要不斷的優化，不斷的修正，美化整個頁面。不管是前端還是后端，都希望自己能好好學！

　　web前端開發實訓總結2

　　進入xxweb班近一個月了，從一無所知的小白到現在也完成了京東詳情頁的一個小項目。學習過程中除了偶爾遇到困難，總體還算順利。在這里主要想分享自己以一個文科生——零基礎學員的角度來學習web前端開發的感受。

　　由于之前在大學里是學的旅游專業，和計算機毫無關系，來到xx時對自己有些半信半疑。不少人甚至懷疑xx是行騙機構。在做了全面的了解之后，我勸服家人同意我來這里學習。另一方面，我向老師咨詢了自己學習的方向，考慮到自己從文科到計算機專業跨度較大的轉變，我在Java與web之間選擇了web。相對于Java，web的學習更基礎，容易入手，就業的機會也非常多。

　　Web開班第一天，老師即從網頁基礎、HTML入手，攫取重點，給我們介紹了它的相關知識。我們主要學習了HTML5，里面有很多的新特性且時下較為流行。它相當于一個網頁界面的宏觀架構。如果把一個網頁的實現比作是一座建筑的建造過程，那么HTML即是這座建筑里的鋼筋混泥土，搭建起整個建筑的框架、承重。

　　之后，我們又學習了CSS基礎樣式，仍然借用上面的比喻，CSS則相當于建筑里各個房間的不同結構，它們使得這座建筑更加的多樣化。且相對于HTML，它更加的復雜、多樣化，呈現的效果也具有更多的可能性。老師向我們推薦了《CSS禪意花園》這本書，里面列舉了豐富且多種多樣的CSS樣式。

　　作為今后可能成為的優秀前端工程師，僅僅學習自己內部的知識是遠遠不夠的。因此，第一個月中我們也學習了UI中PS繪圖制作基礎，這對于一個前端來說也是非常重要的，在今后的工作中，我們可能會面對各種各樣的問題，如果掌握部分PS尤其是切圖技術，在和UI的接觸中可以減少很多不必要的繁瑣工作。

　　總之，作為一個前端工程師，我們所要掌握的知識是全面的，當我們寫代碼時的思維是縝密的。HTML和CSS是基礎中的基礎。之后我們會學習更多的JavaScript相關知識和其他，希望自己在這過程中仍能保持謙遜的的心態，去學習前人留下的珍貴寶藏。

　　web前端開發實訓總結3

　　仔細想來，在Web前端開發方向實習已經一年多了，從最初的DIV+CSS學起，到JavaScript、jQuery、Bootstrap框架等等，前端要學習的東西很多。接下來就總結一下我在學習過程中的一些經驗吧。

　　一、學好基礎知識，做一個基礎扎實的開發者。

　　在IT行業，每年都會有很多新的技術誕生并且得到廣泛的推廣，前端技術也不例外。所以無論學到多深的程度，扎實的基本功肯定是必不可少的。

　　（1）HTML：盡量掌握盡可能多的標簽。必須掌握的標簽有等，這些雖然平時比較少用甚至幾乎不用，但是當你學到Boostrap框架時，你會發現Boostrap框架為這些標簽賦予了特定的功能與外觀。除此之外，新增了很多標簽和屬性，使得HTML語言更加強大。還有很多新的內容，需要初學者更多的接觸并掌握。

　　（2）CSS：對各個屬性以及一些屬性之間結合使用的技巧應該多鉆研。CSS能夠統一有效地對頁面的布局、字體等網頁中的各個元素顯示屬性進行控制，可以方便快捷地實現精美的頁面表現效果。你會用CSS技術的使用技巧解決下列問題嗎？清除浮動有哪些方式？比較好的方式是哪一種？當容器中具有浮動元素時，如何為容器設置邊框或背景顏色？怎樣讓塊級元素在容器中水平居中？當多個連續塊級元素的浮動布局影響了原本不想浮動的對象時該如何處理？容器內部的對象如何實現相對于容器的自由定位？為什么要初始化CSS樣式？

　　（3）CSS+div布局模式：許多布局模式的基礎，也是大部分前端開發人員接觸到的第一種布局方式。這種布局模式對于PC端頁面的設計是非常有幫助的，同時對于后面將會遇到的“移動端布局”、“響應式布局”等，這種布局方式都具有一定的指導意義。

　　二、將JavaScript作為前端學習的重點。

　　JavaScript是目前大多數主流瀏覽器支持的面向對象的腳本語言，它可以在不與服務器交互的前提下對HTML的頁面內容進行修改。JavaScript控制著網頁的行為，決定著網頁“做什么”。系統學習過JavaScript的同學們，你看看下列問題你能準確的找到答案嗎？通過表達式來系統闡述“==”和“===”這兩個運算符的區別。把某個元素移除你的視線的方法有哪些？你對JSON了解嗎？通過哪個函數可以判斷從文本框中獲取的內容是不是數字？DOM操作——怎樣添加、移除、移動、復制、創建和查找節點？怎樣判斷是否為整數？運算符都能刪除哪些內容？在腳本中，this有幾種使用情況呢？

　　第三、多練習多操作，實踐是檢驗真理的唯一標準。IT編程是需要多加實踐的，要不斷反復進行上機操作，是學習編程開發的唯一方法。

　　這些問題的答案就是我的實習心得，經過這段時間的實習，我覺得自己可以獨當一面，當一個web前端工程師了呢。

　　web前端開發實訓總結4

　　作為web前端工程師，在xx工作了5個月，自己從剛開始的一名新人到最后和大家融為一體，為組內貢獻自己的一份力量，我經歷了很多，成長了很多。

　　剛進到公司，我內心是很惶恐的。我對自己沒有一個正確的定位，對公司的環境也是那么的陌生。我不知道自己能不能勝任公司的工作。我所能做的就是努力再努力，用自己的勤奮來掩飾自己內心的慌張。

　　很欣慰的是我們組內有一個女生。她性格很柔和。每次，和他請教問題他都會耐心的幫助你。我和他成為了閨蜜，我經常的去問他問題，一些環境的配置，系統的某部分業務或者其他的問題等等。很感謝她，他幫助我盡快的去熟悉了系統的環境及業務。除了組長，組內還有李大牛和許小牛。后來許小牛走了，又來了兩名同事，工作期間，他們都對我有很大的幫助，無論是工作上還是生活上，很欣慰能夠遇到他們并共事一場。

　　工作中不是那么的順利。別人是因為任務重，工作壓力大。而我則是因為任務太輕而煩惱。我的任務總是比較簡單，我很快就能做完，我體現不了自己的價值，我不開心。我去向組長爭取機會，贏得了自己的第一份比較有挑戰性的工作。

　　我要做一個webservice接口。這個任務的需求很不明確，需要我去和接口使用方進行溝通。我對系統的數據庫了解甚少，對自己的庫就不太了解，將他們的庫對應到我們的庫就更困難了。加上交流也不是很有經驗，我最后搬出我們組長去跟他們溝通確定需求才開始進行開發。需求的確定用了好長時間，之后的驗證也用了好久。當時開發時，接口由于沒有數據，只用一條數據進行了驗證，但到部署到現場時出現了好多的"問題。客戶天天催，自己的壓力好大。好幾天都加班到好晚。這件事情比較曲折，后面的博文會詳細講述這件事情。

　　最后一個月，我們組要進行封閉開發。這是我在xx的最后一個月了。剛開始我以為不會給我分配什么有含量的活了。這里非常感謝組長，他并沒有讓我的這一個月荒廢。我有我的任務，而且也很重要。因為這些，我可以和大家共同奮斗。全組成員一起加班到晚上兩點那次，雖然很累，但是我很開心。這是一件很值得回憶的事情。曾經，我們也瘋狂過。

　　web前端開發實訓總結5

　　記得初到公司時，我對公司的了解僅僅局限于公司網站的簡單介紹，除此之外，便一無所知了。但是，在領導和同事們的支持和幫助下，我不僅加深了對公司的了解，而且很快就掌握和熟悉本崗位工作的要求及技巧，嚴格做到按時按量完成產品終端頁等頁面的制作，保證頁面的與效果圖的一致性和頁面在各個瀏覽器中的兼容性。同時，減少頁面中冗余的代碼，保證頁面的加載速度。

　　自從擔任web前端工程師以來，雖然在工作中取得了較好的成績，但也還存在一些不足之處。例如：工作中沒有充分領會領導的意圖，有時會忽視公司的工作流程等等，這些都是由于工作態度和細節決定的。這些不足都需要在今后的工作中加以改進。

　　在今后的工作中，我將努力提高技術水平，克服不足，朝著以下兩個方向努力：

　　1、在以后的工作中不斷學習技術知識，通過多看、多學、多問、多練來不斷的提高自己的各項業務技能。

　　2、提高自己解決實際問題的能力，并在工作過程中慢慢克服急躁情緒，積極、熱情、細致地的對待每一項工作。

　　短短三個月的時間，我學到了很多專業的知識，能夠得心應手開展工作；在一個和諧的環境下，開心的工作；可以說都是受益于各位領導的栽培和各位同事的賜教。總的來說，由于本人工作經驗不多，能力還有欠缺。雖然能勝任本職工作，但是社會在不斷的進步，技術在不斷的更新，我還需要更多的磨礪。為此，今后在工作中，我需要進一步增強開拓創新精神，刻苦鉆研新的技術。在上級的正確領導下，努力拼搏，扎實工作，以更好的質量、更高的效率、更扎實的作風做好本職工作，為我們這個光榮的集體、輝煌的事業做出應有的貢獻。

　　web前端開發實訓總結6

　　以前在校很少自己做程序，對軟件工程更是一無所知。來到公司，開始接觸"大規模"(其實現在看來實習的項目其實還是很小的)軟件開發，一時真的有些迷茫。比起VSS，MVC，QA，CMMI，我對JAVA，JSP，xML的一竅不通根本不值一提。大家都不想輸在"起點"，所以都默契地在加班，這樣一直持續了實習的兩個月。

　　剛來的時候"始業教育"顯得慢吞吞，我們還經常盤算去哪哪玩之類的。我和FLYSKY(20個新生里唯一一個南區的兄弟，軟件學院的)還經常出去吃各種小吃，每到一處都嘗嘗本地的風味,這是他的習慣。之后開始的培訓還不是很難過，JAVA，C++，ORACLE，老師們講的很"好"，可以說是非常好，好得我們沒有幾個人能聽懂。大家開始發愁，我也是每天晚上都基本看書到10點。

　　"我心說得虧哥們我還練過"，來之前的2月份我就自己買了一本THINKING IN JAVA，看懂看不懂怎么說也算是準備了一下JAVA，C++雖說沒去上過課，但憑我的直覺我就一下看中這東西很有用，自己也看過一陣.至于ORACLE，雖然不了解，但畢竟因為佩服"云飛揚"的性格和敬業精神，咱SQL選修也不是白混的。專業倒還有點"基礎"，再加上咱這自學能力也不是吹的，基本維持。可等到后來的日語課就全迷糊了：本就沒有語言天賦，再加上記憶嚴重欠缺，總是特別害怕去上日語課。不過特別喜歡那個老師說話的感覺，加上她一直對我都很好，所以還是很用心的學著。

　　隨著培訓的收尾，我們開始正式進入項目。從需求分析,概要設計到詳細設計，我們一步一步的開始接觸軟件開發的每個細節。最受不了的就是每天都要記"周報"，填寫自己的勞動成果。因為這個我還被QA通報了好幾次呢，真的很郁悶。其實現在我很感謝這種制度化的東西，某些情況下好習慣的養成是要靠強制來確保的。詳細設計之后就是企盼已久的編碼，我心想終于可以做點"正事"了。現在回頭一看才知道，其實編碼只占軟件開發的整個過程勞動量的1/4左右，而且其他的環節也不是想象中的那么無足輕重。

　　編碼我其實做的很不好，主要是因為需求分析階段就沒有認真仔細的理解需求和規格說明，加上編碼時一個關鍵時段我回校和老同學敘舊。那陣項目經理(PM)就經常和我們說，"有問題自己想辦法，不要經常問我"。PM其實是在叫我們自己醞釀，遇到難題只有"憋"一"憋"才能有真的收獲。而我不在的那三天正好是大家技術/思路上的一個"躍遷"，很多難題的解決方法都基本成熟，大家的編碼也接近50%了，所以回來時我感覺已經掉隊很多。再一個就是編碼中期時機器出問題，環境搭不上了，這使我更加緊張和急躁，大大影響了我的士氣。后來利用五一其間的加班我終于趕完了自己的模塊，達到了第一個里程碑。其實從發現落后到加班趕完這段經歷，對我來說也具有里程碑的意義。不僅考驗了我自己的能力和心理素質，也證明了我對集體的責任感和合作意識。我可以叫別人來幫我做趕上進度，但那樣我會錯過自己學習的機會，以后再遇到難題我還是不行;我也可以硬著頭皮導致項目延期，那樣我以后的日子保證不好過，而且這么做也不符合我的性格。事實證明我頂住壓力獨立完成任務不管是對集體還是對我個人都是一件大好事。

　　web前端開發實訓總結7

　　在科技高度發展的今天，計算機在人們之中的作用越來越突出。而c語言作為一種計算機的語言，我們學習它，有助于我們更好的了解計算機，與計算機進行交流，因此，c語言的學習對我們尤其重要。

　　在這個星期里，我們專業的學生在專業老師的帶領下進行了c語言程序實踐學習。在這之前，我們已經對c語言這門課程學習了一個學期，對其有了一定的了解，但是也僅僅是停留在了解的范圍，對里面的好多東西還是很陌生，更多的`在運用起來的時候還是感到很棘手，畢竟，萬事開頭難嘛。

　　由于時間的關系，我們的這次實踐課程老師并沒有給我們詳細的介紹，只是給我們簡單的介紹了幾個比較重要的實際操作。包括了程序模塊處理.簡單界面程序.高級界面程序.程序的添加修改.用程序做一元線性回歸處理以及用c語言程序來畫粒度分布圖等這幾樣比較重要的時間操作。

　　上機實驗是學習程序設計語言必不可少的實踐環節，特別是c語言靈活、簡潔，更需要通過編程的實踐來真正掌握它。對于程序設計語言的學習目的，可以概括為學習語法規定、掌握程序設計方法、提高程序開發能力，這些都必須通過充分的實際上機操作才能完成。

　　學習c程序設計語言除了課堂講授以外，必須保證有不少于課堂講授學時的上機時間。因為學時所限，課程不能安排過多的統一上機實驗，所以希望學生有效地利用課程上機實驗的機會，盡快掌握用c語言開發程序的能力，為今后的繼續學習打下一個良好的基礎。為此，我們結合課堂講授的內容和進度，安排了12次上機實驗。課程上機實驗的目的，不僅僅是驗證教材和講課的內容、檢查自己所編的程序是否正確，課程安排的上機實驗的目的可以概括為如下幾個方面：

　　1.加深對課堂講授內容的理解

　　課堂上要講授許多關于c語言的語法規則，聽起來十分枯燥無味，也不容易記住，死記硬背是不可取的。然而要使用c語言這個工具解決實際問題，又必須掌握它。通過多次上機練習，對于語法知識有了感性的認識，加深對它的理解，在理解的基礎上就會自然而然地掌握c語言的語法規定。對于一些內容自己認為在課堂上聽懂了，但上機實踐中會發現原來理解的偏差，這是由于大部分學生是初次接觸程序設計，缺乏程序設計的實踐所致。

　　學習c語言不能停留在學習它的語法規則，而是利用學到的知識編寫c語言程序，解決實際問題。即把c語言作為工具，描述解決實際問題的步驟，由計算機幫助我們解題。只有通過上機才能檢驗自己是否掌握c語言、自己編寫的程序是否能夠正確地解題。

　　通過上機實驗來驗證自己編制的程序是否正確，恐怕是大多數同學在完成老師作業時的心態。但是在程序設計領域里這是一定要克服的傳統的、錯誤的想法。因為在這種思想支配下，可能你會想辦法去"掩蓋"程序中的錯誤，而不是盡可能多地發現程序中存在的問題。自己編好程序上機調試運行時，可能有很多你想不到的情況發生，通過解決這些問題，可以逐步提高自己對c語言的理解和程序開發能力。

　　2.熟悉程序開發環境、學習計算機系統的操作方法

　　一個c語言程序從編輯、編譯、連接到運行，都要在一定的外部操作環境下才能進行。所謂"環境"就是所用的計算機系統硬件、軟件條件，只有學會使用這些環境，才能進行程序開發工作。通過上機實驗，熟練地掌握c語言開發環境，為以后真正編寫計算機程序解決實際問題打下基礎。同時，在今后遇到其它開發環境時就會觸類旁通，很快掌握新系統的使用。

　　3.學習上機調試程序

　　完成程序的編寫，決不意味著萬事大吉。你認為萬無一失的程序，實際上機運行時可能不斷出現麻煩。如編譯程序檢測出一大堆錯誤。有時程序本身不存在語法錯誤，也能夠順利運行，但是運行結果顯然是錯誤的。開發環境所提供的編譯系統無法發現這種程序邏輯錯誤，只能靠自己的上機經驗分析判斷錯誤所在。程序的調試是一個技巧性很強的工作，對于初學者來說，盡快掌握程序調試方法是非常重要的。有時候一個消耗你幾個小時時間的小小錯誤，調試高手一眼就看出錯誤所在。

　　web前端開發實訓總結8

　　前端工作了一段時間經驗總結，獻給做前端的同學，希望對大家有所幫助。

　　一、編輯器的選擇

　　推薦webstorm，絕對的神器。不要用dw了，它最驕傲的所見即所得其實沒什么用，因為根本就不準，代碼提示也不人性話，不方便。Webstorm的方便之處（目前用到的）

　　1.可以分屏，左右同時編輯兩個文件，比如左邊編輯html，右邊編輯它的css/js。

　　2.代碼提示很人性話，分級結構也很清洗。

　　3.方便查找，如ctrl+點擊類名，就可自動定位到該css樣式。

　　4.支持自定義模版，這樣快速開始完成一些經常用到的代碼。

　　5.支持個性化主題，字體等。

　　6.強大的插件庫，自己去選吧。

　　7 .ctrl+/,注釋所選區域。

　　sublime編輯器，簡單靈活輕量級，支持代碼自動完成、代碼高亮、快速生成，以及更多好用的插件，也可以配置scss。sublime編輯器配置

　　二、布局

　　提到布局最頭疼就是瀏覽器兼容性，現在才發現其實很多兼容性其實是很容易避免的，只要做到你對自己的每一句代碼都知道它的意義和作用，還有避免用一些有兼容性的樣式屬性就行了，很多情況都可以不用hack，一樣能實現多瀏覽器兼容。

　　1.不要用hack，一定有更好的解決辦法。很多情況都是因為代碼結構不夠好才會出現兼容性問題。

　　2. 思考如何用最少的標簽及屬性實現頁面。

　　3.理解結構，表現，行為分離的意義。

　　4. 布局前一定要先分析頁面結構，磨刀不誤砍柴工，分析怎么用更好的辦法實現，理清思路后，再切圖寫代碼。

　　5. 深刻理解類的概念，注重歸類元素，多總結，保持代碼風格（包括前后代碼的空格位置、多少，以及命名風格）嚴格一致并且盡量簡潔。

　　6. 多用組合，少用繼承。

　　7. 命名空間：駝峰命名法用于區別不同單詞，劃線用于表明從屬關系。

　　8. 低權重原則------避免濫用子選擇器(即類似#test span這樣的選擇符)。

　　三、技巧

　　1. 寫js效果時一定要注意先分析好效果的行為，盡量用最簡單通用性的代碼。分析步驟可以是1.先把要實現的功能一步一步的寫在紙上（即自然語言）2.再根據自然語言翻譯成機器語言，用jquery寫的代碼一定要注意代碼的可移植性、通用性。

　　2. 組織css，推薦使用base、common、page三層，base可以分為兩大部分：css reset（覆蓋掉瀏覽器提供的默認樣式，可以參考：developer.yahoo.com/yui/）和通用原子類。（疑問：如果使用css reset后，那么之前的要求的標簽語義化是否就沒有意義了呢？因為所有語義化的標簽默認樣式都被reset了）,不用*{ margin:0; padding:0;}的原因是因為“*”表示所有標簽，其中包含大量生僻標簽和為向前兼容而留下來的淘汰標簽。

　　3. 把多個按鈕放在一張圖定位時，最好兩個按鈕之間隔一個像素，要不然有些版本的chrome可能解析不準確。

　　4. .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } 注意如果用了浮動，一定要清除浮動，深刻理解浮動的作用很重要。在層里調整文字的垂直位置可以用1.lineheight2.padding。注意模塊化布局，增加代碼的重用性，盡量只給最里層的內容層設高度，一般如果高度不確定的都設置成自適應，這樣有助于內容拉伸，也便于修改模塊的高度。大框架，盡量簡單的分，比如左右結構最好就設置成左右，沒必要搞成左中右。盡量不要在html代碼里插入img，把他設置在結構里，然后用css插入圖片。

　　5. jquery編程習慣可以參考：

　　把所有用$（）選中的元素保存在前綴為$的js變量里2.每個函數結束都要用return false 結束掉函數。

　　6. 布局前，先構思好整個頁面的結構，一個好的結構要便于維護，加載更快，布局時也更容易。布局時，穩扎穩打，一步步弄好后（既沒有用hack，也沒有兼容性問題了），再布局下一個板塊。布局一個帶js效果的頁面，要先把效果圖上的頁面效果，完整布局好后，再考慮加動作的事情。并且一定要分析好頁面的結構，以最少的標簽，以及標簽要與所放內容對應來布局。

　　7. jquery代碼一般要用$(document).ready(function(){}確保頁面dom準備好了再進行js操作。頁面按鈕點擊時邊框變紅，點擊完后邊框變藍可以用outline:none;解決。有動畫的層最好設置overflow：hidden以免層里面的內容在外層寬高改變時撐出層外。

　　8. 寫js效果時一定要注意先分析好效果的行為，盡量用最簡單通用性的代碼。分析步驟：

　　1.先把要實現的功能一步一步的寫在紙上（即自然語言）

　　2.再根據自然語言翻譯成機器語言，用jquery寫的代碼一定要注意代碼的可移植性、通用性。

　　9. a標簽的四種狀態的排序問題，可以用love hate 原則，即l（link）ov（visited）e h（hover）a（active）te，順序寫錯可能出現點擊后hover樣式失效。

　　10. 一般情況下，建議盡量使用class，少用id。

　　11. css編碼風格：多行式和一行式。多行式：可讀性強，但使行數過多，編輯需要來回拖動滾動條，影響開發速度，增大css文件大小。一行式：可讀性稍差，有效減小css文件行數，有利于提高開發速度，同時減小css文件大小。一行式逐漸成為主流。

　　12. css sprite：即把多個甚至所有的圖標都放在一張圖里，然后用背景定位來控制圖標的顯示。使用難點：圖片如何排列能夠緊湊，同時保證不會影響擴展性。優點：減少http請求數，減小服務器壓力。缺點：影響開發速度，大大降低了可維護性。是否使用取決于網站流量，對于流量不大的網站來說，css sprite帶來的好處并不明顯，而付出的代價是巨大的，不劃算。

　　13. 定義有：hover偽類的樣式時，多定義一個它的hover類，這樣有助于js調用生成current的效果，如定義btn{xxx}，btn：hover，btn_hover{xxx}。

　　14. 低權重原則避免濫用子選擇器(即類似#test span這樣的選擇符)。 css的選擇符是有權重的，當不同選擇符的樣式設置有沖突時，會采用權重高的選擇符設置的樣式。規則：html標簽的權重是1，class的權重是10，id的權重是100.如“div em”的權重是1+1=2，“strong.demo”的權重是10+1=11，“#test.red”的權重是100+10=110. 如果css選擇符權重相同，那么樣式會遵循就近原則，哪個選擇符最后定義，就采用哪個選擇符的樣式，與掛class名的先后順序無關。為了保證樣式容易被覆蓋，提供可維護性，css選擇符需保證權重盡可能低。

　　15. 如果不確定模塊的上下margin特別穩定，最好不要將它寫到模塊的類里，而是使用類的組合，單獨為上下margin掛用于邊距的原子類（例如mt10、mt20）。模塊最好不要混用margintop和marginbottom，統一使用margintop或marginbottom。

　　16. 拆分模塊技巧：

　　模塊與模塊之間盡量不要包含相同的部分，如果有相同部分，應將它們提取出來，拆分成一個獨立的模塊。2.模塊應在保證數量盡可能少的原則下，做到盡可能簡單，以提高重用性。

　　17. 觸發hasLayout一般情況用zoom：1就行了，但當用dhtml的時候，可能失效，這時用position：relative就行了。

　　18. 布局最基本的元素：塊級元素（常見：div,p,form,ul,ol,li）和行內元素（span,strong,em）等。塊級元素：獨占一行，默認情況下，其寬度自動填滿父元素寬度（即使設置了寬帶也會獨占一行）。行內元素：不會獨占一行，相鄰的行內元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內容而變化（沒有上下邊距，只有左右邊距）。可以用display：inline/block，切換。

　　19. ie6、7不支持display：inline-block，但行內元素可以用此屬性觸發hasLayout（是ie瀏覽器為解析盒模型而設計的一個專有屬性，它的設計初衷是用于塊級元素的，如果觸發行內元素的hasLayout，就會讓行內元素擁有一些塊級元素的特性），從而模擬出inline-block的效果，然后再用*vertical-align控制文字的垂直對齊。但這樣做用hack，所以不推薦。

　　20. 排列地板磚一樣的布局的元素時，盡量用給每個元素用相同的類來實現，如果最左邊的元素間距和右邊的有區別可以給所有元素套一個父層，然后設置其右邊距為負就行了。

　　21. 如果一個類中有些部分會經常變化，我們可以將這個經常變化的部分抽離出來單獨設成一個類，然后用組合來實現最終樣式。

　　22. 可以用(function(){})(),這樣的匿名函數來避免全局變量沖突。讓js不產生沖突，需要避免全局變量的泛濫，合理使用命名空間以及為代碼添加必要的注釋。可以定義一個全局對象，然后用其屬性來定義全局變量，同時結合命名空間（即類似，GLOBAL.A.xx,和GLOBAL.B.xx之類的）。

　　四、常見問題

　　1. ie只有a支持hover,并且注意a里要有href才行。

　　2. IE6中用了float:left之后導致margin-left雙倍邊距的BUG解決方法加上display:inline

　　3. 如果存在文字在層居中的問題，水平方向可以用text-align代替，垂直方向可以用line-height來控制，如果只是控制上邊距，就用padding-top。這樣可以避免在ie6上的某些不必要的錯誤。

　　4. ajax傳參數時，漢字一定要用encodeURIComponent（string），編碼一下，要不然可能變成亂碼中文在ie6里。

　　5. ie6下select元素會以窗口形式顯示的，這是ie6的一個bug，所以當你設置一層為相對或絕對定位時，select仍然會浮在那個層之上。解決方法，用一個和那個層同樣大小的iframe放在test下面，select上面，用iframe遮住select。

　　web前端開發實訓總結9

　　一、實訓項目

　　簡易記事本

　　二、實訓目的和要求

　　本次實訓是對前面學過的所有面向對象的編程思想以及JavaWEB編程方法的一個總結、回顧和實踐，因此，開始設計前學生一定要先回顧以前所學的內容，明確本次作業設計所要用到的技術點并到網上搜索以及查閱相關的書籍來搜集資料。

　　通過編寫采用JSP+Servlet+JavaBean技術框架的應用系統綜合實例，以掌握JavaWEB開發技術。

　　具體要求有以下幾點：

　　1、問題的描述與程序將要實現的具體功能。

　　2、程序功能實現的具體設計思路或框架，并檢查流程設計。

　　3、代碼實現。

　　4、設計小結。

　　三、實訓項目的開發環境和所使用的技術

　　基于J2SE基礎，利用MyEclipse8.5以上版本的集成開發環境完成實訓項目，界面友好，代碼的可維護性好，有必要的注釋和相應的文檔。

　　四、實訓地點、日程、分組情況：

　　實訓地點：4棟303機房

　　日程：

　　第一階段：

　　1、班級分組，選定課題，查閱相關資料半天。

　　2、劃分模塊、小組成員分工半天。

　　3、利用CASE工具進行系統設計和分析，并編制源程序5天。

　　第二階段：上機調試，修改、調試、完善系統2天。

　　第三階段：撰寫、上交課程設計報告，上交課程設計作品源程序（每人1份）2天。

　　web前端開發實訓總結10

　　一、實訓目的

　　通過對java語言、JavaWeb、Oracle數據庫應用設計及SQL語言的復習和鍛煉，并且通過使用MyEclipse開發平臺設計庫存管理系統項目，以達到充分熟悉開發平臺及其應用設計。

　　同時掌握并實踐軟件項目設計規范及其開發流程：需求分析、概要設計、詳細設計、代碼編寫、系統測試及軟件手冊編寫，以便提前適應軟件公司開發流程、環境和工作要求進一步了解java開發的相關知識，掌握java開發的基本技術，豐富java開發的實戰經驗。

　　學習SQL的基礎知識及正確的運用方法，和有用的相關技術，提高自己的工作效率。

　　通過實訓，培養我們綜合運用已學知識Java語言的面向對象編程能力；培養我們動手能力；培養我們良好編程規范、編程方法；以便能較全面地理解、掌握和綜合運用所學的知識，提高自身的編程能力；增強自己的團隊協作意識，了解軟件開發的思考角度和主要流程。

　　為畢業之后能夠更快地進入工作狀態并且能夠更好的工作，打好一定的基礎。

　　二、實訓主要流程

　　1、公司管理規則，程序員素質，程序員編碼規范；

　　2、需求開發與管理；

　　3、面向對象分析與設計，面向對象編程的特性；

　　4、javaSE、javaWeb、頁面設計—JSP頁面；

　　5、數據庫設計、SQL應用；

　　6、軟件需求分析與設計；

　　7、項目實戰；

　　三、實訓內容

　　1.Oracle數據庫

　　數據庫是數據的結構化集合。

　　計算機是處理大量數據的理想工具，因此，數據庫管理系統在計算方面扮演著關鍵的中心角色，或是作為獨立的實用工具，或是作為其他應用程序的組成部分。

　　Oracle服務器還有一套實用的特性集合，這些特性是通過與我們用戶的``密切合作而開發的。

　　在我們的基準測試主頁上，給出了Oracle服務器和其他數據庫管理器的比較結果。

　　Oracle服務器最初是為處理大型數據庫而開發的，與已有的解決方案相比，它的速度更快，多年以來，它已成功用于眾多要求很高的生產環境。

　　盡管Oracle始終在不斷發展，但目前Oracle服務器已能提供豐富和有用的功能。

　　它具有良好的連通性、速度和安全性，這使的Oracle十分適合于訪問Internet上的數據庫。

　　2.java與SQL的應用。

　　Java語言是編寫數據庫應用程序的杰出語言之一，它提供了方便訪問數據的技術。

　　利用Java語言中的JDBC技術，用戶能方便地開發出基于Web網頁的數據庫訪問程序，從而擴充網絡應用功能。

　　JDBC（Java Database Connectivity，Java數據庫連接）是一種用于執行SQL語句的Java API，可以為多種關系數據庫提供統一的訪問接口。

　　JDBC由一組用Java語言編寫的類與接口組成，通過調用這些類和接口所提供的方法，用戶能夠以一致的方式連接多種不同的數據庫系統（如Access、SQL Server 20xx、Oracle、Sybase等），進而可使用標準的SQL語言來存取數據庫中的數據，而不必再為每一種數據庫系統編寫不同的Java程序代碼。

【web前端開發實訓總結】相關文章：

旅游實訓報告12-18

web前端開發實訓總結文章推薦