网页基础

爬虫看到的网页是 HTML，我们在浏览器里看到的网页其实是经过浏览器对 HTML 处理过后的样子。

在学习 HTML 前，我们先了解一些网页开发的知识。网页开发，也叫 Web 开发，是近几年比较热门的开发岗位。你可能听过 Web 开发或者身边有从事 Web 开发的朋友，Web 开发也称为前端开发，他们需要同时掌握三把利器——HTML、CSS、JavaScript。

一下接触三个新知识，你可能会有点吃力。不过不要担心，对于爬虫来说，我们暂时只需要掌握 HTML 的知识即可，其他知识稍作了解。

接下来我们会把网页开发和熟悉的 PPT 制作来对比理解，我想你对 PPT 的制作应该不陌生吧？

我们先来回顾一下 PPT 的制作过程：

新建 PPT 文件；
插入标题、文本框、图片等元素；
调整字体大小、颜色等，进行排版；
添加动画，比如为页面元素设置进入和退出的动画。
进行一个网页的开发过程和上面类似：

新建 HTML 文件；
添加 HTML 元素；
通过 CSS 来调整元素样式；
通过 JavaScript 来配置页面的交互动作等。

简单来说就是：HTML 负责为网页添加内容，CSS 负责美化网页，JavaScript 负责让网页动起来。JavaScript 是最复杂的部分，对于高级的前端开发，这是必须要掌握的。不过对于学习爬虫的你，只需了解即可。

现在你应该搞清楚了 HTML、CSS、JavaScript 在网页开发里的作用和区别了~

上图生动形象地展示了 HTML、CSS、JavaScript 三者的作用：HTML 负责内容和骨架，CSS 负责美化和样式，JavaScript 负责让其动起来！

在爬虫课里，你不需要去掌握 HTML、CSS、JavaScript 这三种编程语言，只需要对 HTML 有一定的了解就行。对网页开发感兴趣的同学可自行深入了解~

HTML 元素
回归我们的 HTML 正题，HTML 是什么？

HTML（Hyper Text Markup Language）是一种超文本标记语言，它是由一堆标记（或者称为标签）组成的，语法特别简单。

接下来我先展示一个简单的 HTML 例子：

Hello，World 上面的代码展示了一个最简单的 HTML 代码，可以看到很多夹在尖括号 <> 中间的字母，它们叫做 标签。

一般来说标签都是成对出现的，所以标签又分为 开始标签（比如 ）。开始标签、结束标签加上标签中间的内容就构成了 元素。

结束标签与开始标签十分相似，只是结束标签在元素名之前包含了一个斜杠 /，表示着元素的结束。初学者常常会忘记结束标签，这可能会产生一些奇怪的结果。

我们重新看一下最开始的 HTML 代码，它是由 html、head、title、body 这四个元素组成的。一般情况下，这四个是每个 HTML 文档都会有的元素。

我们还能看到 HTML 标签是可以嵌套的，一般情况下，一份符合标准的 HTML 文档最外层都是 标签，所有的内容都包含在 元素里。因此 元素也叫根元素。

一般来说， 和 标签也是必须的，直接嵌套在 元素里。 元素里的内容是 网页头，网页头中一般存放网页相关信息、加载样式和脚本等。 元素里的内容是 网页体，也就是存放网页内容的地方。

下面这张图，展示了 HTML 代码的层级关系：

我们一定要注意层级关系，不能错乱，像下面这样 和 交叉在一起是有问题的：

Hello，World 接下来我们来详细说说 网页头 和 网页体。

首先是 网页头，前面说过网页头中一般存放网页相关信息、加载样式和脚本等，我们来看一个例子：

定义了网页的编码方式，是 utf-8。当爬虫获取的数据乱码时，我们可以根据它来更正编码； 指定了网页的标题，也就是浏览器标签栏中看到的标题；

剩下来的一个是加载样式文件的代码，一个是加载脚本文件的代码。对爬虫来说不必深入，了解一下即可。

或许你已经发现了， 和前面说的需要有开始标签和结束标签不太一样，只有一个标签。别急，这个我们后面会说。

接下来是 网页体，这个是爬虫要重点关注的，我们需要的数据都存放在里面。上面的示例代码中，为了简洁，直接在网页体内写了内容。但一般网页的网页体内会有很多其他的元素共同组成。后面我们会介绍一些比较常用的，不必着急。

现在，你已经可以了解了 HTML 的标签和元素，知道了由 网页头 和 网页体 组成的 HTML 基本结构。给你放个烟花庆祝一下！

HTML 常见元素
一篇结构清晰的文章都有标题和段落，HTML 网页也是如此。

