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

• web前端的整体概念
  • HTML：搭建结构
  • CSS：美化页面（布局）
  • JavaScript：实现动态的效果

第一阶段

HTML CSS 的学习

HTML

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

标签

• 常用html标签
  • 布局标签（div span）
  • 标题标签
  • 列表标签
  • 文字相关标签
  • 表格标签
  • 表单标签
• 标签按自身属性的分类
  • 块级标签（特点/包含哪些标签）
  • 行内标签（特点/包含哪些标签）
  • 行内块级元素（特点/包含哪些标签）

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

• 标签语义化
  • 好处与作用
• 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

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

总结

我是一个不太聪明的人，但当兵的生涯，让我能够踏下心来去做一件事。没有体验过极致的环境，永远不知道自己的极限在哪里。不论是真喜欢，还是为了高工资，都希望我们能够用心的去做一件事，当我们专注的时候，也许我们会更加喜欢自己。不要纠结怎么学，学什么，有什么捷径，代码敲着敲着，可能我们就会了。把心思用在行动上，比每天的纠结如何走捷径，也许就是捷径。和大家一起进步！！！

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://www.dengtar.com/17372.html