學習前端必備的知識點和網站一覽 還有很多js框架推薦

核心 Core

HTML5

• W3C http://www.w3school.com.cn/html5/
• W3C https://www.w3.org/html/ig/zh/wiki/HTML5
• 菜鳥教程 http://www.runoob.com/html/html5-intro.html
• HTML5中文門戶 http://www.html5cn.org/

CSS3

• W3C CSS教程 http://www.w3school.com.cn/css/index.asp
• W3C CSS3教程 http://www.w3school.com.cn/css3/index.asp
• 菜鳥教程CSS教程 http://www.runoob.com/css/css-tutorial.html
• 菜鳥教程CSS3教程 http://www.runoob.com/css3/css3-tutorial.html
• CSS參考手冊 http://css.doyoe.com/

JS

• W3C http://www.w3school.com.cn/js/
• 菜鳥教程 http://www.runoob.com/js/js-tutorial.html
• 廖雪峰js教程 http://www.liaoxuefeng.com
• js標準參考教程-阮一峰 http://javascript.ruanyifeng.com/

jQuery

• W3C http://www.w3school.com.cn/jquery/
• 菜鳥教程 http://www.runoob.com/jquery/jquery-tutorial.html
• 極客學院 http://wiki.jikexueyuan.com/project/jquery-tutorial/
• 廖雪峰 http://www.liaoxuefeng.com/wiki/
• 參考手冊 http://www.css88.com/jqapi-1.9/
• 參考手冊 http://www.runoob.com/manual/jquery/

ES6

• 阮一峰ES6 http://es6.ruanyifeng.com/
• 極客學院 http://wiki.jikexueyuan.com/project/es6/
• JavaScript 標準參考　阮一峰http://javascript.ruanyifeng.com/advanced/ecmascript6.html

插件

