A. 設計代碼前首先應該進行 進行規范的代碼設計
相信很少有人會在網頁設計的過程中把代碼設計單獨拿出來說，雖然在軟體設計中代碼設計很受重視，但在web設計里，大家更關心網站結構設計、資料庫設計、頁面視覺設計，很少有人會真正關心前端代碼設計。這恰恰是因為代碼設計的優劣不是一般用戶所能感覺出來的，設計得差的前端代碼，在用戶使用過程中也許毫無影響，卻能將前端工程師和web程序員弄得一塌糊塗。
DIV的規范及科學統籌
說到前端代碼，不能不說DIV架構。目前主流的網站頁面架構方式已經轉向DIV+CSS的結構層和表現層脫離的方式，這個過程也叫做網站的標准化。這與以往的利用表格定位的方式完全不同，更加強調了界面元素的模塊化定位，由DIV確定模塊的界限，再由CSS代碼表現該DIV元素的表現形式。
在DIV的布局方式中，我們更多強調的是規范，因為DIV的ID名稱和CLASS類名稱是能夠由代碼編寫者自行定義的，所以有明確規范的DIV設計是前端代碼設計的前提。如今的web工作往往牽涉到一個團隊中的多人進行協作開發，代碼被閱讀和被修改的次數遠遠多於它被編寫的次數，而保持代碼易讀、易修改的關鍵，就在於在代碼編寫前期確定能被認同的代碼規范。
首先我們先了解DIV架構中的命名規則，DIV的許多規范要點體現在ID或者CLASS的命名中，絕大多數設計師習慣使用屬性命名方式：即顯示綠色14號字的類就命名為green14，藍色背景區域的類就命名為blueBg。這樣命名也未嘗不可，但是這樣的命名方式對於合作的其他職能部門的同事來說，是毫無意義的。PHP程序員不會關心這個類的字是什麼顏色，他只管這塊區域應該和哪個程序模塊介面；模板編輯也不會關心背景究竟該是前慶什麼顏色，他只管哪個區域是用來顯示頭圖、哪個區域顯示全站導航和全站通用底部。所以我們比較倡導表意命名方式和介面命名方式，比如pageHead和loginArea這樣的命名，pageHead明確表示了這塊區域的意思，而loginArea指代了這是個登錄區域的介面。不管這兩個類里的字型大小顏色等將來因為改版發生了什麼改變，它們起到的作用和所定義的固定區域是不會改變的。
其次我們了解一下DIV中類的復用，同一個頁面中，DIV的ID是唯一的，表示該頁面上獨一無二的一種特定表現；而CLASS（類）是可以無限重復使用的，表現該頁面上有某些屬性相同的若干區域，所以DIV的復用僅僅指的是類。牽涉到復用的時候，類的命名應該盡量多地表意化，有必要的情況下使用屬性命名也能起到很好的效果。比如頁面中有很多個不同的內容列表區塊，但是寬度都是760px，那麼使用contList760這樣的類名稱進行復用就比contListA、contListB、contListC……這樣單獨且表意不明顯的命名要好得多。如圖1所示的網站alistapart.com，由圖2我們可以看出，它的代碼設計非常規整。
名詞解釋
CSS是英語Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現 HTML 或 XML 等文件式樣的計算機語言。
DIV元素是用來為HTML文檔內大塊（block-level）的內容提供結構和背景的元素。DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控制，或者通過使用樣式表格式化這個塊來進行控制。
DIV+CSS是網站標准（或稱「Web標准」）中常用的術語之一，通常為了說明與HTML網頁設計語言中的表格（table）定位方式的區別，因為XHTML網站設計標准中，不再使用表格定位技術，而物悉是採用DIV+CSS的方式實現各種定位。
CSS整站規劃――網站設計的重中之重
說過DIV當然要說說CSS，CSS使現代網站大放異彩。符合標准化的網站，僅僅通過更換一個不同的CSS文件，就可以瞬間實現整站所有頁面改變更新的顯示效果。CSS統一了網頁的表現層，而不影響網站結構和數據傳輸。
而CSS的書寫方式也因設計師的不同而各有千秋，在此，我們強調CSS的設計關鍵在於代碼的縮略與復用：縮略能使CSS代碼更加簡明扼要，CSS文件也能縮小體積；復慧螞握用則是提高代碼的利用率，以最少的代碼實現最高的重復使用效率。如圖3所示，騰訊網的CSS設計就十分優秀。
首先我們來看代碼的縮略，很多編輯器生成的CSS代碼片段會像圖4一樣雜亂隨意，而實際上這段代碼能縮略掉所有不需要的空格，組合起同系列元素，使得代碼行讀起來更加輕松無負擔。
畢竟，編輯器是按照一定的程序運算而提供出來的CSS樣式，它能自動實現預期效果的CSS樣式，而絕不會自動精簡代碼。這個過程還是需要人的干預，而且對於不同的應用場合，CSS代碼中的縮略方式也會有所不同，而取誰舍誰，則完全看具體情況而定了。
其次，我們來了解CSS的復用。同樣是復用，CSS的復用情況和DIV很不同。設計中我們需要盡量實現CSS代碼的復用，盡量多利用CSS的繼承和層疊，而不是到處定義新的CSS類。在繁瑣的CSS設計中，也許會遇見兩個大部分屬性一致而只有某一兩個細節不同的類，那麼可以考慮這兩個類是否是繼承關系，或者說將它們相同的屬性提煉出來，形成另一個可供公用的類。
後期整理――代碼也可以很美
之前說的都是代碼編寫的前期規范，而頁面完成之後，代碼的後期整理對於今後的修改維護「可持續發展」也非常重要。在這里，我們需要注意以下幾個方面的內容。
1.樣式表統一：樣式表分為內聯樣式表和外聯樣式表，成型的網站架構要求對樣式表統一管理，所有的樣式表都需要獨立出來，作為一個或幾個外聯樣式表文件；除非是極特殊的情況，該CSS只在這一個頁面中出現，不會有另外的頁面需要復用它，那麼可以考慮使用內聯，而內聯樣式很多時候會被視為極不專業的做法。如圖5，色影無忌網站的設計從外觀看很符合標准化設計，但從圖6我們可以看出色影無忌的代碼設計非常混亂。
2.注釋：再科學、再規范的代碼，也不見得能一眼就被其他人讀懂，所以這個時候需要代碼注釋。CSS的注釋很簡單，在HTML里的DIV注釋因為其層級嵌套關系的問題，需要使用和的方式進行包含處理，這樣能使代碼更加模塊化。如圖7所示，新浪的頁面注釋就很整齊。
3.空格：關於CSS代碼中的空格問題一直被激烈地討論著，我的主張是，在頁面發布之前，因為代碼的規整而產生的空格是沒有問題的，這樣更便於編輯與調試，而在網站定稿上線後，可以將CSS類里的空格換行都刪除，每個定義類都並成一行代碼，這樣既能壓縮文件空間，也能使所有類的名稱整齊劃一，便於查找。
4.其他：有些編輯器產生的CSS代碼會出現大寫字元，建議統一修改成小寫，而對color:#666666之類的顏色代碼，可以縮寫為color:#666。這對維護沒增加什麼困難，而且確實減小了文件體積。
CSS標准化在頁面應用的補充
● 摒棄table布局不是說禁止使用table，table標簽仍可以用在容納表格型數據的場合，而不用於頁面布局的目的。
● 頁面中的標簽都是帶有結構含義的，盡量少因為布局的目的引入額外的div標簽。
● 頁面中的結構與表現完全分離，結構位於html文件中，表現位於css文件中。
● 盡量使用通用的CSS語法，少用特定於某種瀏覽器的CSS語法。必需要用的，則將這類語法隔離在單獨的css文件中，以便日後瀏覽器升級後刪除。
B. 什麼是web前端開發標准
對於前端，官方的定義是網站前台部分，運行在PC端，移動端等瀏覽器上展現給用戶瀏覽的網頁。用自己的話來說，前端是網頁給訪問網站的人看的內容和頁面，那前端開發顧名思義就是這些內容和頁面中代碼的實現。
現在的前端開發使得現代網頁更加美觀，交互效果顯著，功能更加強大。所以現在的前端開發，運用到的知識面更加廣泛，難度也更大。前端開發目前市場需求還是很大的，而且相對來講比較容易，很適合學習。需要學習的內容也不少，我有全套web前端視頻課資料可以發給你自學。
學習內容包括：
①計算機基礎以及PS基礎
②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）
③移動開發
④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）
⑤小程序開發
⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）
⑦就業拓展（網站SEO與前端安全技術）
互聯網行業目前還是最熱門的行業之一，學習IT技能之後足夠優秀是有機會進入騰訊、阿里、網易等互聯網大廠高薪就業的，發展前景非常好，普通人也可以學習。
想要系統學習，你可以考察對比一下開設有相關專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能力，能夠在校期間取得大專或本科學歷，中博軟體學院、南京課工場、南京北大青鳥等開設相關專業的學校都是不錯的，建議實地考察對比一下。
祝你學有所成，望採納。
C. 網站前端開發都需要掌握哪些知識
我們都知道網站開發分為 前端（客戶端）和 後端（伺服器端）兩個部分。網站開發 後端 更多的是與資料庫進行交互以處理相應的業務邏輯。需要考慮的是如何實現功能、數據的存取、平台的穩定性與性能等。至於 前端，在這里泛指Web前端，也就是在Web應用中用戶可以看得見碰得著的東西。包括Web頁面的結構、Web的外觀視覺表現以及Web層面的交互實現。主要負責實現視覺和交互效果，以及與伺服器通信，完成業務邏輯。它的核心價值在於實現用戶體驗，大型互聯網公司的用戶體驗部門，一般會包括用戶研究、交互設計、前端技術和視覺設計等方面的內容。
作為一名網站前端開發者，以下的知識是不可或缺的：
1HTMLHTML即HyperText Markup Languag，超級文本標記語言。這是網站開發中最簡單的，也是最基礎的內容，幾乎所有的開發者都必須首先經歷這個環節。必須要熟練掌握div、form、table、li 、p、span、font等等標簽，這些都是最常用的。其中尤其需要注意div和table這兩個，算是用到最多的內容。div用於布局；table用來和數據打交道（雖然table也可以用於布局,但是並不靈活）。
2CSSCSS即Cascading style Sheets層疊樣式表，其中css3我們先不談。CSS主要用於輔助html來布局和展示，我們稱之為「css樣式」。對於css要掌握的內容主要包括float、position、width、height、overflow、margin、padding等等,這些都是跟布局有關系的樣式。不管你用什麼工具軟體製作網頁，其實都有在有意無意地使用CSS。用好CSS能使你的網頁更加簡煉，為什麼同樣內容的網頁，有的人做出來有幾十KB，而高手做出來只有十幾KB，CSS在其中的作用是不言而喻的。
3JSJS即JavaScript，作為一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標准通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。我們所講的前兩個內容都很基礎，接下來的東西可能接受起來有難度，但是事實上js入門算是比較簡單的,不需要會很多東西的。基礎點的內容只要會根據某個id、或者name拿到網頁dom或者樣式、或者值,然後會給某個id或者name的元素標簽賦值、或者追加數據、追html,這個是跟數據有關系的操作,之後數據邏輯判斷。至於效果方面的,無非就是跳轉、彈框、隱藏什麼的。當然，這些東西單獨拿出來比較簡單，但是實際中幾乎沒有這么簡單的情況，很多時候都需要把這些各種各樣地結合起來。
4JQueryJQuery說白了是一個JavaScript（JS）框架，相當於把js封裝了一套的一個js插件，目的就是操作起來更方便,代碼寫的更少,它支持JS的常規操作以及一些擴展，比如圖形等，對JSON格式也能很好的解析，ajax也做了封裝，語法也比較簡單。功能十分強大。jquery入門也很簡單,那些是入門需要學的和js一樣,只是換成了jq的代碼。不好的地方是它將js語法與開發人員完全隔離，也就說你開發幾年JQuery後還會不會用純 編程都是個問題。
5CSS3+HTML5這是最近比較流行的內容了。HTML5在原有的基礎上新增和移除了一些元素，提供了對表單的強大支持。它並非僅僅用來表示Web內容，它的新使命是將Web帶入一個成熟的應用平台，在HTML 5平台上，視頻，音頻，圖象，動畫，以及同電腦的交互都被標准化。CSS3對於我們Web開發者來說不只是新奇的技術，更重要的是這些全新概念的web應用給我們帶來更多無限的可能性，也極大地提高了我們的開發效率。我們將不必再依賴圖片或者Javascript 去完成圓角、多背景、用戶自定義字體、3D動畫、漸變、盒陰影、文字陰影、透明度等提高Web設計質量的特色應用。
6簡單後台語言作為一名前端開發者不僅需要掌握上面講的有關前端的知識，還必須懂一點後台語言,比如java、php等等。因為前台界面的數據都是從後台來的,我們必須知道怎麼跟後台交互數據。這樣不僅能夠節約時間，還可以讓前端代碼更規范，讓後台開發者減少一些不必要的麻煩。否則的話，可能因為前台的寫法和後端給來的數據不能結合上,導致前端代碼必須重新編寫。