HTML 提供了 6 个等级的标题，即

、

、

、

、

、

，重要性依次递减，也就是说

是最大的标题，

是最小的标题。

同时，在HTML 里段落使用的是

标签，超链接使用的是 标签，图片使用的是 标签。老师整理了一些常见的 HTML 元素，眼熟就好，之后的课程里都会这些元素打交道，慢慢就熟悉了。

你要重点关注的是，超链接使用的 标签和图片使用的 标签，这对我们后续的爬虫很有帮助。

前面说过，标签分为开始标签和结束标签。这是 HTML 的元素的一个重要特性——闭合性。根据闭合性分为自闭合标签和非自闭合标签。顾名思义，二者的区别就是闭合方式的不同。

前面讲过的 就属于自闭合标签。下图对比了非自闭合标签（h1）和自闭合标签（meta）的区别：

非自闭合元素必须有开始和结束标签，而自闭合元素没有结束标签，/> 意味着这个元素的结束。非自闭合元素有被开始标签和结束标签包裹住的内容，而自闭合标签则没有元素内容，只有元素属性。元素属性是重点，我们后面再细说。

对于自闭合元素和非自闭合元素，你只需要知道有这两种写法即可。当你在别的网页源代码里看到这两种写法时，不要觉得陌生哦。

下图列出了常见的自闭合元素和非自闭合元素，了解一下即可：

随着我们爬虫学习的深入，你会解析越来越多的网页，同时遇到越来越多的新元素，如果想知道某个标签的含义，比如 a 标签，去搜索引擎里搜索 html a 标签 自行学习即可，我们不在爬虫课里一一学习。

属性
HTML 元素可以通过设置属性来为元素提供更多信息。在爬虫中，我们经常通过这些属性去筛选、提取数据。

元素是我们常见的超链接，是 HTML 里非常重要的元素。它将一个个网页全都链接在一起，形成了互联网。如果没有 元素，你就无法从一个网页跳入另一个网页，这会让我们的网上冲浪变得非常糟糕！

元素的 href 属性中存储的是跳转网页的地址，被标签包裹的内容是网页中展示给我们看的实际内容。我们来看个例子：

可以看到，HTML 元素属性的语法是 属性名=“属性值”，且必须在开始标签中。HTML 元素可以拥有多个属性，用空格分隔开即可。

接下来我们把刚刚学会的 元素加到我们之前的 HTML 代码里。

Hello，World

扇贝编程 上面的 HTML 代码会被浏览器渲染成下面这样的网页：

可以看到，元素内容是链接文字展示的内容。点击后便能跳转到对应 href 属性的定义的网页。

自闭合元素没有元素内容，因此元素属性对它们来说就是全部。继续拿前面说过的 为例，通过 charset=“utf-8” 定义了网页编码为 utf-8。

元素也是自闭合元素，它是图片元素，网页上面呈现的各种图片就是使用了 元素。 元素有个 src 属性，里面储存图片的地址，这样浏览器就能将图片展示在网页上。

我们可以像下面这样在网页中展示一张图片：

现在，你了解了 元素的 href 属性和 元素的 src 属性。你肯定知道了之后写爬虫时从哪里获取网页链接和图片地址了吧！

除了 href 属性和 src 属性外，HTML 中还有两个很常用的属性——id 和 class。

id 和 class 都用于标识元素，是给 JavaScript 和 CSS 用的。因为爬虫中经常用到它们，因此这里简单的介绍一下。

id 是唯一标识，其值在整个网页里是唯一的。而 class 是一类标识，其值可以用在同一类所有的元素中。

你可以简单的理解为：id 是学号，class 是班级。学号是全学校唯一的，而班级里有很多的人。

再举个实际点的例子：比如网页上有一个唯一的登录按钮（ 元素），那么我们可以给它加上 id=“login-btn” 来标识。网页上还有很多电影名称，格式都一样，我们可以给它们加上 class=“movie-name” 来标识。

登录

肖申克的救赎

霸王别姬

阿甘正传

这个杀手不太冷

为什么要做标识呢？是为了给 JavaScript 找到对应的元素做出交互，为了给 CSS 找到对应的元素设置样式。而我们的爬虫正可以利用这一点找到我们需要的数据，比如我们想要找到所有的电影名称，只需要找到所有 class 为 movie-name 的元素，并提取出元素的内容即可。

除了这些之外，还有更多的 HTML 元素和属性，我们在这一关里就不再过多学习了，语法都比较简单，大家遇到不认识的元素或属性时，利用搜索引擎、翻阅文档就可以轻松解决！