HTML + CSS + JavaScript 快速上手

在学习HTML之前，我们先来给小伙伴们讲一下网站开发的基础知识。了解这些，对于你的网站开发学习之路是非常重要的。这不但能让你避免走太多的弯路，也能让你知道该学什么、以及该如何学。

一、从“网页制作”到“前端开发”

1. Web 1.0时代的“网页制作”

网页制作是Web 1.0时代（即2005年之前）的产物，那个时候的网页主要是静态页面。所谓的静态页面，指的是仅仅供用户浏览而无法跟服务器进行数据交互的页面。例如，一篇博文，就是一个展示性的静态网页。

在Web 1.0时代，用户能够做的唯一一件事就是浏览这个网页的文字和图片。用户只能浏览网页，却不能在网页上发布评论和交流（跟服务器进行数据交互）。当今我们司空见惯的发布评论功能，在很多年前的Web 1.0时代的网站中，是极其少见的。

估计很多小伙伴都听过“网页三剑客”吧？其实，这个组合就是Web 1.0时代的网站开发工具。

 

 

 

网页三剑客，指的是“Dreamweaver、Fireworks、Flash”这三款软件。

2．Web 2.0时代的“前端开发”

现在常说的“前端开发”是从“网页制作”演变而来的。随着互联网于10多年前进入了Web 2.0时代，仅仅由文字和图片组成的静态页面已经远远满足不了用户的需求了。在Web 2.0时代，网页分为两种：一种是“静态页面”；另外一种是“动态页面”。

静态页面仅仅供用户浏览，却不具备与服务器交互的功能。而动态页面不仅可以供用户浏览，还可以与服务器进行交互。换句话来说，动态页面是在静态页面的基础上增加了与服务器交互的功能。举个简单的例子，如果你想登录QQ邮箱，就得输入账号密码，然后点击“登录”按钮后，服务器会对你的账号和密码进行验证，成功后才可以登录。

在Web2.0时代，如果仅仅是使用“网页三剑客”来开发的话，那是远远不能满足大量数据交互开发需求的。现在我们所说的“页面开发”，无论是从开发难度，还是开发方式上，都更接近传统的网站后台开发。因此，我们不再叫“网页制作”，而是叫“前端开发”。对于处于Web2.0时代的你，如果要学习网站开发技术，就不要再相信所谓的“网页三剑客”了，因为这个组合已经是上一个互联网时代的产物了。此外，这个组合开发出来的网站问题也非常多，例如代码冗余、可读性差、维护困难等。等学到后面，小伙伴们就会知道为什么不用这个组合了。

二、从“前端开发”到“后端开发”

1．前端开发

既然所谓的“网页三剑客”已经满足不了现在的前端开发需求了，那么我们现在究竟要学习哪些技术呢？

对于前端开发来说，最核心的3个技术分别是：HTML、CSS和JavaScript，也叫“新三剑客”。

HTML，全称Hyper Text Markup Language（超文本标记语言）。HTML是一门描述性语言。

CSS，即Cascading Style Sheet（层叠样式表），是用来控制网页外观的一种技术。

JavaScript是什么？JavaScript，就是我们通常所说的JS，是一种嵌入到 HTML页面中的脚本语言，由浏览器一边解释一边执行。

现在，我们都知道前端最核心的3个技术是HTML、CSS和JavaScript。不过，有些初学的小伙伴就会问了，它们三者有什么区别呢？

HTML用于控制网页的结构，CSS用于控制网页的外观，而JavaScript控制着网页的行为。

这不是等于没说吗？好吧，给大家打个比方。制作网页就好像是盖房子。盖房子的时候，我们都是先把结构建好（HTML）。之后，再给房子装修（CSS），例如给窗户装上窗帘、在地板上铺瓷砖。装修好之后，当夜幕降临之时，我们要开灯（JavaScript）才能把屋子照亮。现在大家都懂了吧？

我们再回到实际例子中去，看一下绿叶学习网的导航栏。“前端入门”这一栏目具有以下基本特点。

小伙伴们可能会疑惑：这些效果是怎么做出来的呢？其实思路跟 “盖房子”是一样的。我们先用HTML来搭建网页的结构，此时默认情况下，字体类型、字体大小、背景颜色如下图所示。

然后，我们使用CSS来修饰一下字体类型、字体大小和背景颜色，如下图所示。

 

 

最后，再使用JavaScript来定义鼠标的行为，当鼠标移到上面时，背景颜色会变成蓝色，最终效果如下图所示。

 

 

到这里，大家就应该都知道一个缤纷绚丽的网页是怎么做出来的了吧？理解这个过程，对于后续学习是非常重要的。

对于前端开发来说，即使你精通HTML、CSS和JavaScript，也称不上一位真正的前端工程师。除了上述3种技术之外，我们还得学习一些其他技术，例如jQuery、Vue.js、SEO、性能优化等。建议小伙伴们把HTML、CSS和JavaScript学好之后，再慢慢去接触这些技术。

2．后端开发

当你掌握了前端技术，差不多就可以开发一个属于自己的网站了。不过这个时候做出来的是一个静态网站，它的唯一功能是供用户浏览，而不能与服务器进行交互。在静态网站中，用户能做的事情是非常少的。因此，如果想开发一个用户体验更好、功能更强大的网站，我们就必须学习一些后端技术。

那后端技术又是怎样的一门技术呢？举个简单例子，很多网站都有注册功能，只有用户注册之后，才具有某些权限。如果你要使用QQ空间，就得注册一个QQ才能使用。这个注册以及登录功能就是用后端技术做的。再有，你在淘宝上可以轻松方便地购物，这些功能只能依靠后端技术处理才能实现。下面就给大家介绍几种常见的后端技术。

PHP，是世界上最通用的开源脚本语言（之一），其语法吸收了C、Java和Perl语言的特点，易于学习，使用广泛，适用于Web开发领域。

JSP，有点类似ASP技术，它是在传统的网页HTML文件中插入Java程序段（Scriptlet）和JSP标记（tag），从而形成JSP文件。用JSP开发的Web应用是跨平台的，既可以在Windows系统下运行，也能在其他操作系统（如Linux）上运行。

ASP.NET，其前身就是我们常说的ASP技术，像绿叶学习网上一版本就是使用ASP.NET开发的。

此外，很多人认为“网站就是很多网页的集合”，其实这个理解是不太恰当的。准确来说，网站是前端与后端的结合。

三、学习路线

Web开发相关的技术实在是太多了，很多小伙伴完全不知道怎么入手。就算上网问别人，回答也是五花八门，令人困惑。下面是我们推荐的学习路线。

HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js

这是一条比较理想的前端开发学习路线。除了掌握这些技术，后期我们还需要学习更多辅助性的技能，包括SCSS、Typescript、UI框架等。学完，并且能够熟练使用之后，你才算是一位真正意义上的前端工程师。针对这条路线，我们为小伙伴们打造了整个系列的教程。

在HTML刚入门的时候，你不一定要把HTML学到精通了再去学CSS（这也不可能），这是一种最笨也是最浪费时间的学习模式。对于初学者来说，千万别想着精通了一门技术，再去精通另一门技术。在Web领域，不少技术之间都有着交叉关系，只有“通”十行才可能做到“精”一行。

如果你走别的路线，可能会走很多弯路。这条路线是我从初学前端，到开发了各种类型网站以及写了10多个在线技术教程和多本书籍的心血总结。当然，这条路线是一个建议，并非具有强制性。

接下来，就让我们迈入前端开发学习的第一步——HTML入门。

https://www.bilibili.com/video/BV1T34y147Vg?spm_id_from=333.337.search-card.all.click