WEB前端知識總結
前言
一直想着整理一下關於前端的知識體系和資料,工作忙了些,擠擠總會有的,
資料很多,就看你能不能耐下心堅持去學了,要多學多敲多想,祝你進步~
學習之前首先要大概了解什么是HTML ,CSS , JS:
一句話概括:HTML 是骨骼, CSS是皮膚, JS只是夾在中間的神經組織!
細說的話:
HTML是由多種骨頭(標簽)組成的骨架。
HTML5是更多的新骨頭(標簽),同時去掉了以前覺得不好用的骨頭.
JS控制單個動作。(抬手,張嘴,放下手,抬腿,轉頭,握拳等)
jQuery是把一組常用動作編排成了一個招式。
基礎學習
初學者學習文檔[菜鳥教程]
HTML教程適合初學者[薦]
視頻學習
慕課網[薦] HTML+CSS基礎課程
前端入門
書籍推薦
有哪些關於前端開發技術(HTML、CSS、JavaScript 等)值得推薦的書籍?
前端開發
前端規范
前端編碼規范(4)—— CSS 和 Sass (SCSS) 規范
JavaScript 代碼規范 【new】
ES6 代碼規范【new】
CSS 代碼規范【new】
更多代碼規范【new】
資源分享
前端技能匯總 Frontend Knowledge Structure[薦]
提升學習
CSS
CSS RESET
CSS Hack
[建議推行廢棄ie6、7、8瀏覽器]
不同瀏覽器(IE6,IE7,IE8,FF)專用標簽 瀏覽器hack
常見css知識點
CSS預處理SCSS入門篇
CSS預處理LESS入門篇
精通CSS+DIV 網頁樣式與布局 【書籍】
精通CSS:高級Web標准解決方案(第2版)【書籍】
JS
JavaScript教程 【廖雪峰教程】
前端JQuery系列:入門教程 | 源碼剖析 | 框架設計 | 慕課網教程 byJsAaron
jquery學習 jqueryAPI中文文檔 javascript 設計模式
鋒利的jQuery(第2版) 【書籍】
Js知識點
H5
HTML5+CSS3
HTML5從入門到精通【書籍】
SWIPE JS – 移動WEB頁面內容觸摸滑動類庫[插件]
H5視頻
APP-H5
NodeJs
因Nodejs更新太快,遇到問題學會搜索以及查看github上更新的最新文檔介紹,其所依賴的組件的方法以其github上為准,同時建議使用mac/linux玩node
Node.js 入門 [薦] 一起學 Node.js nodejs新手指南
VueJs
Vue.js 組件編碼規范 【薦】
優秀Vue組件集成庫
Element [PC]
iView - 一套高質量的UI組件庫 [PC]
Vux2 [H5]
Vue書籍
最佳實踐
基於vue.js重寫Cnodejs.org社區的webapp
Vue.js全家桶高還原網易雲音樂(Windows PC版)
Vue 全家桶 + Mint-Ui 打造高仿 QQMusic,搭配詳細說明
Vue全家桶+Socket.io+Koa2打造一個智能聊天室
AngularJs
Angular書籍
ReactJs
微信公共賬號
7天開發Nodejs微信公共號 密碼: k7h8
微信小程序
【騰訊Bugly干貨分享】微信小程序開發思考總結——騰訊“信用卡還款”項目實踐
微信小程序全面實戰,架構設計 && 躲坑攻略
VR
Krpano 720yun
PWA
開發工具
puer(快速啟動本地服務localhost)
WEB調試工具---Firebug[firefox]
前端自動化
webpack 【薦】
Webpack【自動化】
webpack深入與實戰 【video】
Git
GitHub
GitHub入門與實踐 【書籍】
MarkDown
網站優化
圖片延遲加載Lazy Load Plugin for jQuery
頁面重構
前后端分離的思考與實踐[薦]
原理探索
[了解原理才是王道]
技術峰會
騰訊前端大會2017 講師PPT (密碼:ElacBe)
前端面試
切圖
iPhone6和iPhone6 plus的iOS8設計尺寸參考指南
教你iOS APP設計一稿支持iPhone5/iPhone6/Plus
iOS 的 APP 在系統中如何適應 iPhone 5s/6/6 Plus 三種屏幕的尺寸?
交互設計
字體圖標
延伸閱讀
[延伸]團隊管理
[延伸]WebSocket
[延伸]SVN
[延伸]WebApp
[延伸]Hybrid App
[延伸]ReactApp
React.JS中文基礎教程 密碼: zhsp
[延伸]IOS學習
The Swift Programming Language 中文版
[延伸]Android學習
[延伸]團隊合作
[延伸]Java學習
[延伸]PHP
Thinkphp學習視頻 密碼: t65d
[延伸]建站
阿里雲ESC服務 推薦碼5D2D05(結算時首次可9折)
[延伸]Ubuntu學習
[延伸]Nginx
[延伸]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 的元素、方法和屬性?
近來國內外有哪些用戶界面、交互體驗設計優秀的產品?優秀在哪里?
現在網頁設計中的為什么少有人用 11px、13px、15px 等奇數的字體?
為什么 Web 前端開發不拋棄 HTML 和 CSS,用純 JavaScript 開發?
LABjs、RequireJS、SeaJS 哪個最好用?為什么?
C、C++、Java、JavaScript、PHP、Python、Ruby 這些語言分別主要用來開發什么?
在今天,利用 HTML5 開發和發布大型跨平台網游,可行性如何?要解決哪些問題?
如何看待 HTML5 開源游戲引擎 Egret,HTML5 游戲開發的前景如何?
前端工程師應該對 HTTP 了解到什么程度?從哪些途徑去熟悉更好?
想深入了解一下 jQuery 的源碼,但是覺得學習曲線有點陡峭,有沒什么好的方法或者學習資源推薦?
大神博客
(前端成長路上掉過的坑,栽過的溝,翻過的牆。。。)
前端博客 by張克軍 (考慮到github可能被牆,弄到了我的coding)
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
走進svg的世界 百度腦圖 svg巔峰之作
UI框架:
weui[H5]
aui[H5]
frozen-ui[H5]
Sui[H5]
zui[PC]
Jquery.mobile[H5]
require.js
Sea.js
Avalon.js