WEB前端知识总结

文杰

快过年啦，高级web、java有意向看机会的私信我哈~

​关注他

492 人赞了该文章

前言

 

一直想着整理一下关于前端的知识体系和资料，工作忙了些，挤挤总会有的，

资料很多，就看你能不能耐下心坚持去学了，要多学多敲多想，祝你进步~

 

学习之前首先要大概了解什么是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学习视频