写这篇文章的目的就是对自己半年来的学习成功进行以下梳理，文采有限。争取做到结构明朗，语言合理吧。本篇主要以梳理为主，具体知识点后续会写。

web前端的整体概念

HTML：搭建结构
CSS：美化页面（布局）
JavaScript：实现动态的效果

第一阶段
HTML CSS 的学习
HTML
HTML看似简单，其实很重要。因为HTML的结构关系着后期JS如何操作，好的结构会节省很多时间和代码。学习HTML建议多看主流网站的HTML结构，会学到很多东西。
标签

常用html标签

布局标签（div span）
标题标签
列表标签
文字相关标签
表格标签
表单标签

标签按自身属性的分类

块级标签（特点/包含哪些标签）
行内标签（特点/包含哪些标签）
行内块级元素（特点/包含哪些标签）

一定要深入的理解行内元素和块级元素，关系到用CSS布局时，我们如何合理有效的根据心中所想，元素就往哪去的目的。

标签语义化

好处与作用

**欢迎加入我们**为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：864305860 欢迎大家进群交流讨论，学习交流，共同进步。

当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们，祝福大家在往后的工作与面试中一切顺利。

HTML5新增标签

CSS
层叠样式表：主要用来美化页面，调整页面的结构
CSS的引入方式

行内式
内嵌式
外链式
导入式（@import,一般情况不适用该引入方式）

CSS的引入方式的优先级

行内式优先级最高
其他引入方式谁写在后面，就用谁的样式，后面会覆盖掉前面的样式

CSS选择器
基本选择器

标签选择器
类选择器
id选择器
通配符选择器（选择全部的样式）

其他CSS选择器

后代选择器
子代选择器
交集选择器
并集选择器
类型选择器（主要用在input标签）

input[type=text]

这种类型选择器有很多种选择方式，可以具体搜一下

相邻兄弟选择器

h2+p{margin:50px;}

伪类选择器

:hover{};//鼠标经过时的样式
:active{};//鼠标点击时的效果，多用在a标签上
:focus{};//获得焦点时的样式，多用在表单元素
:checked{};//选中时的样式，用在radio和checkbox

CSS3新增选择器

选择器的权重
这个也要好好理解，网上找文章多看看。因为关系着我们写的样式能否应用到元素上。

标签选择器 1
类选择器 10
ID选择器 100
通配符选择器最低

CSS的书写规范

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
欢迎加入我们

CSS盒子模型
很重要

内容（content）
内边距（padding）
边框（border）
外边距

这里只是梳理，相关知识点，网上很多了，可以找来细看。

页面中的三种基本布局

自然布局（也就是根据标签特性来布局block inline inline-block）
浮动布局（给元素设置浮动 float）

理解浮动元素的特点

层布局（定位 position）

理解定位元素的特点

HTML+CSS学习情况
我是通过模拟主流网站来练习html+css的，这个东西说难不难，主要就是多练习，并没有多少逻辑，看的再多不如拿起电脑一行行的去敲出来。我自己也还是在学习阶段，CSS的路还很长，也只是知道了基础，熟练应用都算不上。每敲一次就有一次新的收获，坚持！！！
JavaScript
我认为这是整个web技术栈中最重要的！！！；这是基础中的基础，只有扎实的基础才能让我们在这条路上走的更远。对于流行的框架都是基于JS的，所以一定不要舍本求末。把基础打牢对于我们学习框架会有很大的帮助，更能理解框架的实现机制。
JavaScript基础知识

历史
JavaScript的组成

ECMAScript:主要规定了Js的组成、引入方式、命名规范、输出方式、变量、数据类型、基本语法、操作语句
DOM:文档对象原型
BOM:浏览器对象模型

JS的命名规范
JS中的数据类型

基本数据类型
引用数据类型
他俩的区别
数据类型之间的比较（只有一个数值的情况、==比较的情况、===比较的情况）

JS的变量
JS中的表达式和语句
JS中的函数
JS中的运算符

基础知识中有两点很重要：函数和各数据类型的方法（Array的方法，Number的方法，RegExp的方法，String的方法，Bullean的方法），这里不展开写了，梳理为主_

DOM
就是描述整个html页面关系节点的图谱

获取页面中元素的方法
DOM的（动态操作）增删改
节点类型以及节点的关系
元素属性的设置和获取
DOM的盒子模型（主要应用在事件中）

client系列
offset系列
scroll系列

BOM

浏览器相关信息
url信息
全局对象

alert
open
setTimeout
setInterval
在控制台打印信息

JS进阶知识点

预解释（不重要了）
作用域链（理解全局作用域和私有作用域）
闭包（很重要，我也只是理解一些。）
this的指向问题
内存（栈内存和堆内存）
回调函数（callback）（薄弱点）
call/apply/bing（应用还是不够熟练，意思理解）
JS中的事件机制（事件类型、事件对象、事件流、事件委托）
JS中的运动
JS中的异步和同步

我知道的异步：元素绑定的事件、回调函数、ajax、定时器

JS的面向对象思想（我的薄弱点，理解不是很透彻，但这些知识非常重要，加强学习）

首先要理解JS中函数的三种角色

普通函数
“类”，在es5中没有类的概念，构造函数
普通对象

网上相关文章很多，很重要的知识点，我也要好好学习

JS封装的几种模式
原型以及原型链
函数中的继承

JS的学习情况
处在夯实基础基础的阶段，好多东西不能理解透彻，但知道这些知识点的重要性，所以一定要坚持下去。我自己的学习经验，当然我也只是刚刚入门。还是同样的态度，不要一直停留在怎样去学，如何去学的思想纠结中。打开电脑，按着网上给的技术技能树，多看看，多思考，多练习。我相信只要有足够的毅力，终究能学会。不过要保证在你确实要在这行干下去，否则就不要浪费时间了。学习从没有捷径可走，少些纠结，多些行动比什么都好。
ajax
处在对原理理解不够的阶段中，不过可以使用ajax来请求数据和发送数据，以及一些兼容问题，主要也是从网上找文章学习这方面知识。
jsonp
处在可以使用跨域来拿数据，了解一些基本原理，继续学习。
一些框架、库和css预编译器

jQuery（会用，不能说熟练，主要是对一些api不够熟悉。多练习吧）
less（css预编译器）
bootstrap
zepto
swiper

学习情况
这些框架、库、和预编译器正在学习阶段，能简单的使用其中的功能（根据api）。还是在平常中多练习吧，要学的东西太多不能放弃；
想学的前端技能

react
vue

主要还是根据市场来决定，代表前端的发展方向，基于框架来实现各种逻辑应用。不过也知道贪多咬不烂，所以要立足自己的技术能力，选择来学习。

结语

**欢迎加入我们**为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：864305860 欢迎大家进群交流讨论，学习交流，共同进步。