WEB前端知识总结

前言:

直惦记在整理一下有关前端的学识系统及材料,工作繁忙了几,挤挤总会有,
材料很多,就看君能够免可知忍受下心坚持去学了,要多学多敲多思量,祝君前进~

念之前率先要盖了解什么是HTML ,CSS , JS:
同样词话概括:HTML 是骨骼, CSS是皮肤, JS只是良莠不齐在中等的神经组织!
细说的语句:
HTML是由余骨头(标签)组成的龙骨。
HTML5凡是再度多之初骨头(标签),同时失去丢了先看无好用的骨头.
CSS是皮肤。CSS3是重新美的皮肤
JS决定单个动作。(抬手,张嘴,放下手,抬腿,转头,握拳等)
jQuery是把同组常因此动作编排成了一个招式。

描绘为想变成前端工程师的同校等

基础学习:

代码来差不多麻烦?——写于网页设计师的代码书
w3cschoolHTML教程
初家学习文档[菜鸟教程]
梦之都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.jsZepto.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.jsnodejs新手指南
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年

  • 阿里无线前端性能优化指南 (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。

关押了如此多东西,第一反响是不是求中文文档?学英语去吧。

这些也可大凡自己眼前所能够看的如出一辙多少一些,而且每段基本都是暨了一个界,并无是没有得学了,而是继续学而是另外一样片园地。真心想有人会帮忙自己补偿知识盲区。另外,我单独将部分知识点串起来,不净或不规则的地方要见谅。

前者学习交流QQ群:328058344
 
俺们联合学前端!