web前端開發實訓總結（通用10篇）
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程式程式碼。