初识爬虫③ -网页基础

文章目录

  • 重识网页
  • 网页开发
  • HTML 元素
  • HTML 常见元素
  • 属性

重识网页

网页的本质是 HTML,当我们用浏览器打开某个网页的时候,浏览器用适合人类阅读的方式呈现出来了。

初识爬虫③ -网页基础_第1张图片
爬虫要解析的就是 HTML,熟悉 HTML 语法后你就可以在解析 HTML 上游刃有余。

前面我们讲过,向浏览器中输入某个网址后,浏览器会向服务器发出请求,然后服务器就会作出响应。其实,服务器返回给浏览器的这个结果就是 HTML 代码了。

而紧接着,浏览器会根据这个 HTML 代码,解析成我们所能看见的漂亮网页。

通过右键点击 显示网页源代码 可以看到:网页的本质就是一个 HTML 文档。

整个网页的源代码都完整地呈现在你面前。但是这个 HTML 文档经过压缩,导致结构不清晰,阅读起来非常吃力。

你可能会好奇,这个 HTML 压缩成这个样子,一行代码几百个字母,这是给人看的吗?

的确,它一般都不是给人看的,是给浏览器看的。

大部分程序员在写完代码后发布代码前会对代码进行压缩,去除一些些没用的换行符、空格等。虽然格式不好看,但浏览器能读懂就行。压缩后的优点就是文件体积小,这样在你从互联网上访问(下载)这个网页时,耗费的流量更少,加载时间更短!

现在你应该理解 HTML 和我们在网上冲浪时看到的网页二者在本质上是一样的。

网页开发

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

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

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

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

PPT的制作过程:

  1. 新建 PPT 文件
  2. 插入标题、文本框、图片等元素
  3. 调整字体大小、颜色等,进行排版
  4. 添加动画,比如为页面元素设置进入和退出的动画

进行一个网页的开发过程和上面类似:

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

初识爬虫③ -网页基础_第2张图片

简单来说就是:HTML 负责为网页添加内容,CSS 负责美化网页,JavaScript 负责让网页动起来。JavaScript 是最复杂的部分,对于高级的前端开发,这是必须要掌握的。

初识爬虫③ -网页基础_第3张图片

HTML 元素

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

<html>
  <head>
    <title>我的第一个网页title>
  head>
  <body>
    Hello,World
  body>
html>

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

一般来说标签都是成对出现的,所以标签又分为 开始标签(比如 )和 <code>结束标签</code>(比如 )。开始标签、结束标签加上标签中间的内容就构成了 元素

初识爬虫③ -网页基础_第4张图片

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

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

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

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

初识爬虫③ -网页基础_第5张图片
我们一定要注意层级关系,不能错乱,像下面这样 和 交叉在一起是有问题的:

<html>
  <head>
    <title>我的第一个网页title>
  <body>
  head>
    Hello,World
  body>
html>

接下来我们来详细说说 网页头网页体
前面说过网页头中一般存放网页相关信息、加载样式和脚本等,我们来看一个例子:

<head>
  <meta charset="utf-8" />
  <title>我的第一个网页title>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js">script>
head>

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

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

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

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

HTML 常见元素

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

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

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

是最大的标题,

是最小的标题。

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

标签,超链接使用的是 标签,图片使用的是 标签。

初识爬虫③ -网页基础_第6张图片
前面说过,标签分为开始标签和结束标签。这是 HTML 的元素的一个重要特性——闭合性。根据闭合性分为自闭合标签和非自闭合标签。顾名思义,二者的区别就是闭合方式的不同。

前面讲过的 就属于自闭合标签。下图对比了非自闭合标签(h1)和自闭合标签(meta)的区别:
初识爬虫③ -网页基础_第7张图片
非自闭合元素必须有开始和结束标签,而自闭合元素没有结束标签,/> 意味着这个元素的结束。非自闭合元素有被开始标签和结束标签包裹住的内容,而自闭合标签则没有元素内容,只有元素属性。

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

下图列出了常见的自闭合元素和非自闭合元素,了解一下即可:
初识爬虫③ -网页基础_第8张图片

属性

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

元素是我们常见的超链接,是 HTML 里非常重要的元素。它将一个个网页全都链接在一起,形成了互联网。 元素的 href 属性中存储的是跳转网页的地址,被标签包裹的内容是网页中展示给我们看的实际内容。

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

有时候会看见class=“one two”,不是说class这个属性的值为one two,而是说他有两个值one和two。

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

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

我们可以像下面这样在网页中展示一张图片:
初识爬虫③ -网页基础_第9张图片
HTML 中还有两个很常用的属性——id 和 class!

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

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

你可以简单的理解为:id 是学号,class 是班级。学号是全学校唯一的,而班级里有很多的人
初识爬虫③ -网页基础_第10张图片

再举个实际点的例子:比如网页上有一个唯一的登录按钮(

你可能感兴趣的