web前端知识技术栈梳理

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

web前端知识技术栈梳理_第1张图片

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 欢迎大家进群交流讨论,学习交流,共同进步。

你可能感兴趣的:(前端)