下圖是前端工程師圖解：

　　

　　前端開發的核心是HTML + CSS + Java。本質上它們構成一個MVC框架，即HTML作為信息模型（Model），CSS控制樣式（View），Java負責調度數據和實現某種展現邏輯（Controller）。

　　HTML

　　1.標簽的分類

　　- 標簽表示一個元素

　　按性質劃分： Block-Level和Inline-Level

　　按語義劃分：

　　Headings： h1， h2， h3， h4， h5， h6

　　Paragraphs： p

　　Text Formatting： em， strong， sub， del， ins， small

　　Lists： ul， li， ol， dl， dt， dd

　　Tables： table， thead， tbody， tr， th， td

　　Forms and Input： form， input， select， textarea

　　Others： div， span， a， img，

　　HTML5： header， footer， article， section

　　2.XHTML

　　XHTML 于2000年的1月26日成為 W3C 標準。W3C 將 XHTML 定義為最新的HTML版本。XHTML 將逐漸取代 HTML。XHTML是通過把 HTML 和 XML 各自的長處加以結合形成的。XHTML 語法規則如下：

　　- 屬性名和標簽名稱必須小寫

　　屬性值必須加引號

　　屬性不能簡寫

　　用 Id 屬性代替 name 屬性

　　XHTML 元素必須被正確地嵌套

　　XHTML 元素必須被關閉

　　3.標簽的語義化

　　為表達語義而標記文檔，而不是為了樣式，結構良好的文檔可以向瀏覽器傳達盡可能多的語義，不論是瀏覽器位于掌上電腦還是時髦的桌面圖形瀏覽器。結構良好的文檔都能向用戶傳達可視化的語義，即使是在老的瀏覽器，或是在被用戶關閉了 CSS 的現代瀏覽器中。同時結構良好的HTML代碼也有助于搜索引擎索引你的網站。

　　- 不要使用table布局，table是用來表格顯示的。

　　不要到處濫用div標簽，div是用來分塊用的

　　不要使用樣式標簽，如font， center， big， small， b， i，樣式可以用CSS來控制，b和i可以用strong和em來代替。

　　不要使用換行標簽

　　和空格來控制樣式，請用CSS。

　　盡量不要使用內聯CSS

　　CSS

　　1.基礎

　　- 層疊和繼承

　　優先級

　　盒模型

　　定位

　　浮動

　　2.進階

　　- CSS Sprite：CSS Sprite主要用于前端性能優化的一種技術，原理是通過將多張背景圖片合成在一張圖片上從而減少HTTP請求，加快載入速度。

　　瀏覽器兼容性：絕大部分情況下我們需要考慮瀏覽器的兼容性，目前正在使用的瀏覽器版本非常多，IE6， IE7， IE8， IE9， IE10， Chrome， Firefox， Safari。

　　IE HasLayout和Block Format Content：IE HasLayout是一個 Internet Explorer for Windows的私有概念，它決定了一個元素如何顯示以及約束其包含的內容、如何與其他元素交互和建立聯系、如何響應和傳遞應用程序事件、用戶事件等。這種渲染特性可以通過某些 CSS 屬性被不可逆轉地觸發。而有些 HTML 元素則默認就具有”layout”。目前只有IE6和IE7有這個概率。BFC是 W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。這個其實和瀏覽器的兼容性有關，因為絕大部分的兼容性問題都是它們引起的。

　　CSS Frameworks：

　　CSS框架是一系列CSS文件的集合體，包含了基本的元素重置，頁面排版、網格布局、表單樣式、通用規則等代碼塊，用于簡化web前端開發的工作，提高工作效率。目前常見框架有：

　　960 Grid System

　　Blueprint CSS

　　Bluetrip

　　Minimum Page

　　還是一個比較出名和特殊的框架是Twitter的Bootstrap。Bootstrap是快速開發Web應用程序的前端工具包。它是一個CSS和HTML的集合，它使用了最新的瀏覽器技術，給你的Web開發提供了時尚的版式，表單，buttons，表格，網格系統等等。它是基于Less開發的。不支持IE6，在IE7和IE8里效果也不咋地。

