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