公司招了幾個剛畢業(yè)的學生，作為重構的新手讓我來帶。
首先感謝感謝黨、感謝國家、感謝公司給了我這樣的一個機會，對我工作的肯定和認可，讓我?guī)н@樣的一個重構團隊，同時我也明白任務的艱巨，但我一定會將工作做好，不負公司對我的期望。（哈哈，好像從小到大，老師都是教育我們要這樣先說的。）
在網(wǎng)站的發(fā)展史上，初期的網(wǎng)站建設根本不需要網(wǎng)頁重構這個職位，WEB1.0時代的網(wǎng)頁，只需要程序員，一堆堆的表格嵌套就完成，或者美工進行配合完成，先由美工負責設計好，再用一些自動化的軟件拉伸幾下，直接將設計好的圖就可以通過軟件輸出表格的布局了，根本不需要重構這個多余的職位。隨著WEB2.0的到來和W3C的規(guī)范得到世人的認可，內(nèi)容和樣式的分離更方便進行開發(fā)和維護，傳統(tǒng)的表格布局和內(nèi)容混排的方式逐漸地被淘汰，美工已不能完全一手包辦越來越復雜的效果和高要求的頁面布局了。此因催生了一個新的職位——前端工程師。
鄙人剛好作為一名WEB2.0成長起來的前端工程師，雖然說做的項目不多，但樂于與人分享。雖然分享的也許只是一些很表面甚至有些過時的東西，但也只希望為大家提個醒，最好能起到拋磚引玉的作用。
一、前端工程師的職能和作用。
什么是前端工程師？有人這樣來表述：我們是工程師中的設計師，是設計師中的工程師。上班不干別的，就是玩，弄點效果，攢兩頁面，搞點創(chuàng)新。我們就是前端攻城師（工程師）。當然這個表述有點有點輕巧、調(diào)侃的味道，工作絕對不是玩那么簡單的，有時候會為一些效果的實現(xiàn)或優(yōu)化，弄得加班加點一起開發(fā)，但其實有兩一句表述是非常中肯的，那就是：我們是工程師中的設計師，是設計師中的工程師。這句話將前端工程師的角色的定位說得很準確。前端工程師，在網(wǎng)站開發(fā)的初期，以工程師的身份來指導網(wǎng)頁的設計，前端工程師明白程序的輸出的方法，指導設計師在設計的過程中避免一些不能輸出的數(shù)據(jù)排版，指出哪一些陰影、透明、圓角的使用不能大范圍的使用等等；在進行頁面的重構的過程中，又將以一個設計師的身份將設置頁面轉化為靜態(tài)頁面，需要用代碼對設計頁面進行最初的還原，實現(xiàn)好相應的前臺的效果，排列好相應讓后臺開發(fā)的工程師輸出數(shù)據(jù)的地方，以適應后臺數(shù)據(jù)的輸出并保持頁面的不變形、不走位，在有數(shù)據(jù)輸出正常的情況下，配合程序去修改樣式，以盡量達到和設計的效果基本一致。所以在這個頁面設計和到程序的現(xiàn)在過程中，需要前端工程師起到一個橋梁的作用。
前端開發(fā)是一項很特殊的工作，前端工程師的工作說得輕松，看似輕巧，但做起來絕對不是那么的簡單。在開發(fā)過程中涵蓋的東西非常寬廣，既要從技術的角度來思考界面的實現(xiàn)，規(guī)避技術的死角，又要從用戶的角度來思考，怎樣才能更好地接受技術呈現(xiàn)的枯燥的數(shù)據(jù)，更好的呈現(xiàn)信息。簡單地說，它的主要職能就將網(wǎng)站的數(shù)據(jù)和用戶的接受更好地結合在一起，為用戶呈現(xiàn)一個友好的數(shù)據(jù)界面。
二、前端工程師的發(fā)展前景如何
前端工程師是是一個很新的職業(yè)，在國內(nèi)乃至國際上真正開始受到重視的時間不超過5年?；ヂ?lián)網(wǎng)的發(fā)展速度迅猛，網(wǎng)頁由WEB1.0到WEB2.0，再到新生的HTML5、CSS3，到現(xiàn)在手機、3G網(wǎng)絡等新科技的興起，網(wǎng)頁也由最原先的圖文為主，到現(xiàn)在各種各樣的基于哀前端技術實現(xiàn)的應用、交互和富媒體的呈現(xiàn)，更多的信息、更豐富的內(nèi)容、更友好的體驗，已經(jīng)成為網(wǎng)站前端開發(fā)的要求，網(wǎng)站的前端開發(fā)發(fā)生了翻天可覆地的變化。
網(wǎng)站的開發(fā)對前端的需要越來越重要，但個新和職業(yè)在業(yè)務還是很缺，所以高質(zhì)量的前端開發(fā)工程師將會是后五年內(nèi)一個非常熱門的職業(yè)，發(fā)展的前景非?？捎^。
三、前端工程師需要掌握的技能
作為一個前端工程師，需要掌握的技能還真的不少。
最基本的三個技能：HTML、CSS、JavaScript
這個是前端開發(fā)中最基本也是最必須的三個技能。前端的開發(fā)中，在頁面的布局時， HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現(xiàn)相應的效果和交互。雖然表面看起來這些很簡單，但這里面需要掌握的東西絕對不會少。在進行開發(fā)前，需要對這些概念弄清楚、弄明白，這樣在開發(fā)的過程中才會得心應手。
HTML：
指的是超文本標記語言 (Hyper Text Markup Language)，這個也是我們網(wǎng)頁最常用普通的語言了，經(jīng)歷了多個版本的發(fā)展，現(xiàn)在已經(jīng)發(fā)展到4.01版了，得力于W3C建立的標準和規(guī)范，現(xiàn)在已普遍升級到了XHTML，XHTML 指可擴展超文本標簽語言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成為 W3C 標準，是更嚴格更純凈的 HTML 代碼，XHTML 的目標是取代 HTML。XHTML 與 HTML 4.01 幾乎是相同的，XHTML 是作為一種 XML 應用被重新定義的 HTML，是一個 W3C 標準。W3C 將 XHTML 定義為最新的HTML版本。所有新的瀏覽器都支持 XHTML。
另外，W3C 與 WHATWG 合作創(chuàng)建一個新版本的 HTML，就是HTML5。HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準，為HTML世界注入更多驚喜，盡管HTML5 仍處于完善之中，然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持，顯示出來的生機和活力已是那樣的激奮人心，特別是前端的工作中，那些針對瀏覽器兼容的問題將能得到很好的解決，更多的效果和應用也能更方便的實現(xiàn)。
前端工程師，也必然要與時俱進，緊跟業(yè)界時代發(fā)展的前沿，不然永遠只停留在舊的技術上，只會被無情的淘汰。
其實HTML的元素也就不過幾十個，常用的元素更少，所以掌握起來的話應該不困難。但就是這些看似簡單的元素，很多新手在剛開始的時候就不注意規(guī)范，養(yǎng)成一些不好的習慣。
1、不要忽略一些細節(jié)
隨便打開一個個網(wǎng)站，隨手點到了163的首頁，163算是一個比較規(guī)范和專業(yè)的門戶網(wǎng)站了，已經(jīng)用上了HTML5的一些元素了，具體可以看到源文件。
在頭部的焦點廣告圖那里，用小BUG右鍵查看一下元素，看到這樣的一個圖像標簽img代碼：
img必備和可選的參數(shù)都有寫了上了，但是必備參數(shù)里的一個值alt沒寫（其實一些大型的專業(yè)門戶網(wǎng)站其實也是有存在一些小問題的，只要我們細心一點就能發(fā)現(xiàn)）。雖然這樣alt不寫，在頁面中也不會有任何的問題，因為這個alt屬性也只是在圖像丟失、禁用或加載不到的情況下才顯示，但是如果一些其他特定的設備訪問或一些其他條件下圖片不顯示的情況下，那這里就是一塊大紅XX和一大塊白塊，多影響用戶體驗。
雖然只是一個小小的alt屬性，但是有時候是細節(jié)決定決定成敗，用與不用，表面上看不出有什么問題，但是在某些特定的條件產(chǎn)生的作用是無法估計的，也就是從這些小小的細節(jié)就可以看出一個前端工程師的水平如何。
一些前端的新同學甚至什么也不填，放一張無任意命名意義的圖上去就算了事，養(yǎng)成這樣的習慣是非常不好的。
