Web前端开发学习步骤 | 这些阶段的知识点看你掌握了多少！

时间：2023-05-26 09:48:02 | 来源：网站运营

时间：2023-05-26 09:48:02 来源：网站运营

Web前端开发学习步骤 | 这些阶段的知识点看你掌握了多少！：前端开发是创建 Web 页面或 app 等前端界面呈现给用户的过程，通过 HTML，CSS 及JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。

在互联网的演化进程中，网页制作是Web1.0 时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

移动互联网带来了大量高性能的移动终端设备以及快速的无线网络、HTML5、**node.js **的广泛应用，各类框架类库层出不穷。

下方为大家专门整理了一套系统的详细学习资料，包含有教程视频、源码笔记、实战项目以及书籍PDF版等内容，需要的同学都可以免费领取，能节省不少学习成本的同时能让同学也门学习更加系统高效，所以与需要的话就抓紧时间领取学习吧~

随着时代的发展，前端开发也越来越受到大家的欢迎，其中不乏转行来做前端开发的，通过与这些人的接触发现，很多人在入行前或多或少的存在顾虑。那么转行来做前端到底可以走多远，转行来做前端会不会为时已晚？

根据我长期的总结并结合时下的技术栈，我把前端的学习大致分为如下五个阶段，以及罗列了各个阶段需要掌握的知识点。

阶段一

一、常用开发工具介绍

在学习前端之前，我们先把工具准备好，没有金刚钻怎么揽瓷器活？所以准备了如下的一些开发工具，这里推荐使用 VSCode。

1. WebStorm

2. Dreamweaver

3. HbuilderX

4. Sublime Text

5. Vim（高手使用较多）

6. VSCode

思维导图

开发工具这里也已经整理打包好了，进入下方的学习群就能免费领取，群里都是学习Web前端志同道合的小伙伴，相互之间交流进步，学习氛围非常不错，还有很多前端技术大佬分享学习经验和方法，让你在学习过程中能少走弯路且更加系统，赶快进群学习试试吧！

二、HTML+CSS 部分

HTML

掌握 HTML 是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好 HTML 是成为 Web 开发人员的基本条件。

HTML 是一种标记语言，能够实现 Web 页面并在浏览器中显示。

HTML 需要掌握的知识点如下所示：

1. 属性

2. 事件

3. 标签

4. 字符集

CSS

学好 CSS 是网页外观的重要一点，CSS 可以帮助把网页外观做得更加美观。CSS 需要我们学习如下部分：

1. CSS基础教程

2. CSS样式

• 背景
• 文本
• 字体
• 链接
• 列表
• 表格
• 轮廓

3. CSS框模型

• 内边距
• 边框
• 外边距

4. CSS定位

• 相对定位
• 绝对定位
• 浮动

5. CSS选择器

• 元素选择器
• 选择器分组
• 类选择器
• ID选择器
• 属性选择器
• 后代选择器
• 子元素选择器
• 相邻兄弟选择器
• 伪类
• 伪元素

6. CSS高级

• 对齐
• 尺寸
• 分类
• 导航栏
• 图片库
• 图片透明
• 盒子模型
• 媒体布局

思维导图

三、HTML5+CSS3

HTML5

HTML5 作为 HTML 的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。

1. HTML5视频

2. HTML5音频

3. HTML5拖放

4. HTML5画布

5. HTML5 SVG

6. HTML5地理定位

7. HTML5 Web存储

8. HTML5 应用缓存

9. HTML5表单

HTML5 可以使开发者的工作大大简化，理论上单次开发就可以在不同平台借助浏览器运行，降低开发的成本，这也是产业界普遍认为 HTML5 技术的主要优点之一。

CSS3

CSS3使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。CSS3作为CSS的进阶版，拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。

CSS3的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。

CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。

1. CSS3边框

2. CSS3背景

3. CSS3文本效果

4. CSS3字体

5. CSS3 2D转换

6. CSS3 3D 转换

7. CSS3 过渡

8. CSS3 动画

9. CSS3 多列

思维导图

四、JavaScript

JavaScript 是 Web 开发者必学的三种语言之一，这里我们需要区别 JavaScript 和 Java 他们是完全不同的语言，不论是概念还是设计。Javascript 部分需要我们学习的知识点如下所示：

1. 认识JavaScript

• 基本语法
• 变量

2. 数据类型

• 字符串
• 数字
• 布尔
• 数组
• 对象
• Null
• Undefined

3. 函数

• 内置函数
• 自定义哈数

4. 运算符

5. 流程控制

6. DOM对象

• String
• Array
• Date
• Boolean
• Math
• Number

7. BOM对象

• WIndow
• Navigator
• Screen
• History
• Location

8. 综合实例

思维导图

以上内容是Web前端开发的基础知识点，需要每位同学都掌握好，不然后面的知识进阶将很难进行，觉得学习有困难的同学不妨加入下方的免费公开课学习试试，老师教学讲解通俗易懂，课程内容清晰详细，零基础同学也能轻松跟上进度，学习非常的系统，感兴趣的同学不妨加入学习试试！

阶段二

一、JavaScript进阶

