摘要：目前只有和有這個概率。是快速開發(fā)應用程序的前端工具包。調試工具前端的調試工具很多，比如，核心的的。前端流程部署，和現(xiàn)在幾乎是前端最流行的自動化的項目構建工具正則表達式瀏覽器插件開發(fā)瀏覽器原理溝通能力優(yōu)秀

下圖是前端工程師圖解：

?
前端開發(fā)的核心是HTML + CSS +?JavaScript。本質上它們構成一個MVC框架，即HTML作為信息模型（Model），CSS控制樣式（View），JavaScript負責調度數(shù)據(jù)和實現(xiàn)某種展現(xiàn)邏輯（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 語法規(guī)則如下：

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

屬性值必須加引號

屬性不能簡寫

用 Id 屬性代替 name 屬性

XHTML 元素必須被正確地嵌套

XHTML 元素必須被關閉

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

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

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

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

不要使用換行標簽
和空格來控制樣式，請用CSS。

盡量不要使用內聯(lián)CSS

?
CSS
?
1.基礎

層疊和繼承

優(yōu)先級

盒模型

定位

浮動

?
2.進階

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

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

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

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

960 Grid System [Blueprint

CSS](http://code.google.com/p/blue...

Bluetrip [Minimum

Page](http://www.minimumpage.com/)

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

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

圓角

多背景

@font-face

動畫與漸變

漸變色

Box陰影

RGBa-加入透明色

文字陰影

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

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

?
javascript

1.基礎

數(shù)據(jù)類型

變量

表達式與運算符

控制語句

函數(shù)

異常

OO

事件

BOM

閉包

?
2.進階

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

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

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

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

jQuery

YUI

DOJO

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

本地音頻視頻播放

Canvas/SVG

地理信息

硬件加速

本地運行

本地存儲

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

語義化標簽，F(xiàn)orm表單

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

MustCache

JsRender

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

Backbone.js

Spine

YUI

Agility.js

Ember.js

Batman.js

Dojo

AngularJS(MVVM)

KnockoutJS(MVVM)

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

JavaScript單元測試:QUnit

JavaScript設計模式

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

ES5:ECMAScript 5，也就是最新的JavaScript規(guī)范，對之前的JavaScript作了很多改進，增加了好多新的特性，比如JSONECMAScript 5，也就是最新的JavaScript規(guī)范，對之前的JavaScript作了很多改進，增加了好多新的特性，比如JSON。

?
Others

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

Http1.1：GET，POST方式，Request/Response 頭部，狀態(tài)碼等。

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

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

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

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

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

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

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

SEO：搜索引擎優(yōu)化

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

可用性/可訪問性：

可用性指的是：產品是否容易上手，用戶能否完成任務，效率如何，以及這過程中用戶的主觀感受可好，是從用戶的角度來看產品的質量。可用性好意味著產品質量高，是企業(yè)的核心競爭力。

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

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

正則表達式

瀏覽器插件開發(fā)

瀏覽器原理

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

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

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

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

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

從某種意義上說，優(yōu)秀的前端工程師就像是一位大使，需要時刻抱著外交官的心態(tài)來應對每一天的工作。
?
如何提高前端技術

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

閱讀優(yōu)秀的開源代碼

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

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

?
前端修煉之路

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

HMTL & XHTML

CSS基礎知識

JavaScript基礎知識

DOM

JSON

AJAX

JavaScript Frameworks

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

HTML5標簽，TML標簽語義化

CSS Sprite

瀏覽器兼容性

IE HasLayout和Block Format Content

CSS3

精通JavaScript Frameworks

HTML5

前端模板

前端MVC

模塊化開發(fā)

Http1.1

調試工具

正則表達式

響應式設計

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

CSS性能優(yōu)化

LESS and SASS

JavaScript單元測試

JavaScript設計模式

NodeJS

ES5

Web移動開發(fā)

瀏覽器插件開發(fā)

前端安全

跨域處理

SEO

A/B test

可用性/可訪問性

前端流程/部署

瀏覽器原理

出師：一代宗師。

不停的學習新的技術

交互設計能力，管理能力

?
前端的未來

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

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

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

往管理方向，比如項目經理，或者干脆轉行，比如公務員等。

學習前端的同學注意了！！！?
學習過程中遇到什么問題或者想獲取學習資源的話，歡迎加入前端學習交流QQ群：328058344