第一部分 HTML基础

第01章 HTML简介

1.1 前端技术简介

在学习HTML之前，我先来给小伙伴们讲一下网站开发的基础知识。了解这些知识，对于以后学习网站开发是非常重要的。同时，也能让你少走弯路。

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

1. Web1.0时代的“网页制作”

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

在Web1.0时代，用户能够做的唯一一件事就是浏览这个网页中的文字和图片。这种网页仅仅供用户浏览，却不能像在现在大多数网页中那样进行评论交流（跟服务器进行数据交互）。当今，很多网站都具备评论功能，但是在Web1.0时代是做不到的。

图1-1　网页三剑客

估计很多小伙伴都听说过“网页三剑客”吧？其实，这个组合就是Web1.0时代的东西。网页三剑客，指的是Dreamweaver、Fireworks和Flash。

2. Web2.0时代的“前端开发”

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

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

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

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

1. 前端开发

（1）前端核心技术

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

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

图1-2　新三剑客

• HTML是什么？

HTML，全称Hyper Text Markup Language（超文本标记语言）。HTML是一门描述性语言，也是非常容易入门的语言。

• CSS是什么？

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

• JavaScript是什么？

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

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

"HTML是网页的结构，CSS是网页的外观，而JavaScript是网页的行为。"

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

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

• 字体类型是“微软雅黑”。

• 字体大小是14px。

• 背景颜色是淡绿色。

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

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

图1-3　默认外观

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

图1-4　加入CSS

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

图1-5　加入JavaScript

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

（2）其他前端技术

前端最核心的技术是HTML、CSS和JavaScript。但是对于前端开发来说，哪怕你精通这三个，也称不上一位真正的前端工程师。除了这三个技术之外，我们还得学习一些其他技术，例如jQuery、Vue.js、SEO、性能优化等。对于这些技术，我们可以先把HTML、CSS和JavaScript这三个学好了，再慢慢去接触。

2. 后端开发

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

那后端技术又是怎样的一门技术呢？举个简单例子，很多网站都有注册功能，只有注册了之后才具有某些权限，如果你要使用QQ空间，就得注册一个QQ才能使用。这个注册登录功能就是用后端技术做的。再有，淘宝上面不是有很多商家吗？这些商家有各种各样的宝贝，背后庞大的数据只能依靠后端技术处理才能实现。

（1）PHP

PHP是一种通用开源脚本语言，其语法吸收了C语言、Java和Perl的特点，易于学习，使用广泛，主要适用于Web开发领域。

（2）JSP

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

（3）ASP.NET

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

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

1.1.3 学习路线

图1-6　前端技术

Web技术实在是太多了，很多小伙伴完全不知道怎么入手，上网问别人，回答又五花八门。下面是我推荐的学习顺序。

HTML → CSS → JavaScript → jQuery → CSS3 → HTML5 → Vue.js

这是一条比较理想的前端开发学习路线。除了掌握这些技术，后期我们可能还需要学习一些前端构建工具的使用，例如webpack、gulp、babel、express等。学完之后才算一位真正意义上的前端工程师。

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

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

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

1.2 什么是HTML

HTML全称是Hyper Text Markup Language（超文本标记语言），它是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。

语法

<标签符>内容</标签符>

说明

标签符一般都是成对出现的，有一个“开始符号”和一个“结束符号”。结束符号只是比开始符号多加上了一个斜杠“/”。当浏览器收到HTML文本后，就会解析里面的标签符，然后把标签符对应的功能表达出来。

举个例子，我们一般用“<em>绿叶学习网</em>”来定义文字为斜体。当浏览器遇到标签对时，就会把标签中的文字用斜体显示出来。

<em>绿叶学习网</em>

当浏览器遇到上面这行代码时，就会得到如图1-7所示的斜体文字效果。

图1-7　浏览器解析后的效果

那么学习HTML究竟要学些什么呢？用一句简单的话来说，就是记住各种标签，以便搭建网页的“骨架”。在HTML中，标签有很多种，如文字标签、图片标签、表单标签等。由于HTML是一门描述性的语言，就是用标签来说话。举个例子，如果你要在浏览器中显示一段文字，就应该使用段落标签p；如果要在浏览器中显示一张图片，就应该使用图片标签img。针对你想显示东西的不同，使用的标签也会不同。