JS 进阶主要学习构造函数，原型对象，继承的多种实现方式，原型链，函数的本质，闭包，沙箱等。

二、DOM+BOM综合演练

三、网页特效

四、 Jquery学习

1. 基础语法

2. 选择器

• 基本选择器
• 层次选择器
• 过滤选择器
• 表单选择器

3. DOM操作

• 查找节点
• 创建节点
• 插入节点
• 删除节点
• 复制节点
• 替换节点
• 包裹节点
• 属性操作
• 样式操作

4. 事件

• 事件绑定
• 事件冒泡

5. 动画

• show、hide
• fadeIn、fadeOut
• slideUp、slideDown
• 自定义动画animate
• 动画回调以及停止动画

6. 常用工具

• 浏览器及特性检测
• 数组和对象操作

Layer UI，主要学习栅格布局，图标，动画，按钮，表单，导航，选项卡，进度条，面板，表格，时间线等

7. Ajax

8. Jquery插件编写

思维导图

五、ES6进阶

六、Bootstrap

七、其他

1. animate.css学习（扩展）

2. PS切图学习

思维导图

阶段三

一、Vue

1. Vue基础

• 模版语法
• 计算属性侦听器
• Class与Style绑定
• 条件/列表渲染
• 事件处理
• 表单输入绑定
• 组件基础、注册
• Prop
• 自定义事件

2. Vuex

• State
• Getter
• Mutation
• Action
• Module

3. Vue-router

• 认识路由
• 动态路由
• 嵌套路由
• 编程式导航
• 路由组件传参

4. axios

• 认识axios
• 全局配置
• 发送POST、GET请求等

思维导图

二、React

1. 认识React

2. React元素渲染

3. JSX

4. 组件

5. State

6. Props

7. 事件处理

8. 条件渲染

9. 列表

10. 组件API

11. 组件声明周期

思维导图

三、Node

1. 基础

• console（控制台）
• crypto（加密）
• debugger（调试器）
• fs（文件系统）
• http（网络）
• os（操作系统）
• path（路径）

2. 高级

• NPM介绍及使用
• MVC模式简介
• Express框架学习
• 链接Mysql
• 链接Redis
• 项目实战

思维导图

四、webpack

1. 概念

主要讲什么是入口，出口，loader，插件等

2. 入口

• 单个入口语法
• 对象语法
• 常见场景

3. 输出

• 用法
• 多个入口起点
• 高级进阶

4. 模式

• development
• production

5. loader

• 实例
• 配置

6. 插件

• 剖析
• 用法
• 配置

7. 配置

• 基本配置
• 多个Target
• 使用其他语言配置

8. 模块

思维导图

阶段四（扩展部分，了解即可）

一、Mysql

1. 阶段一

• 认识mysql
• 安装mysql
• 创建数据库、数据表
• 学习常用的SQL命令，完成增删查改

2. 阶段二

• 学习Mysql关联查询，子查询等
• 学习Mysql常用函数
• 学习Mysql分组、分页、排序等

3. 阶段三

• 学习Mysql高级查询
• 了解存储过程，自定义函数等
• 了解Mysql配置文件

二、Redis

1. 认识Redis

2. 学习redis的数据类型

3. redis常用操作

4. redis事务

思维导图

阶段五

一、项目管理篇

1. SVN使用

• 认识svn
• 安装
• 生命周期
• 启动模式
• 创建版本库
• 检出操作
• 解决冲突
• 提交操作
• 版本回退
• 查看历史
• 分支
• 标签

2. GIT使用

• 认识git
• 安装配置
• 工作流程
• 工作区、暂存区和版本库
• 创建仓库
• 基本操作
• 分支管理
• 查看历史等
• 标签
• github

二、小程序

1. 了解小程序开发流程

2. 视图容器

• view
• scroll-view
• movable-view
• cover-view
• cover-image

3. 基础内容

• icon
• text
• rich-text
• progress

4. 表单组件

• button
• checkbox
• form
• input
• label
• picker
• picker-view
• radio
• slider
• switch
• textarea

5. 导航

• navigator
• function-page-navigator

6. 媒体组件

• audio
• image
• video
• camera
• live-player
• live-pusher

7. 地图（map）

8. 画布（canvas）

9. 开放能力

• open-data
• web-view
• ad
• official-account

三、apicloud（移动app开发）

1. 认识apicloud

2. 开发工具讲解

3. 端API

• API对象
• 设备访问
• 功能扩展
• 界面布局
• 导航菜单
• 小程序模块
• 云服务对接

4. 云API

• 数据云API
• 统计云API
• 推送云API
• 云API SDK

5. 小程序模块使用

四、常用框架使用篇

1. iview （vue框架）

2. element ui （vue框架）

3. echarts (百度图标库)

4. 阿里巴巴开源图标使用

5. Sass学习

6. Swiper学习

7. zoom.js 学习

五、综合项目实战

教务管理系统（node+express+mysql）实现

思维导图

以上便是今天分享的Web前端全部学习内容，内容较多，觉得有帮助可以收藏阅读，或是领取下方的资料教程以及学习路线框架跟随学习，都是免费的，帮助同学们提升学习效率的同时更加系统，需要的同学抓紧时间领取，不要错过啦！