　　CSS3：

　　雖然CSS3還沒有正式成為標準，但是包括IE9+， chrome， Firefox等現代瀏覽器都支持CSS3。CSS提供了好多以前需要用Java和切圖才能搞定的功能，目前主要功能有：

　　圓角

　　多背景

　　@font-face

　　動畫與漸變

　　漸變色

　　Box陰影

　　RGBa-加入透明色

　　文字陰影

　　CSS性能優化：CSS 代碼是控制頁面顯示樣式與效果的最直接“工具”，但是在性能調優時他們通常被 Web 開發工程師所忽略，而事實上不規范的 CSS 會對頁面渲染的效率有嚴重影響，尤其是對于結構復雜的 Web 2.0 頁面，這種影響更是不可磨滅。所以，寫出規范的、高性能的 CSS 代碼會極大的提高應用程序的效率。

　　LESS and SASS：CSS 預處理器，用來為 CSS 增加一些編程的的特性，無需考慮瀏覽器的兼容性問題，例如你可以在 CSS 中使用變量、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧，可以讓你的 CSS 更見簡潔，適應性更強，代碼更直觀等諸多好處。SASS基于Ruby開發。LESS既可以在客戶端運行，也可以借助Node.js或者Rhino在服務端運行。

　　java

　　1.基礎

　　- 數據類型

　　變量

　　表達式與運算符

　　控制語句

　　函數

　　異常

　　OO

　　事件

　　BOM

　　閉包

　　2.進階

　　- DOM：DOM即文檔對象模型，HTML DOM 定義了訪問和操作HTML文檔的標準方法。幾乎所有的現代瀏覽器都能很好的支持DOM了。

　　JSON：（Java Object Notation） 是一種輕量級的數據交換格式，易于人閱讀和編寫，同時也易于機器解析和生成。是目前事實上數據交換的標準格式，幾乎所有語言都支持JSON，比XML強太多了。

　　AJAX：即“Asynchronous Java and XML”（異步Java和- XML），AJAX并非縮寫詞，而是由Jesse James Gaiiett創造的名詞，由Google發揚光大。用于創建更好更快以及交互性更強的 Web 應用程序的技術。

　　Java Frameworks：極大簡化我們Java編程的工作量，它主要提供了以下幾個主要功能： DOM操作，跨瀏覽器兼容性，以及程序架構。當然像jQuery它本身其實并不是一個框架，它是一個庫（lib）。目前主流的框架或庫有如下幾個：

　　jQuery

　　YUI

　　DOJO

　　HTML5：同CSS3類似，即雖然沒有成為標準，但是主流的瀏覽器都支持了。HTML5不是HMTL，雖然也提供了一些新標簽，但是它的主要用途還是Java。HTML5主要提供以下功能：

　　本地音頻視頻播放

　　Canvas/SVG

　　地理信息

　　硬件加速

　　本地運行

　　本地存儲

　　從桌面拖放文件到瀏覽器上傳

　　語義化標簽，Form表單

　　前端模板：主要是為了解決復雜的數據拼接問題，可以將模板語言轉換化為HTML結構，可以大大簡化工作量，同時代碼的可維護性得到很大的提高。目前比較主流前端模板有：

　　MustCache

　　JsRender

　　前端MVC:Web應用的功能越來越強，Java代碼也越來越多，大量的JS代碼要以何種架構來組織就成了一個亟待解決的問題，于是就有人把傳統的MVC架構移植到前端來解決這些問題。目前主流前端MVC框架主要有以下這些：

　　Backbone.js

　　Spine

　　YUI

　　Agility.js

　　Ember.js

　　Batman.js

　　Dojo

　　AngularJS（MVVM）

　　KnockoutJS（MVVM）

　　模塊化開發：特點是“模塊化開發，按需加載“。這其中CommonJS組織定義了AMD的規范用來規范瀏覽器端的模塊定義。RequireJS和SeaJS是實現了AMD的兩個優秀的框架。詳見：http://www.weakweb.com/articles/341.html

