A. web前端開發需要用到哪些知識
應該熟練掌握的基礎技能：
HTML4，HTML5語法、標簽、語義
CSS2.1，CSS3規范，與HTML結合實現各種布局、效果
Ecma-262定義的javascript的語言核心，原生客戶端javascript，DOM操作，HTML5新增功能
一個成熟的客戶端javascript庫，推薦jquery
一門伺服器端語言：如果有伺服器端開發經驗，使用已經會的語言即可，如果沒有伺服器端開發經驗，熟悉Java可以選擇Servlet，不熟悉的可以選PHP，能實現簡單登陸注冊功能就足夠支持前端開發了，後續可能需要繼續學習，最基本要求是實現簡單的功能模擬，
HTTP
在掌握以上基礎技能之後，工作中遇到需要的技術也能快速學習。
基本開發工具
恰當的工具能有效提高學習效率，將重點放在知識本身，在出現問題時能快速定位並
解決問題，以下是個人覺得必備的前端開發工具：
文本編輯器：推薦Sublime Text，支持各種插件、主題、設置，使用方便
瀏覽器：推薦Google Chrome，更新快，對前端各種標准提供了非常好的支持
調試工具：推薦Chrome自帶的Chrome develop tools，可以輕松查看DOM結構、樣式，通過控制台輸出調試信息，調試javascript，查看網路等
輔助工具：PhotoShop編輯圖片、取色，fireworks量尺寸，AlloyDesigner對比尺寸，以及前面的到的Chrome develop tools，
FQ工具：lantern, 壁虎漫步
學習方法和學習目標
方法：
入門階段反復閱讀經典書籍的中文版，書籍中的每一個例子都動手實現並在瀏覽器中查看效果
在具備一定基礎之後可以上網搜各種教程、demo，了解各種功能的實際用法和常見功能的實現方法
閱讀HTML，CSS，Javascript標准全面完善知識點
閱讀前端牛人的博客、文章提升對知識的理解
善用搜索引擎
目標：
熟記前面知識點部分的重要概念，結合學習經歷得到自己的理解
熟悉常見功能的實現方法，如常見CSS布局，Tab控制項等。
入門之路
以下是入門階段不錯的書籍和資料
HTML先看《HTML & CSS: Design and Build Websites》1-9章，然後《HTML5: The Missing Manual》1-4章。
CSS先看《CSS: The Missing Manual》，然後《CSS權威指南》
javascript先看《javascript高級程序設計》，然後《javascript權威指南》
HTTP看HTTP權威指南
在整個學習過程中HTML CSS JavaScript會有很多地方需要互相結合，實際工作中也是這樣，一個簡單的功能模塊都需要三者結合才能實現。
動手是學習的重要組成部分，書籍重點講解知識點，例子可能不是很充足，這就需要利用搜索引擎尋找一些簡單教程，照著教程實現功能。以下是一些比較好的教程網址
可以搜索各大公司前端校招筆試面試題作為練習題或者他人總結的前端面試題還有個人總結的面試題（帶參考答案）
http://code.tutsplus.com有各種各樣的教程
MDN也有很多教程，更重要的是裡面有詳細的文檔，需要查找某個功能時在Google搜索：xxx site:https://developer.mozilla.org
http://www.html5rocks.com/zh/也有很多優質教程
http://www.sitepoint.com/
http://alistapart.com/
原生javascript是需要重點掌握的技能，在掌握原生javascript的基礎上推薦熟練掌握jQuery，在實際工作中用處很大，這方面的書籍有《Learning jQuery》或者去jQuery官網
建一個https://github.com/賬號，保存平時學習中的各種代碼和項目。
有了一定基礎之後可以搭建一個個人博客，記錄學習過程中遇到的問題和解決方法，方便自己查閱也為其他人提供了幫助。也可以去http://www.cnblogs.com/或者http://www.csdn.net/這樣的網站注冊賬號，方便實用
經常實用Google搜索英文資料應該經常找到來自http://stackoverflow.com/的高質量答案，與到問題可以直接在這里搜索，如果有精力，注冊一個賬號為別人解答問題也能極大提高個人能力。
經典書籍熟讀之後，可以打開前面必備基礎技能部分的鏈接。認真讀對應標准，全面掌握知識
繼續提高
有了前面的基礎之後，前端基本算是入門了，這時候可能每個人心中都有了一些學習方向，如果還是沒有。
可以參考前面必備技能部分提到的那兩個項目，從裡面選一些進行發展學習。以下是一些不錯的方面：
Grunt：前端自動化工具，提高工作效率
less css：優秀的CSS預處理器
bootstrap：優秀的CSS框架，對沒有設計師的團隊很不錯，與less結合使用效果完美
requirejs：AMD規范的模塊載入器，前端模塊化趨勢的必備工具
Node.js：JavaScript也可以做後台，前端工程師地位更上一步
AngularJS：做Single Page Application的好工具
移動端web開發：智能手機的普及讓移動端的流量正在逐步趕超PC端
Javascript內存管理：SPA長期運行需要注意內存泄露的問題
High Performance JavaScript(Build Faster Web Application Interfaces)
Best Practices for Speeding Up Your Web Site：重要技能
####工具
chrome dev tools：前端開發調試利器，著重注意幾個功能：
liveload: 修改頁面後自動刷新，不用按F5
dimensions：直接在頁面上測量的利器
livestyle：css樣式修改後自動起效果，不需要刷新，elements修改後也能同步到代碼中
image tool：測量，取色
UC二維碼：移動端調試掃碼必備
pagespeed，YSlow：頁面性能分析和優化插件
馬克飛象：優秀的在線markdown編輯器，快速寫周報，做記錄
watch expression：通過表達式查看當前內存中的值
call stack：查看調用棧，開啟async，可以看非同步調用棧（這個非常有用，尤其是ajax調試的時候）
scope variables：作用域鏈上的變數，非常有用
console（廢話）
elements:元素樣式調整，很常用
sources：代碼中添加斷點，單步調試，以及單步調試過程中查看內存中的對象
network：抓包查看每個請求，非常重要，前後端聯調必備
timeline：分析渲染、js執行等等各個階段，性能優化利器
emulation：模擬移動端環境，mobile頁面開發必備
一些插件:
sublime text2：編碼方便，插件多，速度快，性能好
emmet：提升html編碼速度必備
sublimelinter + 各種語言的lint和hint：代碼糾錯
一些snippets：自動補全，提升開發效率
Intellij IDEA和WebStorm：集成開發環境，集成了各種功能，開發比sublime要方便，但會比較吃性能
Mark Men：測量、取色、標注利器，拿到視覺稿之後第一個打開的軟體
GFW Fucker：我用紅杏，可以的話買個虛擬伺服器當梯子
iHosts：非常優秀的hosts管理軟體，輕松修改hosts，開發調試必備
Charles：Mac 平台最好用的抓包分析工具
Rythem：AlloyTeam出品的代理抓包軟體，非常輕量，安裝簡單，移動端（真機）開發調試很好用
Wunderlist：一個非常不錯的Todo List，任務、需求多的時候管理起來很方便
####技能
前端的技能其實除了JavaScript（包括NodeJS）、HTML、CSS以外，還有很多。其實前端的技能樹很大，這里只能列一些我開發中見到的說一說
#####語言基礎
JavaScript：
作用域鏈、閉包、運行時上下文、this
原型鏈、繼承
NodeJS基礎和常用API
CSS：
選擇器
瀏覽器兼容性及常見的hack處理
CSS布局的方式和原理（盒子模型、BFC、IFC等等）
CSS 3，如animation、gradient、等等
HTML：
語義化標簽
#####進階
JavaScript:
非同步控制（Promise、ES6 generator、Async）
模塊化的開發方式（AMD、CMD、KMD等等）
JavaScript解釋器的一些相關知識
非同步IO實現
垃圾回收
事件隊列
常用框架使用及其原理
jQuery：基於選擇器的框架，但個人認為不能叫框架，應該算工具庫，因為不具備模塊載入機制，其中源碼很適合閱讀鑽研
AngularJS/Avalon等MVVM框架：著重理解MVVM模式本身的理念和雙向綁定的實現，如何解耦
underscore：優秀的工具庫，方便的理解常用工具代碼片段的實現
polymer/React: 組件化開發，面向未來，理解組件化開發的原理
CSS和HTML：主要是CSS3的特性和HTML5的特性，以及瀏覽器處理的流程和繪制原理
DOM樹、CSSOM樹、渲染樹的構建流程及頁面渲染的過程
解析HTML、CSS、JavaScript時造成的阻塞
HTML5相關
SVG及矢量圖原理
Canvas開發及動畫原理（幀動畫）
Video和Audio
flex box布局方式
icon fonts的使用
常用NodeJs的package：
koa
express
underscore
async
gulp
grunt
connect
request
一些理念：
響應式Web
優雅降級、漸進增強
dont make me think
網頁可用性、可訪問性、其中的意義
SEO搜索引擎優化，了解搜索引擎的原理
SPA的好處和問題
性能優化：
減少請求數量（sprite、combo）
善用緩存（application cache、http緩存、CDN、localstorage、sessionstorage，備忘錄模式）
減少選擇器消耗（從右到左），減少DOM操作（DOM和JavaScript解釋器的分離）
CSS的迴流與重繪
生態系統
npm
bower
spm
搭建一個屬於自己的博客
git pages
hexo
jekyll
#####未來
Web Componets：面向未來的組件化開發方式
HTML模板
Shadow DOM
Custom Elements
HTML Import
移動端Native開發：這也是需要了解的，以後前端工程師會經常地和webview打交道，也要了解native開發