文档章节

WEB前端知识总结

前端攻城狮-Dawn
 前端攻城狮-Dawn
发布于 2017/07/27 11:47
字数 4467
阅读 1032
收藏 13

前言:

一直想着整理一下关于前端的知识体系和资料,工作忙了些,挤挤总会有的,
资料很多,就看你能不能耐下心坚持去学了,要多学多敲多想,祝你进步~

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



前端的路,一步一步来
[路漫漫其修远兮,吾将上下而求索]

CSS不能编程?用LessSassStylus、甚至直接用 Absurd,框架除了Bootstrap还有很多。JS写多了很麻烦?jQuery。移动开发?Zepto.js。结构不好?找框架,Backbone.js是MVC,AngularJSEmber.js是MVVM,Twitter还弄了个事件驱动框架Flight。库多了要优化加载?RequireJS

代码质量成问题?JasmineQUnitMocha做单元测试。各种浏览器都要测?用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 TextPython写的,要写插件?也学一下。调试太难?用Chrome开发者工具,一堆API和功能。

光在电脑浏览器上跑不给力?移动开发HTML5,离开网络就渣了?HTML5离线应用。不如原生应用?用PhoneGap。想调用原生API?开发Firefox OS应用吧。浏览器应用也得会吧,Chrome Firefox都有自己的文档。接着是不是把后端甩了,自己来,装Node.js,所以还得学点服务器知识,想用npm管理node包?linux技巧shell神马的也得学。想前后端通吃?再看看http协议。Web精通了?node-webkit 让你可以写桌面程序了,继续学吧。

想学模块化开发?看看CommonJSAMD规范。理解JS有偏差?看看ECMA-262,等等不知道什么时候第6版就要出了。浏览器各不相同,弄不清该怎么兼容?看看W3C标准,HTML写出来人看的懂,机器读不懂?要SEO,要支持残障人士?看HTML语义化,全会了但IE就是不支持?叫不出名字的浏览器尼玛连JS都不知道是啥?渐进增强。想一次把各种设备全搞定?响应式设计。

然后上面这些不过是一些讨巧的小技术。公司做什么业务的?了解一下行业信息。面向大众的产品?交互设计。美工不给力?UI设计。外包和咨询?设计模式、重构方法、算法、数据结构。知道软件工程吗?了解一下敏捷开发,或许还可以试试TDD、ATDD、BDD。

看了这么多东西,第一反应是不是求中文文档?学英语去吧。

这些也不过是我目前所能看到的一小部分,而且每段基本都是到了一个边界,并不是没得学了,而是继续学又是另一片天地。真心希望有人能帮我填补知识盲区。另外,我仅把一些知识点串起来,不全或不对的地方请见谅。

前端学习交流QQ群:328058344  我们一起学前端!

© 著作权归作者所有

前端攻城狮-Dawn
粉丝 79
博文 123
码字总数 441766
作品 0
保定
私信 提问
前端开发-从入门到Offer

解决你的前端面试 有时候前端的技术性面试还是很麻烦的,毕竟知识点那么多,框架迭代那么快。你不仅仅要对计算机科学基础有一个坚实的底子,还需要理解啥 Web 性能、构建系统以及 CSS 引擎等...

掘金官方
2017/12/28
0
0
2018 前端面试准备

前端面试常见问题按知识点分类整理 前端面试常考问题整理,按模块知识点分类,持续完善中... Front-end-Developer-Questions by Modules and knowledge 前端面试经典问题:CSS 中居中的几种方...

掘金官方
2017/12/14
0
0
这『六本』电子书能帮助你成为优秀的程序员(含下载地址)

epub、pdf、mobi、rtf,你还需要什么格式呢? 作为一个自诩是 markdown 程序员的 “资深咨询师”,我编写了很多的代码,写了很多文章(我的博客 phodal.com 上有 600+),也写了很多电子书。...

phodal
2017/11/15
0
0
这『六本』电子书能帮助你成为优秀的程序员(含下载地址)

epub、pdf、mobi、rtf,你还需要什么格式呢? 作为一个自谥是 markdown 程序员的 “资深咨询师”,我编写了很多的代码,写了很多文章(我的博客 phodal.com 上有 600+),也写了很多电子书。...

Phodal
2017/11/15
0
0
黑马程序员:前端学习路线图

前端很火,想自学前端的人也多。作为过来人,知道自学的辛苦。特来给大家分享这份学习路线图,让想自学前端的小伙伴们有一份系统专业的学习资源和学习指导。若是觉得有用记得给点个赞哦!无论...

传智播客
2017/03/08
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

聊聊中国的通信行业:从“七国八制”到“中华”脊梁

本期文章和大家一起来聊一聊我曾经从事过的通信行业吧。最近各方面信息的泛滥,包括和华为的同学聊天,自己确实也感慨颇多。想想我自己本科主修通信工程,研究生再修信息与通信工程,从本科开...

CodeSheep
49分钟前
4
0
MDK:ARM M451M:exceed the range of code meory, continue to erase or not?

问题: 代码空间超限 几天前就遇到:exceed the range of code meory, continue to erase or not? 如下所示: 解决过程 开始以为中MDK软件的128KB限制,如是就不能生成HEX文件,应该链接时有提...

SamXIAO
56分钟前
1
1
OSChina 周六乱弹 —— 因违反《中华人民共和国治安管理处罚法》第四十四条之规定

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :#今日歌曲推荐# 惊艳分享谷微的单曲《安守本份》(@网易云音乐) 《安守本份》- 谷微 手机党少年们想听歌,请使劲儿戳(这里) ...

小小编辑
今天
292
7
Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
今天
8
0
Kernel DMA

为什么会有DMA(直接内存访问)?我们知道通常情况下,内存数据跟外设之间的通信是通过cpu来传递的。cpu运行io指令将数据从内存拷贝到外设的io端口,或者从外设的io端口拷贝到内存。由于外设...

yepanl
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部