web前端知識總結_ZenDei技術網路在線

前言：一直想著整理一下關於前端的知識體系和資料，工作忙了些，擠擠總會有的，資料很多，就看你能不能耐下心堅持去學了，要多學多敲多想，祝你進步~學習之前首先要大概瞭解什麼是HTML ,CSS , JS：一句話概括：HTML 是骨骼， CSS是皮膚， JS只是夾在中間的神經組織！細說的話：HTML是由多種 ...

前言：

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

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

寫給想成為前端工程師的同學們

基礎學習：

代碼有多難？——寫給網頁設計師的代碼書
 w3cschool HTML教程
 初學者學習文檔[菜鳥教程]
夢之都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：[建議推行廢棄ie6、7、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.js Zepto.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.js nodejs新手指南
 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、HTML5、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年

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

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。

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

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

前端學習交流QQ群：328058344 我們一起學前端！