　　Java單元測試：QUnit

　　Java設計模式

　　NodeJS：把Java移植到服務器端了，這樣前端和后端就可以使用同樣的技術，方便統一開發。而且NodeJS是非阻塞調用的，在特定領域性能是非常強勁的。而且這是前端開發人員進軍后臺開發的好機會，進而前后端統一開發，但又不用去學習其它后臺開發語言。

　　ES5:ECMA 5，也就是最新的Java規范，對之前的Java作了很多改進，增加了好多新的特性，比如JSONECMA 5，也就是最新的Java規范，對之前的Java作了很多改進，增加了好多新的特性，比如JSON。

　　Others

　　響應式設計：伴隨著各種智能設備的流行，響應式設計現在是非?；馃帷Ｒ郧白鼍W頁只要面向PC機的瀏覽器，頁面直接固定寬度就行，比如960px，而現在通過手機的訪問量已經超過PC機，并且設備的尺寸多種多樣，未來會更多。在這種背景下，網頁支持所有設備進行訪問是基本要求了，而響應式設計能很好的解決這些問題。

　　Http1.1：GET，POST方式，Request/Response 頭部，狀態碼等。

　　Web移動開發：開發方式一般是native的方式或者Web方式，作為前端開發人員來說自然是去學習Web移動開發了。PhoneGap是必學的，前端層面的框架如jQueryMobile， Sencha Touch， jQTouch等都是不錯的選擇。

　　前端安全：隨著前端技術的發展，安全問題已經從服務器悄然來到了每一個用戶的的面前，盜取用戶數據， 制造惡意的可以自我復制的蠕蟲代碼，讓病毒在用戶間傳播，使服務器當掉。 更有甚者可能會在用戶不知覺得情況下，讓用戶成為攻擊者，這絕對不是駭人聽聞。富客戶端的應用越來越廣，前端的安全問題也隨之增多。常見的攻擊方法有：

　　XSS，跨站腳本攻擊（Cross Site ）。它指的是惡意攻擊者往Web頁面里插入惡意html代碼，當用戶瀏覽該頁之時，嵌入的惡意html代碼會被執行，從而達到惡意用戶的特殊目的。

　　CSRF（Cross Site Request Forgery），跨站點偽造請求。顧名思義就是 通過偽造連接請求在用戶不知情的情況下，讓用戶以自己的身份來完成攻擊者需要達到的一些目的。

　　cookie劫持，通過獲取頁面的權限，在頁面中寫一個簡單的到惡意站點的請求，并攜帶用戶的cookie 獲取cookie后通過cookie 就可以直以被盜用戶的身份登錄站點。

　　跨域處理：同源策略規定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操作另外一個域的絕大部分屬性和方法。所謂的跨域處理就是處于不用域之間的腳步互相調用，目前有很多方法來處理它。

　　調試工具：前端的調試工具很多，比如Firebug，Webkit核心的web inspector， IE的iedeveloper。HTTP相關的fiddler， httpwatch等，還有格式化代碼的jsbeatutifier，它有助于閱讀壓縮處理過的Java代碼。IETester可以模擬所有的IE版本，是調試IE兼容性的好工具。

　　SEO：搜索引擎優化

　　A/B test：確定兩個元素或版本（A和B）哪個版本更好，你需要同時實驗兩個版本。最后，選擇最好的版本使用。

　　可用性/可訪問性：

　　可用性指的是：產品是否容易上手，用戶能否完成任務，效率如何，以及這過程中用戶的主觀感受可好，是從用戶的角度來看產品的質量?？捎眯院靡馕吨a品質量高，是企業的核心競爭力。

　　可訪問性：上網用戶中那些視力受損的人，通過屏幕閱讀器使用鍵盤命令將網頁的內容讀給他們聽。以語義化的HTML（結構和表現相分離的HTML）編寫的網頁文件，就可以讓此類用戶更容易導航，且網頁文件中的重要信息也更有可能被這些用戶找到。

