WEB前端知識總結

一直想着整理一下關於前端的知識體系和資料，工做忙了些，擠擠總會有的，
資料不少，就看你能不能耐下心堅持去學了，要多學多敲多想，祝你進步~

學習以前首先要大概瞭解什麼是HTML ,CSS , JS：
一句話歸納：HTML 是骨骼， CSS是皮膚， JS只是夾在中間的神經組織！
細說的話：
HTML是由多種骨頭(標籤)組成的骨架。
HTML5是更多的新骨頭(標籤),同時去掉了之前以爲很差用的骨頭.
CSS是皮膚。CSS3是更美的皮膚
JS控制單個動做。(擡手,張嘴,放下手,擡腿,轉頭,握拳等)
jQuery是把一組經常使用動做編排成了一個招式。

寫給想成爲前端工程師的同窗們

基礎學習：

代碼有多難？——寫給網頁設計師的代碼書
w3cschoolHTML教程
初學者學習文檔[菜鳥教程]
夢之都HTML教程
HTML 30分鐘入門教程
HTML教程適合初學者[薦]
零基礎的網站開發初學者應如何系統地學習？

視頻學習：

慕課網[薦] HTML+CSS基礎課程
智能社極客學院StuQ
css學習之優酷首頁實戰css學習之新浪首頁實戰
智能社JS教學
哈佛大學公開課：構建動態網站

提高學習：

書籍推薦：[書是人類的好朋友]
分享些前端的好書，說說個人web前端之路
有哪些關於前端開發技術（HTML、CSS、JavaScript 等）值得推薦的書籍？
從菜鳥到大牛的前端書單
前端書籍資料PDF 公開

前端入門：[工欲善其事 必先利其器]
1. web前端開發分享-css,js入門篇
2. web前端開發分享-css,js進階篇
3. web前端開發分享-css,js提升篇
4. web前端開發分享-css,js工具篇
5. web前端開發分享-css,js深化篇
6. web前端開發分享-css,js移動篇
Web前端工程師成長第一階段(基礎篇)
Web前端工程師成長第二階段(佈局篇)

前端規範
編碼規範 by @mdo中文版
前端編碼規範（1）—— 通常規範
前端編碼規範（2）—— HTML 規範
前端編碼規範（3）—— JavaScript 規範
前端編碼規範（4）—— CSS 和 Sass (SCSS) 規範


CSS
CSS參考手冊
HTML/CSS開發規範指南
前端編碼規範之CSS
CSS預處理SCSS入門篇
CSS預處理LESS入門篇
NEC 更好的css方案
精通CSS+DIV 網頁樣式與佈局 【書籍】
精通CSS：高級Web標準解決方案（第2版）【書籍】

CSS RESET：[css重置]
css reset 是什麼
cssreset
normalize.css

CSS Hack：[建議推行廢棄ie六、七、8瀏覽器]
css hack是什麼
不一樣瀏覽器（IE6,IE7,IE8,FF）專用標籤 瀏覽器hack

常見css知識點：
css sprite使用筆記總結
SASS 和 LESS 區別
less即學即用less入門
Sass基礎入門(基礎篇)
Sass和Compass必備技能之Sass篇
Sass和Compass必備技能之Compass


JS
JavaScript教程 【廖雪峯教程】
JavaScript 資源大全中文版
ECMAScript 6入門 ES6Learn ES2015

值得收藏！JavaScript語言基礎知識總結
JavaScript初學者應注意的七個細節
前端JQuery系列：入門教程 | 源碼剖析 | 框架設計 | 慕課網教程 byJsAaron
jquery學習jqueryAPI中文文檔 javascript 設計模式
jquery性能優化的十種方法
鋒利的jQuery(第2版) 【書籍】


Js知識點：
知道這20個正則表達式，能讓你少寫1,000行代碼
你不知道的 Javascript
回調地獄的此生前世@JavaScript

常見Js插件：
性能卓越的 js 模板引擎artTemplate
layui（彈層、日期、分頁、模板引擎）
echarts圖表highcharts圖表Chart.js（wap）圖表
代碼高亮highlight
走進svg的世界 百度腦圖 svg巔峯之做

HTML5+CSS3：
HTML5從入門到精通【書籍】
CSS動畫簡介CSS Animate
H5專題多屏滾動優秀案例整理

H5：
Zepto.jsZepto.js中文版
SWIPE JS – 移動WEB頁面內容觸摸滑動類庫
從零搭建移動H5開發項目實戰
移動端h5開發相關內容總結


UI框架：
Bootstrap
semantic-ui
weui[H5]
aui[H5]
frozen-ui[H5]
Sui[H5]
zui[PC]
Jquery.mobile[H5]
Yo
amazeui

