WEB前端知識總結

前言

一直想著整理一下關於前端的知識體系和資料，工作忙了些，擠擠總會有的，

資料很多，就看你能不能耐下心堅持去學了，要多學多敲多想，祝你進步~

學習之前首先要大概了解什麼是HTML ,CSS , JS：

一句話概括：HTML 是骨骼， CSS是皮膚， JS只是夾在中間的神經組織！

細說的話：

HTML是由多種骨頭(標籤)組成的骨架。

HTML5是更多的新骨頭(標籤),同時去掉了以前覺得不好用的骨頭.

CSS是皮膚。CSS3是更美的皮膚

JS控制單個動作。(抬手,張嘴,放下手,抬腿,轉頭,握拳等)

jQuery是把一組常用動作編排成了一個招式。

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

基礎學習

代碼有多難？——寫給網頁設計師的代碼書

你想要的17張高清技能圖譜都在這兒

為什麼學前端

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) 規範

JavaScript 代碼規範 【new】

ES6 代碼規範【new】

CSS 代碼規範【new】

更多代碼規範【new】

資源分享

前端技能匯總 Frontend Knowledge Structure[薦]

前端收集（前端學習資源）

一些前端總結分享

Tencent AlloyTeam 2016

前端開發資源導航

github上值得關注的前端項目

谷歌開發者中國

awesome by sindresorhus

成為專業程序員路上用到的各種優秀資料、神器及框架

提升學習

CSS

CSS參考手冊

HTML/CSS開發規範指南

前端編碼規範之CSS

CSS RESET

css reset 是什麼

cssreset

normalize.css

CSS Hack

[建議推行廢棄ie6、7、8瀏覽器]

css hack是什麼

不同瀏覽器（IE6,IE7,IE8,FF）專用標籤 瀏覽器hack

常見css知識點

CSS預處理SCSS入門篇

CSS預處理LESS入門篇

SASS 和 LESS 區別

less即學即用 less入門

Sass基礎入門(基礎篇)

Sass和Compass必備技能之Sass篇

Sass和Compass必備技能之Compass

css sprite使用筆記總結

NEC 更好的css方案

深入PostCSS Web設計

Flex 布局教程：語法篇

Flex 布局教程：實例篇

精通CSS+DIV 網頁樣式與布局 【書籍】

精通CSS：高級Web標準解決方案（第2版）【書籍】

JS

JavaScript教程 【廖雪峰教程】

JavaScript 資源大全中文版

ECMAScript 6入門

值得收藏！JavaScript語言基礎知識總結

JavaScript初學者應注意的七個細節

前端JQuery系列：入門教程 | 源碼剖析 | 框架設計 | 慕課網教程 byJsAaron

jquery學習 jqueryAPI中文文檔 javascript 設計模式

jquery性能優化的十種方法

鋒利的jQuery(第2版) 【書籍】

Js知識點

JavaScript深入系列15篇正式完結！

知道這20個正則表達式，能讓你少寫1,000行代碼

你不知道的 Javascript

回調地獄的今生前世@JavaScript

JavaScript 調試常見報錯以及修復方法

編碼如作文：寫出高可讀 JS 的 7 條原則

H5

HTML5+CSS3

HTML5從入門到精通【書籍】

CSS動畫簡介 CSS Animate

H5專題多屏滾動優秀案例整理

Zepto.js Zepto.js中文版

SWIPE JS – 移動WEB頁面內容觸摸滑動類庫[插件]

從零搭建移動H5開發項目實戰

移動端h5開發相關內容總結

H5視頻

H5直播避坑指南

H5 video相關（自動播放、橫豎屏偽全屏）

APP-H5

H5 與 Native 交互之 JSBridge 技術

如何做好H5性能優化？

如何保證H5頁面高質量低成本快速生成？ VasSonic

移動前端開發經驗指南

NodeJs

因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共存？

VueJs

了解vue

學習vue

Vue.js 組件編碼規範 【薦】

awesome-vue

vuex

大話大前端時代

VueJS 開發常見問題集錦

vue@前端早讀課

優秀Vue組件集成庫

Element [PC]

iView - 一套高質量的UI組件庫 [PC]

Vux2 [H5]

Vue書籍

Vue.js權威指南

Vue2實踐揭秘

Vue.js 前端開發 快速入門與專業應用

最佳實踐

vue實踐：CNode

vue實踐：CNode2.0

基於vue.js重寫Cnodejs.org社區的webapp

Vue.js全家桶高還原網易雲音樂(Windows PC版)

Vue 全家桶 + Mint-Ui 打造高仿 QQMusic，搭配詳細說明

手摸手，帶你用vue擼後台 系列二(登錄許可權篇)

淺談 Vue 項目優化

Vue全家桶+Socket.io+Koa2打造一個智能聊天室

AngularJs

學習AngularJs

AngularJs視頻

Angular展示案例

Angular2

Angular2案例

Angular 2.x 從0到1

Angular書籍

AngularJS深度剖析與最佳實踐 【薦】

Angular權威教程

ReactJs

ReactJS 中文技術分享

React 入門實例教程

Ant.Design

貼吧 React 最佳實踐

微信公共賬號

初識Java微信公眾號開發

PHP實現微信公眾平台開發—基礎篇

PHP實現微信公眾平台開發—提升篇

7天開發Nodejs微信公共號 密碼: k7h8

