这里整理了一份web前端的系统学习路线，包含的技术如下：

第一阶段：专业核心基础

阶段目标：

1. 熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。

2. 熟练运用HTML+CSS特性完成页面布局。

4. 熟练应用CSS3技术，动画、弹性盒模型设计。

5. 熟练完成移动端页面的设计。

6. 熟练运用所学知识仿制任意Web网站。

7. 能综合运用所学知识完成网页设计实战。

知识点：

1、Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。

2、CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端，整理网页开发技巧。

3、预编译css技术：less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用 less、sass完成项目开发，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。

第二阶段：Web后台技术

阶段目标:

1. 了解JavaScript的发展历史、掌握Node环境搭建及npm使用。

2. 熟练掌握JavaScript的基本数据类型和变量的概念。

3. 熟练掌握JavaScript中的运算符使用。

4. 深入理解分之结构语句和循环语句。

5. 熟练使用数组来完成各种练习。

6.熟悉es6的语法、熟练掌握JavaScript面向对象编程。

7.DOM和BOM实战练习和H5新特性和协议的学习。

知识点：

1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用JavaScript的知识完成各种练习。

2、JavaScript面向对象基础、异常处理机制、常见对象api，js的兼容性、ES6新特性。熟练掌握JavaScript面向对象的开发以及掌握es6中的重要内容。

3、BOM操作和DOM操作。熟练使用BOM的各种对象、熟练操作DOM的对象。

4、h5相关api、canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。

第三阶段：数据库和框架实战

阶段目标：

1. 综合运用Web前端技术进行页面布局与美化。

2. 综合运用Web前端开发框架进行Web系统开发。

3. 熟练掌握Mysql、Mongodb数据库的发开。

4. 熟练掌握vue.js、webpack、elementui等前端框技术。

5. 熟练运用Node.js开发后台应用程序。

6. 对Restful，Ajax，JSON，开发过程有深入的理解,掌握git的基本技能。

知识点：

1、数据库知识，范式，MySQL配置，命令，建库建表，数据的增删改查，mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理，为Node.js后台开发打下坚实基础。

2、模块系统，函数，路由，全局对象，文件系统，请求处理，Web模块，Express框架，MySQL数据库处理，RestfulAPI，文件上传等。熟练运用Node.js运行环境和后台开发框架完成Web系统的后台开发。

3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。

4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，实现整站项目完整功能并上线发布。

第四阶段：移动端和微信实战

阶段目标：

1.熟练掌握React.js框架，熟练使用React.js完成开发。

2.掌握移动端开发原理，理解原生开发和混合开发。

3.熟练使用react-native和Flutter框架完成移动端开发。

4.掌握微信小程序以及了解支付宝小程序的开发。

5.完成大型电商项目开发。

知识点：

1、React面向组件编程、表单数据、组件通信、监听、声明周期、路由、Redux基本概念。练使用react完成项目开发、掌握Redux中的异步解决方案Saga。

2、react-native、开发工具、视图与渲染、api操作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架，并分别使用react-native和Flutter分别能开发移动端项目。

3、微信小程序基本介绍、开发工具、视图与渲染、api操作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。

4、大型购物网站实战，整个项目前后端分离开发；整个项目分为四部分：PC端网页、移动端APP、小程序、后台管理。团队协作开发，使用git进行版本控制。目期间可以扩展Three.js 、TypeScript。

可以在样式后面加上！important，如：

backgroundcolor:red!important;

!important 将覆盖行内css

css优先级：行内css>id选择器(#)>伪类

零基础学什么都会吃力啊！！！

但是编程来说，像大数据、Java、前端等等，相对而言，还是前端入门简单，学习的困难程度是由易到难，让你有个过度阶段，

第一阶段HTML+CSS核心基础 HTML,CSS核心基础CSS过渡HTML5语义化标签线性渐变，径向渐变HTML新增标签属性CSS动画Animation表单项新增属性弹性盒模型CSS选择器经典布局练习(双飞翼，CSS3伪类 品字布局) + 案例CSS伪元素响应式布局第二阶段JavaScriptJavaScript基础JavaScript操作DOMJavaScript面向对象(js高级)第三阶段PC端整栈开发PC项目jQueryjQuery项目lessbootStrap第四阶段ES6+Node+工程化ES6/7/8promisenpm常用命令git基础（常用操作）git高级Node.js基础git基础（常用操作）http协议 & cookie & sessionMongoDBExpress框架ajax(原生，jQuery,axios,fetch)ajax库基本封装使用 promise封装模块化构建工具gulp，webpack4.0基础第五阶段React技术栈React基础语法react-routerReact Antd使用ReduxReact移动端项目第六阶段Vue技术栈Vue基础VueRouterVuexVue源码(v-model, 双向数据绑定)VuePC项目-电商Vue后台管理第七阶段小程序小程序UniAppTypeScript第八阶段就业指导+面试精讲vue实战(移动端)小程序实战 面试精讲就业指导

使用样式表有以下优点：

1.内容与表现分离

写一个网页就好比建房子，房子的结构通过砖块、钢筋、水泥搭建，后期通过瓷砖、地板等的装饰，才能让房子更加漂亮。

网页通过HTML搭建整体结构，通过CSS修饰美化网页。为了使得在搭建的过程中不受到美化网页的影响，而是专注在结构上。并且在后期的维护上也更加方便。

2.网页的表现统一，容易修改

分开之后，结构和样式在不同的文件，互不影响，结构清晰，可读性强，后期如果修改维护便于定位查找。

3.丰富的样式，使得页面布局更加灵活

首先样式表中提供了强大的而且非常全面灵活的选择器，可以供我们选取到网页中的任何一个元素

从大的方面选择器可以分为四大类：

1.基本选择器

2.层次选择器

3.结构伪类选择器

4.属性选择器

如下图我只是截取了属性选择器中几种：

其次样式表不仅提供了文本效果、背景和边框还有2D/3D 转换、动画、多列布局、用户界面等。

4.减少网页的代码量，增加网页的浏览速度，节省网络带宽

很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”

换句话说，在进行Web开发时，减少多余的标签嵌套以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。

另外，更少的图片、脚本和Flash文件能够减少用户访问Web站点时的HTTP请求数，这是提升页面加载速度的最佳方法之一。

而使用CSS3制作图形化网站无需任何图片，极大地减少了HTTP的请求数量，并且提升了页面的加载速度

基于以上几点，使用样式表是必须的！！