資源分享：
前端技能彙總 Frontend Knowledge Structure[薦]
前端收集（前端學習資源） 
一些前端總結分享
Tencent AlloyTeam 2016
前端開發資源導航
谷歌開發者中國

乾貨
awesome by sindresorhus

Node.js 
因Nodejs更新太快，遇到問題學會搜索以及查看github上更新的最新文檔介紹，其所依賴的組件的方法以其github上爲準，同時建議使用mac/linux玩node
Node.js 入門 [薦] 一塊兒學 Node.jsnodejs新手指南
Node.js學習視頻進擊Node.js基礎
下一代web框架Koajs
高可用架構專用《全棧工程師之路-Node.js》
深刻淺出js（Node.js）異步流程控制
微服務選型之Modern Node.js
Java項目如何與Node.js共存？

Angular.js
學習AngularJs
AngularJs視頻
Angular展現案例
Angular2
Angular2案例
Angular 2.x 從0到1

Vue.js
瞭解vue
學習vue
優秀Vue組件集成庫：
Element
iView - 一套高質量的UI組件庫
vue實踐1：小米商城
vue實踐2：CNode
vue實踐3：CNode2.0

Vue全套學習視頻 百度網盤：連接：https://pan.baidu.com/s/1slD6rJf 密碼：zxhm 

React.js
ReactJS 中文技術分享
React 入門實例教程
Ant.Design
貼吧 React 最佳實踐

微信公共帳號
初識Java微信公衆號開發
PHP實現微信公衆平臺開發—基礎篇
PHP實現微信公衆平臺開發—提高篇
7天開發Nodejs微信公共號 密碼: k7h8
Node.js微信開發

微信小程序 
微信小程序接入指南
狼叔直播的微信小程序講義
微信小程序示例 - 剪刀石頭布
【騰訊Bugly乾貨分享】微信小程序開發思考總結——騰訊「信用卡還款」項目實踐
微信小程序全面實戰，架構設計 && 躲坑攻略

VR
Three.js

require.js
學習RequireJs
快速理解RequireJs
seajs與requirejs區別

Sea.js
一步步學會使用SeaJS 2.0 ★
sea 使用文檔
Sea.js 創始人玉伯專訪 
前端模塊化開發的價值_玉伯 ☆
API 快速參考

Avalon.js
學習Avalon.js
AvalonJs學習視頻

Backbone.js
學習Backbone.js
學習Underscore.js

開發工具：
前端開發工具Sublime Text 使用教程【薦】
前端高效開發之「一鍵切圖」
Mark Man——高效的設計稿標註、測量工具
WEB調試工具---Firebug[firefox]
15個必須知道的chrome開發者技巧
sketchcn矢量設計工具（收費）
瀏覽器兼容性表
puer(快速啓動本地服務localhost)
百度短網址
mac用戶前端開發須要瞭解的
WTS：基於Web的Terminal控制檯

前端自動化工具相關
yeoman
bower
grunt
gulp
webpack
基於webpack搭建前端工程解決方案探索
Grunt-beginner前端自動化工具[grunt\gulp]
FIS3 , 爲你定製的前端工程構建工具

Git:
Git教程
git經常使用命令

GitHub:
GitHub入門與實踐 【書籍】
GitHub 部署靜態 HTML 網頁

MarkDown:
什麼是Markdown語法？
基於Markdown的編輯器
markdown 語法入門

[延伸]SVN:
項目管理SVN使用教程[windows]
項目管理SVN使用教程[mac]
Mac 上最好用的 SVN 客戶端是什麼

[延伸]WebApp：
Hello，移動WEB
Web app設計淺談 
Web App開發入門


MUI開發

[延伸]Hybrid App:
ionic
ionic視頻教程

[延伸]React
React Facebook
React 入門實例教程
Amaze UI React
React.JS中文基礎教程 密碼: zhsp

[延伸]IOS學習：
IOS學習目錄
玩兒轉Swift
The Swift Programming Language 中文版

[延伸]Android學習：
Android學習目錄

[延伸]Ubuntu學習：
【ubuntu】系統使用小竅門總結
【ubuntu】安裝配置Mysql
【ubuntu】導入mysql數據庫文件

[延伸]Java學習：
Java程序員由菜鳥到笨鳥

[延伸]Cocos2d：
Cocos2d學習
Cocos2d視頻

[延伸]團隊合做：
團隊協同工具worktile
有道雲筆記協做
Coding - 讓開發更簡單!

[延伸]PHP
Thinkphp
Thinkphp學習視頻 密碼: t65d

[延伸]建站
阿里雲ESC服務 推薦碼5D2D05（結算時首次可9折）
阿里雲Linux一鍵安裝web環境全攻略
阿里雲備案

[延伸]Nginx
Nginx 配置簡述