• parallel.js: 前後端通用的一個並行庫
• zepto: 用於現代瀏覽器的兼容 jQuery 的庫
• totoro: 穩定的跨瀏覽器測試工具
• TheaterJS: 一個用於模擬人輸入狀態的 JS 庫
• stellar.js: 前端用於實現異步滾動效果的庫，現已不再維護
• skrollr: 另一款實現一步滾動的開源庫，使用人數眾多，可實現各種狂拽酷炫掉渣天的前端效果，看真相
• Framework7: 前端框架，是開發人員可以基於 web 技術構建 IOS7 程序
• regulex: 用於生成 正則表達式 的可視化流程圖
• markdown-it: 新型 Markdown 解析器，快速，支持插件
• multiline: 用於 Javascript 中的多行文本，類似於 Ruby 的 HERE Doc
• screenfull.js: 全屏插件，支持各大瀏覽器
• lunr.js: 類似於 Solr, 但是用於瀏覽器上的全文搜索引擎，可以為 JSON 創建索引，離線也可以使用
• jquery.hotkeys: jQuery 插件，用於綁定熱鍵
• breach_core: Javascript 編寫的 Browser (瀏覽器)
• octocard: 用於生成 Github 信息卡片的庫
• github-cards: 用於生成 Github 信息卡片的庫
• money.js: 輕量級貨幣轉換庫，web 和 node 皆可用
• accounting.js: 輕量級的數字、貨幣轉換庫
• javascript-algorithms: Javascript 實現的各種算法集合
• lazy.js: 類似於 underscore, 但是會延遲執行，某些場景下，性能會有很大的提升
• seajs: 前端模塊加載器，解決模塊化、依賴等問題
• jQuery-One-Page-Nav: 單頁應用中一個用於處理導航欄的庫
• js.js: Javascript 實現的 javascript JIT
• jquery-ui: jQuery 團隊開發的 UI 相關的前端庫，功能強大
• todomvc: 分別基於 AngularJS/EmberJS/Backbone等實現的 TODO List, 幫助開發者選擇前端 MVC 庫
• localForage: Mozilla 出品，用於離線存儲，基於IndexedDB, WebSQL 或者 localStorage, 提供一致的接口
• EventEmitter: 瀏覽器版的 EventEmitter
• jquery.serializeJSON: jQuery 插件，用於將 form 表單序列化成 JSON 數據
• knockout: 前端 MVVM 框架，用於開發富前端應用
• mermaid: 可以根據文本生成流程圖，類似於 Markdown 的語法
• js-sequence-diagrams: 另一款可以根據文本生成流程圖的庫，類似於 Markdown 的語法
• flow: 一個用來檢測 Javascript 語法錯誤的庫， Facebook 出品
• zoomooz: jQuery 插件，用來處理瀏覽器縮放
• fancyBox: 一個用於放大縮小圖片、Web 內容或者多媒體元素的庫，優雅大方
• mithril.js: 輕量型前端 MVC 框架，部分使用場景下性能優於 Angular.js 和 React
• backbone: 強大的前端 MVC 庫，鼻祖級前端庫，最初為了配合 Rails 來模塊化前端應用，兼容性良好 (兼容到 IE6)，插件豐富，性能良好
• jquery.smartbanner: smartbanner 是從 IOS6 開始支持的一個新特性, 這個插件提供了對早期 IOS4/5 和 Android 的支持
• jquery.scrollTo: 在頁面上以一個元素為起始以動畫的方式移動(ScrollTo)到另一個元素， 支持回退等
• jScrollPane: 自定義的滾動條，讓所有瀏覽器都顯示一樣的滾動條
• onepage-scroll: 提供類似於 iPhone6 展示頁類似的效果，適用於單頁應用，兼容到 IE8
• scrollMonitor: 前端插件用來監控元素的滾動事件(進入、退出等)，性能很好
• ScrollMagic: 神奇的滾動交互效果插件，可以在滾動的過程中設置各種各樣的動態效果
• infinite-scroll: 滾動加載，滾動到最下到自動加載， Paul Irish 大神之作
• animatable: 僅僅依靠 border-width 和 background-position 實現的各種動態效果，看真相
• Fluidbox: 頁面上內嵌圖片的放大縮小效果，類似於 Medium 中的效果
• jquery-validation: jQuery 的一個插件，用於校驗 Form 表單
• BigVideo.js: jQuery 的一個插件, 用於實現大背景(視頻、圖片)效果
• emscripten: 一款基於 LLVM, 可以將 C/C++ 轉換成 Javascript 的工具，使得 Javascript 可以近乎 Native 的速度
• qrcode-generator: 各種語言的二維碼生成工具
• device.js: 一個可以檢測設備類型的工具，可以讓我們根據不同的設備來為其定製響應的 Javascript 和 CSS
• jquery-qrcode: jQuery 插件，用來生成二維碼
• Wookmark-jQuery: jQuery 的一個插件，可以用來實現瀑布流的效果
• isotope: 可以用來過濾、排列布局，實現美觀的動態佈局切換效果，Demo
• lazysizes: 功能強大的圖片延遲加載工具，可以首先加載一個低質量的圖片，然後再加載高質量的圖片
• progressbar.js: 簡潔美觀的進度條，扁平化
• pigshell: 一個由 Javascript 實現的Shell, 將互聯網當做一個大的文件系統, 通過 cd/ls/cat…..等命令, 可以訪問 Facebook/Twitter/Google Drive 等網絡服務
• spectrum: Js實現的顏色選擇器 (Colorpicker)
• jQuery.countdown: jQuery 倒計時插件
• summernote: WYSIWYG 富文本編輯器
• awesomplete: 非常輕型的一個自動補全 JS 庫, 沒有任何依賴, 配置簡單, 美觀
• switchery: IOS 7 上 Switch 的 JS 實現, 支持 IE8 及以上瀏覽器
• trix: Basecamp 公司出品的富文本編輯器，簡潔小巧
• sensor.js: 在智能移動設備瀏覽器上，通過HTML5的api使用移動設備的功能。定位、運動、傾斜等
• hyhyhy: 用於創建 基於 HTML5 的 演示文稿
• swipebox: jQuery 插件，用於處理移動端的觸摸事件
• FileAPI: 前端用戶處理文件（拖放、多文件上傳等）
• Sortable: 現代瀏覽器上用於實現元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依賴 jQuery
• Swiper: 用於實現瀏覽器上的滑動切換效果，支持硬件加速
• matter-js: 2D 物理效果引擎，碰撞、彈跳等
• jQTouch: 用於輔助創建手機端的 Web 應用，支持主題、Zepto.js 等
• snabbt.js: 一個利用 Javascript 和 CSS transform 的 animation 庫
• c3: 基於 D3 的圖表庫
• echarts: 企業級圖表庫，百度開發
• parallax.js: 一個用於響應智能手機 orientation 的庫
• jQuery-Animate-Enhanced: jQuery 動畫庫的一個增強，用於現代瀏覽器
• wysihtml: 富文本編輯器，適用於現代瀏覽器
• slip: 一個通過滑動或者拖拽來操控列表的庫
• evil-icons: 一個矢量圖庫，提供 Ruby/Node 等支持
• PhotoSwipe: JS 的一個圖片展示庫
• focusable: 是頁面上一個元素高亮的庫，有圖有真相
• firefox.html: Firefox 在瀏覽器端的實現 —— HTML 版的 Firefox
• jquery-mobile: jQuery 團隊開發的用於輔助手機端 web app 開發的庫，基於 HTML5
• mobile-angular-ui: 基於angularjs和bootstarp的web app開發框架
• interact.js: 一個適用於現代瀏覽器的，用於處理 手勢、拖放、縮放等的庫
• rebound-js: 實現部分物理效果，Facebook 出品
• basket.js: 基於 LocalStorage 的資源加載器，可以用來緩存 script 和 css, 手機端使用速度快於瀏覽器直接緩存
• iscroll: 高性能的滾動(scroll)處理庫，功能強大，支持各種事件，不依賴任何的庫，且插件豐富, 大眾點評的手機端列表滾動就是用這個庫處理的
• metrics-graphics: 基於 D3 的圖表庫，簡潔、高效，Mozilla 出品
• accessible-html5-video-player: Paypal 出品的 Video 播放器
• loading: 幾種 Loading 效果，基於 SVG
• flippant.js: 一款能夠漂亮的網頁元素翻轉效果庫，代碼許久不更新，不過作為源碼學習還是不錯的
• move.js: 基於 CSS3 的前端動畫框架
• scrollReveal.js: 使元素以非常酷帥的方式進入畫布 (Viewpoint)，看 Demo
• Modernizr: 一個用來檢測 HTML5 和 CSS3 支持情況的庫
• foundation: 另一款前端模版框架，類似於 Bootstrap
• Flat-UI: Bootstrap 的一款主題，簡潔美觀
• iCheck: 一款漂亮的 Checkbox 插件
• Swipe: 非常輕量級的一個圖片滑動切換效果庫, 性能良好, 尤其是對手機的支持, 壓縮後的大小約 5kb
• slick: 功能異常強大的一個圖片滑動切換效果庫
• SocialButtons: 漂亮的社交按鈕
• sweetalert: 一個非常美觀的用於替換瀏覽器默認 alert 的庫
• web-animations-js: Javascript 實現的 Web Animation API
• vivus: 可以動態描繪 SVG 的 JS 庫, 支持多種動畫
• plyr: 輕量, 小巧, 美觀的 HTML5 視頻播放器
• timesheet.js: 基於 HTML5 & CSS3 時間表
• slideout: 一個非常美觀的側滑菜單

