Web前端学习路线

HTML

• HTML标签：

  <span>、<p>、<a>、<h1>、<div>、<form>、<ul>、<ol>等等
  

• 标签分类：块级标签、行级标签，了解它们的特点和区别即可

CSS

• 引入CSS方式
• 常见的CSS属性：颜色、背景色、字体大小、宽高等等
• 基本的选择器：通用、类、ID、后代选择器
• 盒子模型：两种盒子模型以及margin和padding
• 定位：静态定位，固定定位，相对定位，绝对定位，粘性定位
• 布局：浮动，Flex，两栏布局，三栏布局
• 实战：仿制静态页面，比如网站首页、好看的网页等等

JavaScript

• JavaScript基础：变量，数据类型，操作符，while语句，if语句，数组，函数，熟悉常见的API

• DOM：学习JavaScript是如何操作DOM，如何获取HTMl元素，熟悉常见的DOM API

• JavaScript进阶：事件冒泡，作用域，原型链，闭包，this，自执行函数，这些可以了解

• Ajax请求：学习如何发Ajax，以及获取数据和处理请求错误

• ES6基础：let，const，解构，set，map

• 实战：纯前端轮播图，简单留言板，实现lodash高频方法

Git和GitHub

• Git概念：什么是Git，优点，分支概念，版本管理

• 常见命令：add，commit，merge，push，fetch，reset

• GitHub：注册GitHub账号，新建GitHub远程仓库，实践Git操作

Nodejs和Npm

• 安装Nodejs和Npm：因为无论学Vue还是React，本地开发和构建都会依赖Nodejs和Npm，所以我们提前安装它，只需要了解就行
• 学习基本的Node和Npm命令：了解即可

Vue（和React任选一个学）

• Vue文档基础部分：Vue文档写的很好，先把基础部分学完

• 写Vue组件：自己实现常见的Vue组件，比如按钮、卡片、下拉框、弹窗、轮播图等等，过程中多查阅官网文档

• 学习Vue文档深入部分：加深Vue学习

• Vue-Router：了解什么叫前端路由，知道如何分配置

• Vuex：了解什么叫前端状态管理、单向数据流，学会书写

• 实战：写一个综合性的前端项目，使用到Vue、Vue-Router、Vuex，比如一个博客系统

Webpack

• 官网学习基础：了解是什么
• 根据项目学习：在学习Vue或React的时候肯定会遇到Webpack，这个时候可以返回去看看项目中Webpack是什么配置的，使用到了哪些plugin和loader

HTTP

• HTTP基础：是干什么的，有哪几部分
• HTTP状态码：有哪些常见的状态码，分别是什么意思
• HTTP缓存：如何实现缓存，特点