上一节我们简单讲了一下Scrapy 的安装和使用。在正式开始抓取之前呢,我们先要介绍一些html。磨刀不误砍柴工嘛
HTML 简介
HTML 也就是HyperText Markup Language。中文翻译过来就是超文本标记语言。它与CSS、JavaScript 三者共同构成了仿佛多彩的网页内容。 CSS 是网页的妆容,JavaScript是网页的神经系统,那么HTML就是骨架和血肉了。如果你访问一个网站的时候并没有获取到相应的CSS 和JavaScript 文件,那么你得到的最多就是一个“不好看”的网页。但是并不会影响到信息的获取。这也是互联网最初设计哲学的体现——实现信息的平等交流沟通。 只有信息才是最核心的交流内容。不过现在眼睛被养刁了的我们怕是难以忍受最初的互联网形态了吧。
闲话不多,我们先来看一看最简单的一段HTML 代码吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
HTML语言之所以突出“标记”二字就是因为基本所有的内容都是储存在一对<>
和</>
标记之间的。例如其中的<html></html>
标签就意味着这之间的内容都是html内容。相应的各种不同的标签都有着不同的语意,例如<a></a>
标签的超链接,<ul></ul>
标签的列表等等。通过这些标签赋予的不同语意,浏览器会作出不同的解析。
善于观察的你也一定注意到了,这些标签互相之间时存在嵌套的。例如上面的那一段,<head></head>
标签就嵌套在了<html></html>
标签之内了。这就涉及到我们最重要的一点知识——「html 的树形结构」。
所谓树形结构就是一层接着一层这样,就像一棵树有着树根,枝干,树叶这样的结构。如图所示
想要找到某一个具体的节点就要顺着脉络一层层的向下寻找才行。这就是所谓的DOM(Document Object Model)模型。要让人去在网页中找到某一个信心有时候很容易,因为类似的信息位置都是差不多的,但是要让爬虫来找就需要给出明确的信息才可以哦。
审查元素
对于人来说直接从源代码去查找某个信息的具体位置并不现实,因为没有渲染过的HTML代码实在是不符合人类正常的视觉模式。好在浏览器可以帮到我们大忙。
对于某个特定的元素而言,你只要在它上方点击右键选择审查元素,就可以获得我们下一步工作中需要的信息了。如图所示
这样一个节点的信息就一级一级的展示在我们的眼前了。这里我们不光看到了一级一级的标签,还有部分标签属性,下一节我们讲解XPath selector 的时候都会用到哦。