# 前端究竟是个什么鬼？

## 前端内容介绍

### web1.0时代的网页制作

网页制作是web1.0时代的产物，那个时候的网页主要是静态网页，所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页，我们当时称为“牛皮癣”网页。例如一篇QQ日志、一篇博文等展示性文章。在web1.0时代，用户能做的唯一事情就是浏览这个网站的文字图片内容，这时用户也不能像现在在大多数网站都可以评论交流（缺乏交互性）。相信可能大多数人都听过“网页三剑客 Dreamweaver+Fireworks+Flash”吧，这个组合就是web1.0时代额产物

### web2.0时代的前端开发

“前端开发”是从“网页制作”演变而来的。

从2005年开始，互联网进入web 2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验。在web 2.0时代，网页有静态网页和动态网页。所谓动态网页，就是用户不仅仅可以浏览网页，还可以与服务器进行交互。举个例子，你登陆新浪微博，要输入账号密码，这个时候就需要服务器对你的账号和密码进行验证通过才行。web2.0时代的网页不仅包含炫丽的动画、音频和视频，还可以让用户在网页中进行评论交流、上传和下载文件等（交互性）。这个时代的网页，如果是用“网页三剑客Dreamweaver+Fireworks+Flash”制作的，那是远远不能满足需求。现在网站开发无论是开发难度，还是开发方式上，都更接近传统的网站后台开发，所以现在不再叫“网页制作”，而是叫“web前端开发”。

所以，处于web2.0时代的你，如果要学习网站开发技术，就不要再相信所谓的“网页三剑客Dreamweaver+Fireworks+Flash”，因为这个组合已经是上个互联网时代的产物。而且这个组合开发出来的网站问题也非常多，例如代码冗余、网站维护困难（学习到后期，你会知道为什么不用这个组合了

### Web前端能做什么？

公司官网（在PC通过浏览器来访问公司网站）移动端网页（在手机上来浏览公司信息、小游戏等）移动端APP（例如：淘宝、去哪儿旅游、携程等）微信小程序（微信最新推出的功能，随用随装，不占用手机空间）皮皮虾我们走可乐在厨房 红牛在冰箱66666。前端开发所学技术由简单到难，所以在很多网站上你会看到“七天入门前端”的视频博客等等，也就是说一星期就学会了HTML+CSS。那么最基本的页面你就可以书写了。

### 为什么要学习前端开发

我们为什么要学习前端开发，因为我们的课程定位是Python全栈开发，也就是说我们不仅要掌握后端开发的技术还要掌握一定程度的前端开发技术。 通过前面课程的学习，相信大家都已经掌握了Python基础语法、函数、面向对象、网络编程及数据库相关的内容。上面说的那些内容都是属于后端开发范畴的，在接下来的这个章节我们将一起来学习一下前端部分的内容，那么前端的核心内容有三部分，学习HTML+CSS是没有什么逻辑可言的。跟前面的课程可能存在一定的差异，希望同学们放下心里的包袱，跟着老师慢慢进入到前端开发。

### 前端开发都有哪些内容

我们知道，用所谓的网页三剑客已经不能满足需求了，那前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。

### 三部分都是做什么的

（1）HTML是什么？

```
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
```

（2）CSS

```
CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
```

（3）JavaScript

```
JavaScript是一门脚本语言。
```

（4）HTML、CSS和JavaScript的区别 我们都知道前端技术最核心的是HTML、CSS和JavaScript这三种。但是这三者究竟是干嘛的呢？

```
“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为
```

**哈哈！！有的同学此时可能就想，老师，你这不是等于没说吗？好吧，我给大家打个比喻。我们把前端开发的过程比喻成“建房子”，做一个网页就像盖一栋房子，先把房子结构建好（HTML）。建好房子之后给房子装修（CSS），例如往窗户安上窗帘、往地板铺上漂亮的瓷砖。最后呢，装修完了之后，当夜幕降临的时候，我们要开灯（JavaScript），这样才能看得见里面。现在大概懂了吧**。

我们回到实际例子中去，打开路飞学城官网([https://www.luffycity.com)，](https://www.luffycity.com\),)我们分析一下它的导航条，看一下“前端技术“这栏目的具有以下基本特点： **1、导航条文字颜色是灰色 2、大小是12px 3、背景颜色是白色 4、鼠标移到登录人头像时会展示你的个人信息**

那么这些效果是如何做出来的呢？ 很简单，思路呢其实就跟上面”建房子一样“，我们先用HTML搭建网页结构，这时候默认情况下，字体、字体颜色、字体大小和背景颜色如下图，仅仅使用HTML的文字

![](https://3085229280-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhJBJh-S7axNx1yCDIO%2F-LhJBKh2SxrBiQBzufa3%2F-LhJBr30Ima2b7aiaZlY%2Fp.jpg?generation=1560485787382593\&alt=media)

然后我们通过CSS修饰一下，改变其字体、字体大小、字体颜色和背景颜色，得到如下的效果图：在HTML基础上加入CSS的文字

![](https://3085229280-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhJBJh-S7axNx1yCDIO%2F-LhJBKh2SxrBiQBzufa3%2F-LhJBr32IDy3RuTwmsu3%2Fp1.jpg?generation=1560485788929491\&alt=media)

最后，我们通过JavaScript定义鼠标一个行为，就是鼠标移动到上面的时候，背景颜色会变为深绿色，效果如下：

![](https://3085229280-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhJBJh-S7axNx1yCDIO%2F-LhJBKh2SxrBiQBzufa3%2F-LhJBr34H_VbYDeD7wr0%2Fp2.jpg?generation=1560485787323179\&alt=media)

好了，相信大部分同学读到这里，肯定对于前端有所了解，那咱们就废话不多说，跟着老师这段时间一起去”搬砖“吧！！！