网页布局基础：HTML+CSS+JavaScript组成，

做软件开发就是从事编程开发工作。必须先从语法基础学习，通过语法形成产品效果。

前端开发的基本语法由HTML+CSS+JavaScript组成，是前端开发最基本的三种语言。

网页布局基础：HTML+CSS

HTML 是超文本标记语言，是编写 Web 内容的最基本语言。可以直接说它是网页的骨架，网页的图片、文字、视频、音频、程序都需要引入到网页中来体现。

当然，仅制作带有内容的 HTML 页面是不够的。因为它只是 HTML，所以只能使用 Table 作为布局来制作成型的网页。但是从Web2.0时代开始，就一直是盒模型布局方式，也就是用DIV+CSS来实现布局。

CSS 是级联样式表。标签布局通过样式属性标准化。当不再使用表格布局时，只要CSS样式实现网页标签的相应布局，就是正确的开发方式。

HTML (div) + CSS 布局是入门的基本步骤。在这个阶段，你需要学习的内容，包括：

1.标签语义、SEO

2.页面加载的流程和原理

3.网页结构

4.盒子模型（W3C盒子模型和IE盒子模型）

5.CSS 选择器

6.CSS 布局浮动，定位

开始阶段大家学习的布局方式基本都是px中的静态布局方式。如果你熟悉布局方法，先给自己一个小目标，做一个简单的电子商务网页的基本结构，没有特效，没有交互。

浏览器脚本语言：JavaScript

JavaScript是我们学习前端开发非常重要的内容，也是大家经常陷入的一个难点。JavaScript 现在可以说是互联网时代使用最广泛的脚本语言了。在网页中，所有的数据渲染和特效交互都需要使用 JavaScript 来影响浏览器的显示。

JavaScript 不仅是开发网页特效和渲染数据的重要内容。在学习前端开发的后期，在大量使用算法和框架的时候，也有很多对JavaScript基础的测试。

在基础阶段网页特效应用编程150例，我们需要注意学习 JavaScript：

1.基本关键字指令

2.基本数据类型、数组

3.函数

4.面向对象编程

5.原型链，闭包

6.JSON

7.阿贾克斯

8.DOM（文档对象模型原生 DOM 操作）

9.事件捕获、冒泡、代理

10.常用函数方法

11.ES5、6、7

在JavaScript部分的学习中，主要是理解交互的原理，把原理分析清楚，真正理解语法，然后写出多么复杂的逻辑触手可及。

JavaScript 经典类库 jQuery

说到学习JavaScript网页特效应用编程150例，很多小白同学肯定会对他的原生写法感到头疼。每一个逻辑业务都需要手动编写，即每使用一次就造一个轮子。觉得很麻烦。如果它可以更简单。

由于 JavaScript 具有被封装的特性，所以 JavaScript 中封装了很多类库和插件。比如最经典的类库就是jQuery。

jQuery 类库在类库中封装了许多 JavaScript 事件方法。jQuery通过封装缓解了很多遍历、对象选择等问题。它通过调用方法简化了网页效果的实现。

学习jQuery时，需要重点关注：

1.jQuery语法和JavaScript原生语法的区别

2.Dom对象和jQuery对象

3.jQuery的入口函数和JavaScript的入口函数的区别

4.jQuery事件的执行逻辑。

学习jQuery，最需要的效果就是快速完成网页的特效，比如轮播、手风琴菜单、轮播、放大镜等等。能够完成一个电商网站的排版+特效开发是最基本的要求。

这些是零基础学习所必需的一些基本内容。入门级前端开发需要掌握的最基本的东西，基本的了解可以为后续的学习做更多的准备。

多端进阶学习

除了基本的PC端，移动端可以说是目前非常流行的。

不同于PC端的单一网页，移动端的技术可以应用于WEB-APP、applet、Hybrid-App等。

网络应用

也就是我们常用的浏览器（以及微信等内置浏览器）打开的大型移动网页。比如我们常见的电商网站、功能网站、管理网站，在布局和功能上都有APP的效果。

做好Web-App开发，很多人肯定会说响应式布局，但是前端开发有五种布局方式。很多人头疼的rem布局。

除了布局方式，H5 中的新功能和触屏事件以及设备兼容性问题也需要触手可及。

小程序

不用说，现在可以说是很火了。各大平台都在做自己的小程序，各种讨价还价、抢票、电商、游戏都在用。以微信小程序为例，这主要是微信团队基于前端基础做的封装语法，主要是ES语法。目前很多公司都在招聘前端开发人员，并没有独立的小程序开发工程师，所以小程序可以说是前端工程师高薪聘用的一个加分技能，换句话说，是成熟发展所必需的。

混合应用

又称混合型APP，可能很少有人听说过，但2018年开发的人越来越多。这种APP可以直接制作下载到终端。可以说在体验上有着传统的体验。APP的大部分功能都没有了。这种开发门槛低，即可以完成前端开发。大部分都是大包平台可以做的，后面可以了解。

前端主流技术框架

前面的都是基本的东西。现在，当你去前端开发就业时，你不能仅仅依靠基本的东西。通过构建移动页面，您可以被认为是成熟的。VUE、Angular、React这三个前端框架，现在可以说非常火了。

前端基本语法都可以写，为什么需要框架？

很多新手朋友不明白什么是框架。他们只听说过 jQuery，并认为它是一个框架。或者认为框架是为了加快开发，而这些库和插件可以完成框架的工作。

事实上，框架的出现是前端地位改变的重要标志。最重要的性能是前后端分离。在前后端分离之前，很多后端开发者既是父亲又是母亲。效果不好，效率也不高。我出生在后端，知道痛苦。

今天的前端项目比以前更加复杂和多样化。项目复杂，问题多。

框架解决了什么问题？

解决重复引用外部js的问题，以jQuery开发为例，单个项目往往无法完成，需要引用很多第三方插件和库，导致引入很多外部JS文件到项目中。

这不仅使代码混乱，而且影响打开速度。但是有了框架，以VUE为例，一般是结合构建工具，然后就可以完成一个入口文件，并且在运行时在入口点引入一次，一劳永逸。

使用基于组件的开发，组件是前端框架中最强大的功能之一。它们可以扩展您的 HTML 并封装可重用的代码块，例如您的轮播、选项卡切换、页面标题、页面底部等。

这个独立的组件，结构（html）、性能（css）、行为（js）功能齐全，大大节省了代码量，提高了代码的复用性。尤其是在团队合作的时候，可以提高使用效率。

减少开发周期，如果你认为jQuery可以减少开发周期，那么框架实际上可以比库更快。比如用jQuery开发的时候，经常需要频繁的操作DOM，而且每次效果都要搜索DOM，非常麻烦。使用框架时，封装了很多功能。例如，许多指令具有数据绑定和数据格式化功能。这样，更多的时候，我们在开发的时候只需要关注数据的逻辑。

终于

这些是我们学习网页制作、Web App开发、前端开发的一些必备知识点。给大家分享一下学习路线。