Node.js微信開發

微信小程序

微信小程序接入指南

小程序組件化開發框架

微信小程序示例 - 剪刀石頭布

【騰訊Bugly乾貨分享】微信小程序開發思考總結——騰訊「信用卡還款」項目實踐

微信小程序全面實戰，架構設計 && 躲坑攻略

一篇文章看懂微信小程序整個生態布局！（乾貨）

VR

Three.js

Krpano 720yun

PWA

PWA 入門: 寫個非常簡單的 PWA 頁面

PWA 在餓了么的實踐經驗

PWA 版本的 CNode 社區

開發工具

Web前端導航

前端開發工具Sublime Text 使用教程【薦】

前端高效開發之「一鍵切圖」

Mark Man——高效的設計稿標註、測量工具

15個必須知道的chrome開發者技巧

sketchcn矢量設計工具（收費）

瀏覽器兼容性表

puer(快速啟動本地服務localhost)

WEB調試工具---Firebug[firefox]

百度短網址

mac用戶前端開發需要了解的

WTS：基於Web的Terminal控制台

前端自動化

webpack 【薦】

yeoman

bower

grunt

gulp

FIS3 , 為你定製的前端工程構建工具

Webpack【自動化】

Webpack傻瓜式指南

webpack 多頁應用架構系列

入門 Webpack，看這篇就夠了

基於webpack搭建前端工程解決方案探索

4種使用webpack提升vue應用的方式【vue】

webpack 代碼拆分

徹底解決 webpack 打包文件體積過大

webpack深入與實戰 【video】

Git

Git教程

git常用命令

GitHub

GitHub入門與實踐 【書籍】

GitHub 部署靜態 HTML 網頁

MarkDown

什麼是Markdown語法？

基於Markdown的編輯器

markdown 語法入門

網站優化

Yahoo軍規

漫談頁面優化

Web性能優化：What? Why? How?

移動網站性能優化：網頁載入技術概覽

web前端頁面性能優化小結 前端各種優化

圖片延遲載入Lazy Load Plugin for jQuery

頁面重構

前後端分離的思考與實踐[薦]

從新浪微博的改版談網頁重構

經驗分享：網頁設計與重構那些事兒

原理探索

[了解原理才是王道]

前端必讀：瀏覽器內部工作原理

技術峰會

騰訊前端大會2017 講師PPT （密碼：ElacBe）

VueConf2017

全球移動技術大會 2017 PPT 下載合集

慕課網技術沙龍之前端專場

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

網頁中展示中文字體 適用於無改動的文字展示

延伸閱讀

[延伸]團隊管理

從技術轉管理的困惑

寫給程序員的管理入門課

技術領導的七種武器

[延伸]WebSocket

WebSocket 教程 - 阮一峰的網路日誌

[延伸]SVN

項目管理SVN使用教程[windows]

項目管理SVN使用教程[mac]

Mac 上最好用的 SVN 客戶端是什麼

[延伸]WebApp

Hello，移動WEB

Web app設計淺談

Web App開發入門

MUI開發

[延伸]Hybrid App

ionic

ionic視頻教程

[延伸]ReactApp

React Facebook

React 入門實例教程

Amaze UI React

React.JS中文基礎教程 密碼: zhsp

[延伸]IOS學習

IOS學習目錄

玩兒轉Swift

The Swift Programming Language 中文版

[延伸]Android學習

Android學習目錄

[延伸]團隊合作

團隊協同工具worktile

有道雲筆記協作

Coding - 讓開發更簡單!

Teambition?團隊協作工具

[延伸]Java學習

Java程序員由菜鳥到笨鳥

Google 十年 Java 技術棧

[延伸]PHP

Thinkphp

Thinkphp學習視頻 密碼: t65d

PHP採集工具

[延伸]建站

阿里雲ESC服務 推薦碼5D2D05（結算時首次可9折）

阿里雲Linux一鍵安裝web環境全攻略

阿里雲備案

[延伸]Ubuntu學習

【ubuntu】系統使用小竅門總結

【ubuntu】安裝配置Mysql

【ubuntu】導入mysql資料庫文件

[延伸]Nginx

Nginx 配置簡述

[延伸]Cocos2d

Cocos2d學習

Cocos2d視頻

一些文章

程序員如何優雅的掙零花錢 【薦】

思索 | 入行幾年後，互聯網人的未來應該在哪裡？

從怎麼合作談起

知乎問答

[知乎前端大神]

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年

• 阿里無線前端性能優化指南 (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。

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

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

關於作者

我的個人小站

——add by wwj 2014.7

——update by wwj 2014.9

——update by wwj 2014.12.31

——update by wwj 2015.2.10

——update by wwj 2015.7.26

——update by wwj 2015.10.7

——update by wwj 2016.1.8

——update by wwj 2016.12.8

——update by wwj 2017.01.12

——update by wwj 2017.08.12

下架內容備份區域：

常見Js插件：

性能卓越的 js 模板引擎artTemplate

layui（彈層、日期、分頁、模板引擎）

echarts圖表

highcharts圖表

Chart.js（wap）圖表

代碼高亮highlight

走進svg的世界 百度腦圖 svg巔峰之作

UI框架：

Bootstrap

semantic-ui

weui[H5]

aui[H5]

frozen-ui[H5]

Sui[H5]

zui[PC]

Jquery.mobile[H5]

Yo

amazeui

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