網站優化：
Yahoo軍規
漫談頁面優化
Web性能優化：What? Why? How?
移動網站性能優化：網頁加載技術概覽
web前端頁面性能優化小結前端各類優化
圖片延遲加載Lazy Load Plugin for jQuery

頁面重構：
先後端分離的思考與實踐[薦]
重新浪微博的改版談網頁重構
經驗分享：網頁設計與重構那些事兒
中文網頁重設與排版：TYPO.CSS

原理探索：[瞭解原理纔是王道]
前端必讀：瀏覽器內部工做原理

技術峯會：
慕課網技術沙龍以前端專場
AlloyTeam前端技術大會(移動web經驗分享)
D2前端技術論壇——2014綻開
Qnext前端交互沙龍
去哪兒前端沙龍分享第二期
中國首屆CSS開發者大會

前端面試：
2014年最新前端開發面試題
前端開發面試題大收集 
2014阿里巴巴前端線上筆試題以及答案
前端面試題合集

切圖：
前端工程師必備的PS技能——切圖篇
作ui必備–PS切圖動做用法
[切圖]photoshop切片使用小技巧（切圖）
[切圖]PhotoshopCC新功能 生成圖像資源（切圖）
iPhone 6 plus 適配切圖方法分享(原創)
iPhone6和iPhone6 plus的iOS8設計尺寸參考指南
教你iOS APP設計一稿支持iPhone5/iPhone6/Plus
iOS 的 APP 在系統中如何適應 iPhone 5s/6/6 Plus 三種屏幕的尺寸？
關於」點九」
APP切圖那點事兒–詳細介紹android和ios平臺

交互設計:
一名交互設計師平時要積累哪些東西？
交互設計精華問答
響應式設計（Responsive web design）
複雜產品的響應式設計
響應式網站的產品需求和設計流程詳解

字體 圖標：
Iconfont-阿里巴巴矢量圖標庫
Font Awesome——完美的圖標字體
[字體] fontawesome4.2不支持IE7
[字體] fontawesome3.2.1支持IE7
css3 @font-face
網頁中展現中文字體 適用於無改動的文字展現

一些文章：
思索 | 入行幾年後，互聯網人的將來應該在哪裏？
2015 前端[JS]工程師必知必會
HTML5定稿：手機App將三年內消失，互聯網世界的第二次大戰

知乎問答：[知乎前端大神]
vue，angular，avalon這三種MVVM框架之間有什麼優缺點？
vue、react和angular 2.x誰是2016年的主流？
Web建站技術中，HTML、HTML五、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什麼？
HTML、CSS、JavaScript、PHP、 MySQL 的學習順序是什麼？
大公司裏怎樣開發和部署前端代碼？[薦]
知乎上，前端開發領域有哪些值得推薦的問答？
前端大牛們都學過哪些東西？
有哪些常常被誤用的 HTML、JavaScript、CSS 的元素、方法和屬性？
Google V8 引擎運用了哪些優秀的算法？
如何幫助前端新人入門和提升？
怎樣成長爲一個優秀的 Web 前端開發工程師？
天貓的前端工程師和團隊在行業內處於什麼水平？
作前端開發必須要掌握切圖技能嗎？
有哪些 JS 調試技巧？
近來國內外有哪些用戶界面、交互體驗設計優秀的產品？優秀在哪裏？
一名合格的前端工程師的知識結構是怎樣的？
網站效果視差滾動
若想學 HTML，應從哪裏入手？
前端開發中，對圖片的優化技巧有哪些？
前端工程師的價值體如今哪裏？
如今網頁設計中的爲何少有人用 11px、13px、15px 等奇數的字體？
爲何 Web 前端開發不拋棄 HTML 和 CSS，用純 JavaScript 開發？
2014 年底有哪些比較火的 Web 開發技術？
關於 AngularJS 框架的使用有哪些經驗值得分享？
LABjs、RequireJS、SeaJS 哪一個最好用？爲何？
有哪些不錯的前端開發博客？
怎樣防止重複發送 Ajax 請求？
C、C++、Java、JavaScript、PHP、Python、Ruby 這些語言分別主要用來開發什麼？
在今天，利用 HTML5 開發和發佈大型跨平臺網遊，可行性如何？要解決哪些問題？
如何看待 HTML5 開源遊戲引擎 Egret，HTML5 遊戲開發的前景如何？
Bootstrap 3 有哪些改進？
如何理解 web 語義化？
前端工程師應該對 HTTP 瞭解到什麼程度？從哪些途徑去熟悉更好？
怎麼斷定web前端架構師的能力高低？
想深刻了解一下 jQuery 的源碼，可是以爲學習曲線有點陡峭，有沒什麼好的方法或者學習資源推薦？