总而言之，学习HTML就是学习各种各样的标签，然后针对你想显示什么东西，再相应地使用正确的标签，非常简单。

此外，很多时候我们也把“标签”说成“元素”，例如将p标签说成p元素。标签和元素，其实说的是一个意思，仅仅是叫法不同罢了。不过“标签”的叫法更加形象地说明了HTML用来“标记”的，来标记这是一段文字还是一张图片，从而让浏览器将代码解释成页面效果来展示给用户看。

1.3 教程介绍

1.3.1 教程简介

前面我们学习了前端开发的一些必备知识（很重要喔），并且也了解到前端的学习路线大致如下。

HTML → CSS → JavaScript → jQuery → CSS3 → HTML5 → Vue.js

这本书是我多年开发经验的心血总结，在编写的时候甚至字斟句酌。从一开始接触HTML，我就在记录自己遇到的各种问题，因此我很了解初学者的心态，也非常清楚怎样才能快速而无阻碍地学习。我是站在初学者的角度而不是站在已经学会的角度来编写这个教程的。有一句话说得好：“如果你已经站在山顶上了，当初在爬山时没有仔细体会的话，这个时候你就已经忘记了曾经作为攀岩者艰苦攀登的心情了。”

本系列教程中的每一句话，我都精心编写，反复审阅，尽量把精华呈现给大家。所以大家在学习的过程中，不要图速度快，尽量放慢一点，尽量把每一个概念都理解清楚，千万别指望什么“48 小时精通HTML+CSS”。

有一种学习模式是值得推荐的：“学技术，泛读十本书不如精读一本书十遍。”这句话适用于任何领域的学习。挑一本最精华的书，把这本书当做主体，然后用其他书辅助从而来弥补这本书的缺陷。这本书源于我在绿叶学习网中分享的三个在线教程的升级版。相信本书会是你前端入门的最好选择之一。

小伙伴们在学习过程中遇到任何困难，都可以到绿叶学习网上面多多提问、交流。如果大家发现教程中有任何错漏，可以发邮件给我（lvyestudy@foxmail.com），以便笔者把教程做得更加完善。

1.3.2 初学者比较关心的问题

• HTML入门有门槛吗？

学习HTML不需要任何编程基础，小学生也可以学。当年我读大学的时候，计算机网络教授就说，他见过有些小学生都会做网页了！

后来自己接触了前端开发，学到一定程度才知道大学课程为什么不会涉及HTML、CSS这些内容，因为这些东西是非常简单易学的。不要抱怨自己学不会，那是你没有足够用心。

图1-8　让人不得不服的《宝宝的网页设计》

• 基本掌握HTML后，能达到什么程度？

可以把一个简单网页做出来，例如一篇博文。不过使用HTML做出来的页面很单调，我们还需要学习CSS以及JavaScript的知识。

• HTML入门，要花多少时间？

不多，即使没有基础，认真学的话，最多一周就可以了。当然仅仅学完这个教程，也只是入门程度。小伙伴们一定要去学习一下HTML进阶的内容，不然你是不具备实际开发能力的。

• 这本书每一章后面的习题有必要做吗？

这本书中每一章后面的练习题都是我跟其他几个前端工程师精心挑选出来的，许多问题直接跟真正的前端开发工作挂钩，甚至不少还是面试题。希望小伙伴们认真地把每一道题都做一遍。

• 现在都是HTML5的时代了，HTML不是被淘汰了吗，为什么还要学HTML呢？

HTML是从HTML4.01升级到HTML5的。其中我们常说的HTML指的是HTML4.01，而HTML5一般指的是相对于HTML4.01“新增加的内容”，并不是说HTML4.01被淘汰了。准确来说，你要学的HTML其实等于HTML4.01加上HTML5。

之前好多小伙伴以为只要学HTML5就行了，没必要再去学HTML。殊不知如果你没有HTML基础是学不来HTML5的。这种错误的认识曾经误导了大量的初学者。