第一部分 HTML基础

第1章 HTML简介

1.1 前端技术简介

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

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

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

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

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

估计很多小伙伴都听过“网页三剑客”，这个组合就是Web 1.0时代的网站开发工具。网页三剑客指的是“Dreamweaver、Fireworks、Flash”这3款软件，如图1-1所示。

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

现在常说的“前端开发”是从“网页制作”演变而来的。互联网于十多年前进入了Web 2.0时代，在Web 2.0时代，网页分为两种：一种是“静态页面”，另一种是“动态页面”。

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

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

1.1.2 从“前端开发”到“后端开发”

1．前端开发

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

对于前端开发来说，最核心的3个技术分别是HTML、CSS和JavaScript（简称JS），也叫“新三剑客”，如图1-2所示。

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

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

JavaScript是什么？JavaScript是一种嵌入到HTML页面中的脚本语言，由浏览器一边解释一边执行。

现在，我们知道了前端最核心的3个技术是HTML、CSS和JavaScript。它们三者有什么区别呢？

“HTML用于控制网页的结构，CSS用于控制网页的外观，而JavaScript控制着网页的行为。”给大家打个比方加以说明，制作网页就好像是盖房子，盖房子的时候，我们都是先把结构建好（HTML）。之后，再给房子装修（CSS），例如，给窗户装上窗帘、在地板上铺瓷砖。装修好之后，当夜幕降临之时，我们要开灯（JavaScript）才能把屋子照亮。

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

字体类型是微软雅黑。

字体大小是14px。

背景颜色是淡绿色。

鼠标移到上面，背景色变成蓝色。

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

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

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

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

对于前端开发来说，即使你精通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开发的。

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

1.1.3 学习路线

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

HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→移动Web→Vue.js

这是一条比较理想的前端开发的学习路线。除了掌握这些技术，后期我们可能还需要学习使用一些前端构建工具，如webpack、gulp和babel等。学完并且能够熟练使用之后，你才算是一位真正意义上的前端工程师。针对这条路线，我们为小伙伴们打造了这套“从0到1”系列图书。

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

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

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