大神博客：（前端成長路上掉過的坑，栽過的溝，翻過的牆。。。）
前端博客 by張克軍 （考慮到github可能被牆，弄到了個人coding）
菜鳥前端成長之路
前端亂燉
F2E-前端技術社區
前端開發中遇到的工程問題
阮一峯的網絡日誌
360月影

2016年
整年乾貨濃縮成一篇文章，這本技術人修煉祕籍你就收下吧

2015年

• 阿里無線前端性能優化指南 (Pt.1 加載期優化) by @曉田
• Web中的圖標 by @大漠
• 我理解的阿里無線前端「架構」（半雞湯，少乾貨） by @hongru
• 寫給前端面試者 by @大漠
• 手機淘寶這三年（更新PPT同步錄音視頻） by @渚薰
• 手機淘寶前端的圖片相關工做流程梳理 by @勾三股四
• 高級CSS filters by @大漠
• Font Boosting by @尚左
• 15年雙11手淘前端技術巡演 - 前言 by @hongru
• 對無線電商動態化方案的思考（一） by @勾三股四
• 對無線電商動態化方案的思考（二） by @勾三股四
• 對無線電商動態化方案的思考（三） by @勾三股四
• 使用Flexible實現手淘H5頁面的終端適配 by @大漠
• POPLAYER起來HIGH~~ by @靖一
• 雙十一敲鐘項目總結 by @青纓
• 雙11密令紅包的前端技術方案 by @頌奇
• 15年雙11手淘前端技術巡演 - H5性能最佳實踐 by @曉田

前端的路，一步一步來
[路漫漫其修遠兮，吾將上下而求索]

CSS不能編程？用Less、Sass、Stylus、甚至直接用 Absurd，框架除了Bootstrap還有不少。JS寫多了很麻煩？jQuery。移動開發？Zepto.js。結構很差？找框架，Backbone.js是MVC，AngularJS和Ember.js是MVVM，Twitter還弄了個事件驅動框架Flight。庫多了要優化加載？RequireJS。

代碼質量成問題？Jasmine、QUnit、Mocha作單元測試。各類瀏覽器都要測？用Karma。測試經過了部署還有問題？持續集成，用Travis CI。用戶行爲也要測？用Selenium 。樣式測試還有Viff 。以爲JS都夠麻煩的？用CoffeeScript。

想作動畫？Canvas或SVG還有CSS3幫忙，幹掉Flash。SVG太難畫？用Snap.svg。想開發遊戲？用Canvas。本身寫FPS過低？用框架，CreateJS.。2D太幼稚？three.js幫你用WebGL開發3D，還不夠給力？asm.js讓你在瀏覽器中擁有虛幻3引擎。

這一堆東西都要配置部署，麻煩，用Grunt，庫太多？用Bower管理，項目開始要建立各類文件文件夾？用Yeoman。開源項目太多了，GitHub.上找，不會？學Git。順便用Jekyll託管博客，不是吧還有Ruby這玩意...SASS也是Ruby寫的，等等Sublime Text是Python寫的，要寫插件？也學一下。調試太難？用Chrome開發者工具，一堆API和功能。

光在電腦瀏覽器上跑不給力？移動開發HTML5，離開網絡就渣了？HTML5離線應用。不如原生應用？用PhoneGap。想調用原生API？開發Firefox OS應用吧。瀏覽器應用也得會吧，Chrome Firefox都有本身的文檔。接着是否是把後端甩了，本身來，裝Node.js，因此還得學點服務器知識，想用npm管理node包？linux技巧shell神馬的也得學。想先後端通吃？再看看http協議。Web精通了？node-webkit 讓你能夠寫桌面程序了，繼續學吧。

想學模塊化開發？看看CommonJS和AMD規範。理解JS有誤差？看看ECMA-262，等等不知道何時第6版就要出了。瀏覽器各不相同，弄不清該怎麼兼容？看看W3C標準，HTML寫出來人看的懂，機器讀不懂？要SEO，要支持殘障人士？看HTML語義化，全會了但IE就是不支持？叫不出名字的瀏覽器尼瑪連JS都不知道是啥？漸進加強。想一次把各類設備全搞定？響應式設計。

而後上面這些不過是一些討巧的小技術。公司作什麼業務的？瞭解一下行業信息。面向大衆的產品？交互設計。美工不給力？UI設計。外包和諮詢？設計模式、重構方法、算法、數據結構。知道軟件工程嗎？瞭解一下敏捷開發，或許還能夠試試TDD、ATDD、BDD。

看了這麼多東西，第一反應是否是求中文文檔？學英語去吧。

這些也不過是我目前所能看到的一小部分，並且每段基本都是到了一個邊界，並非沒得學了，而是繼續學又是另外一片天地。真心但願有人能幫我填補知識盲區。另外，我僅把一些知識點串起來，不全或不對的地方請見諒。