包管理工具 Package Managers

NPM

• 菜鳥教程NPM 使用介紹 http://www.runoob.com/nodejs/nodejs-npm.html
• 淘寶 NPM 鏡像 https://npm.taobao.org/
• npm 模塊安裝機制簡介 http://www.ruanyifeng.com/blog/2016/01/npm-install.html
• npm包搜索地址 https://www.npmjs.com/

Bower

• Bower中文網 http://www.bowercn.com/
• Bower：客戶端庫管理工具-阮一峰 http://javascript.ruanyifeng.com/tool/bower.html

Yarn

• yarn中文網 https://yarnpkg.com/zh-Hans/快速、可靠、安全的依賴管理
• YARN 簡介 https://www.ibm.com/developerworks/cn/data/library/bd-yarn-intro/

WebStorm

• 官網下載 http://www.jetbrains.com/webstorm/download
• 前端網破解版下載 http://www.qdfuns.com/tools

VScode

• 官網下載 https://code.visualstudio.com/
• vscode 插件精選 - 獻給所有前端工程師 https://segmentfault.com/a/1190000006697219

SublimeText

• 官網下載 https://www.sublimetext.com/
• 前端網破解版插件版下載 http://www.qdfuns.com/tools
• SublimeCodeIntel: Sublime Text 的代碼補全工具，支持多種語言
• Emmet：一個用於提高開發效率的編輯器插件，前身是Zen coding
• SublimeLinter: 一個提供代碼質量檢測的插件
• SublimeTmpl：快速新建指定的模版文件
• Syntax-highlighting-for-Sass：sass代碼高亮插件
• MarkdownEditing: Sublime Text 強大的 Markdown 擴展, 提供快捷鍵, 主題等
• ApplySyntax: 輔助檢測語法插件
• CTags: Sublime Text Ctags 支持插件, 需要安裝 ctags
• sublime-react: React 代碼高亮