　　前端流程/部署：Grunt，Bower和Yeoman現在幾乎是前端最流行的自動化的項目構建工具

　　正則表達式

　　瀏覽器插件開發

　　瀏覽器原理

　　溝通能力

　　優秀的前端工程師需要具備良好的溝通能力，因為你的工作與很多人的工作息息相關。在任何情況下，前端工程師至少都要滿足下列四類客戶的需求。

　　產品經理——這些是負責策劃應用程序的一群人。他們能夠想象出怎樣通過應用程序來滿足用戶需求，以及怎樣通過他們設計的模式賺到錢（往往事與愿違）。一般來說，這些人追求的是豐富的功能。

　　UI設計師——這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什么敏感、交互的一貫性以及整體的好用性。他們熱衷于流暢靚麗但并不容易實現的用戶界面，但考慮問題往往不周全。

　　項目經理——這些人負責實際地運行和維護應用程序。項目管理的主要關注點，無外乎正常運行時間（uptime）——應用程序始終正?？捎玫臅r間、性能和截止日期。項目經理追求的目標往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。

　　最終用戶——當然是應用程序的主要消費者。盡管我們不會經常與最終用戶打交道，但他們的反饋意見至關重要；沒人想用的應用程序毫無價值。最終用戶要求最多的就是對個人有用的功能，以及競爭性產品所具備的功能。

　　從某種意義上說，優秀的前端工程師就像是一位大使，需要時刻抱著外交官的心態來應對每一天的工作。

　　如何提高前端技術

　　- Github是一個優秀的代碼托管網站，我們可以在上創建我們個人的項目，同時也是學習的好地方，我們可以關注其它優秀的項目。JSFiddle是一個web開發人員的練習場，一個可以在很多方面應用的工具。我們可以用他來在線編輯一些HTML，CSS，java片段。你編輯的代碼可以與其他人分享，或嵌入你的博客等

　　- 閱讀優秀的開源代碼

　　- 關注技術發展趨勢，了解最新的行業技術，可以通過訂閱知名博客，閱讀技術新聞獲取

　　- 寫博客/記筆記，可以進行知識積累。

　　前端修煉之路

　　入門：打基礎同時能參與到項目中去。

　　HMTL & XHTML

　　CSS基礎知識

　　Java基礎知識

　　DOM

　　JSON

　　AJAX

　　Java Frameworks

　　深入：掌握前端核心技術，可以獨立干活。

　　HTML5標簽，TML標簽語義化

　　CSS Sprite

　　瀏覽器兼容性

　　IE HasLayout和Block Format Content

　　CSS3

　　精通Java Frameworks

　　HTML5

　　前端模板

　　前端MVC

　　模塊化開發

　　Http1.1

　　調試工具

　　正則表達式

　　響應式設計

　　潛出：把握整個前端項目，做整個前端項目的架構師。

　　CSS性能優化

　　LESS and SASS

　　Java單元測試

　　Java設計模式

　　NodeJS

　　ES5

　　Web移動開發

　　瀏覽器插件開發

　　前端安全

　　跨域處理

　　SEO

　　A/B test

　　可用性/可訪問性

　　前端流程/部署

　　瀏覽器原理

　　出師：一代宗師。

　　不停的學習新的技術

　　交互設計能力，管理能力

　　前端的未來

　　- 走技術流路線，即深入研究前端相關的各項技術，比如瀏覽器原理，Java本身的研究，W3C各種標準等。前端技術發展很快，各種新技術層出不窮，這條路走下去是很累的。

　　往交互設計方向走，前端工程師做到一定程度后交互設計能力也會得到很大的提高，對整個信息架構的把握能力也會更強?？梢院芎玫膹浹a視覺設計師在交換設計上的不足。這條路其實和第一條是不沖突的，甚至可以理解為同一條路。

　　往后走，即去學習后臺開發的技術，比如JAVA/PHP等，其實絕大部分傳統的后臺開發人員就是這個狀態，即前后臺都做。個人認為這樣的話其實已經走回老路了，畢竟前端就是從原來的后臺開發那里獨立出來的。