Atom

• 官網下載 https://atom.io/

HBuilder

• 官網下載 http://www.dcloud.io/

JS框架 JS Frameworks

Backbone

• Backbone.js API中文文檔 http://www.css88.com/doc/backbone/

AngularJs

• 中文官方文檔 https://angular.cn/
• angularjs中文網 http://www.apjs.net/
• angularjs教程 http://www.angularjs.net.cn/
• Angular 基礎入門 http://www.cnblogs.com/micua/p/angular-essential.html
• angular-masonry: Masonry 的 AngularJS 插件，用於瀑布流
• angular-schema-form: 根據 JSON 生成響應的 Form 表單
• restangular: Angular 中用來處理 RESTful API 的插件，可替代 $resource
• ng-cordova: Cordova 常用組件的 Angular 版本
• angular-translate: Angular 的國際化 (I18n)
• ng-inspector: Chrome 插件，用於調試 Angular
• angularjs-style-guide: AngularJS 代碼風格
• ngReact: React 的 Angular 插件，可以在 Angular 中使用 React Components
• material: Google Material Design 效果的 Angular 實現
• angular-local-storage: Angular 插件, 提供了對 localStorage 的友好支持, 並對不支持的瀏覽器使用 cookie 優雅降級
• angular-filter: 一組有用的 Angular Filters
• bindonce: Angular 插件, 用於減少 Watcher 的數量, 提升性能

React

• 英文官方文檔https://facebook.github.io/react/docs/hello-world.html
• 中文官方文檔http://reactjs.cn/react/docs/getting-started-zh-CN.html
• gitbooks手冊https://hulufei.gitbooks.io/react-tutorial/content/introduction.html
• 阮一峰react入門http://www.ruanyifeng.com/blog/2015/03/react.html
• 阮一峰React Router入門http://www.ruanyifeng.com/blog/2016/05/react_router.html
• React Router 中文文檔https://react-guide.github.io/react-router-cn/
• react-redux 中文文檔http://cn.redux.js.org/docs/react-redux/index.html
• 阮一峰Redux 入門教程http://www.ruanyifeng.com/blog
• react: React 框架源代碼
• react-native: Facebook 出品的使用 React 開發 IOS 原生應用的框架
• react-hot-loader: 實時調整 React 組件效果
• grunt-react: React 的 Grunt 組件, 用於將 JSX 編譯成 JS
• touchstonejs: 基於 React 的手機應用前端框架
• essential-react: 基於 React, ES6, React-Router的一個應用腳手架
• react-router: React 路由解決方案

Vue

• vue官方http://cn.vuejs.org/
• vuex官方http://vuex.vuejs.org/zh-cn/
• vue-router官方https://router.vuejs.org/zh-cn/

UI框架 UI Frameworks

Bootstrap

• 最受歡迎的 HTML、CSS 和 JS 框架 http://v3.bootcss.com/

Ionic

• 一款接近原生的Html5移動App開發框架　會html css js就可以開發app http://www.ionic.wang/

Foundation

• Foundation 中文網 迄今為止最好的響應式前端框架http://www.foundcss.com

FrozenUI

• 移動端服務的前端框架 http://frozenui.github.io/

materializecss

• 基於Material Design的主流前端響應式框架 http://www.materializecss.cn/

mui

• 最接近原生APP體驗的高性能前端框架 http://dev.dcloud.net.cn/mui/

AntDesign

• 和react配合的UI框架 https://ant.design

eleme

• 和vue配合的UI框架 http://element.eleme.io/

JS預處理 JS Preprocessors

TypeScript

• TypeScript 入門教程 菜鳥教程 http://www.runoob.com/
• TypeScript中文網 https://www.tslang.cn/
• TypeScript教程gitbook https://www.gitbook.com/

CoffeeScript

• CoffeeScript 中文 http://coffee-script.org/
• CoffeeScript 實用手冊 極客學院 http://wiki.jikexueyuan.com/project/coffeescript/

過程自動化 Process Automation

Grunt

• Grunt中文網 http://www.gruntjs.net/

Gulp

• gulp.js 中文網 http://www.gulpjs.com.cn/
• gulp詳細入門教程 http://www.ydcss.com/
• 前端構建工具gulpjs的使用介紹及技巧 http://www.cnblogs.com/2050/p/4198792.html
• Gulp開發教程 https://www.w3ctech.com/topic/134

模板引擎 Templating

Handlebars

• handlebarsjs官網 http://handlebarsjs.com/
• Handlebars中文文檔 http://www.360doc.com/content/
• Handlebars.js 中文文檔 http://keenwon.com/992.html
• Handlebars的使用方法文檔整理 http://www.tuicool.com/articles/fqQFN3

Haml

• haml官方文檔 https://github.com/haml/haml
• haml入門 http://blog.csdn.net/napoay/article/details/50491363

Jade

• Jade 官方的英文文檔 http://www.w3cplus.com/html/how-to-use-jade.html
• Jade的使用 http://www.w3cplus.com/html/how-to-use-jade.html
• 帶你學習Jade模板引擎視頻 http://www.imooc.com/learn/259

構建工具 Build Tools

RequireJS

• RequireJS 英文網 http://requirejs.org/
• RequireJS 中文網 http://requirejs.cn/
• require.js的用法-阮一峰 http://www.ruanyifeng.com/blog

seajs

• seajs文檔 http://seajs.org/docs/
• SeaJS從入門到原理 http://www.tuicool.com/articles/FfEJv2u

Browserify

• 官網 http://browserify.org/
• github https://github.com/substack/node-browserify/

Webpack

• Webpack 中文指南 http://webpackdoc.com/
• webpack的實例 http://www.vichily.com
• webpack的入門 http://www.vichily.com
• 一小時包教會 —— webpack 入門指南 http://www.w2bc.com/Article/50764

CSS預處理器 CSS Preprocessors

Sass

• sass入門 http://www.w3cplus.com/sassguide/
• sass參考手冊 http://sass.bootcss.com/docs/sass-reference/
• SASS用法指南-阮一峰 http://www.ruanyifeng.com/blog/

Less

• less中文網 http://lesscss.cn/
• less快速入門 http://less.bootcss.com/

stylus

• stylus中文文檔-張鑫旭 http://www.zhangxinxu.com/jq/stylus/

版本控制 Version Control

Git

• Git教程-廖雪峰 http://www.liaoxuefeng.com/wiki/

Svn

• 史上最簡單的SVN使用教程和注意事項 http://blog.csdn.net/fwzkj/article/details/47988885
• SVN 教程 極客學院 http://wiki.jikexueyuan.com/project/svn/
• SVN 教程 菜鳥教程 http://www.runoob.com/svn/svn-tutorial.html

閱讀更多 未來的語言 的文章

關鍵字: 知識點 HTML 前端