分析网页

我们平时使用浏览器来访问网页,实质上来看,就是通过一个客户端经过网络连接访问了服务器端,访问前,我们的页面没有任何内容,那么这些内容必然都是从服务器端传输过来的。爬虫的工作就是利用编程的方式自动化地从服务器端获取并分析数据,得到我们需要爬取的内容。

因此想要利用爬虫获取内容,首先需要我们分析目标网站页面,了解其数据排列方式,知晓其数据传输过程,从而能够制订正确有效的爬取途径。

以CSDN中我本人之前的一篇文章为例
https://blog.csdn.net/qq_26292987/article/details/107608315

如果我们希望获取这个页面上的文章内容而不希望自己动手去复制粘贴,爬虫是一个非常有效的工具,而分析这个页面有几个方向:

(一)分析页面源代码:
在页面上单击右键,可以看到选项“查看页面源代码”(这里我使用的是Microsoft Edge浏览器,不同浏览器可能有所不同),弹出的新网页内容如图:
Python 爬虫学习笔记(二)
如何能够在繁杂的代码信息中快速找到我们需要的内容呢?
【1】查找大法好
“Ctrl+F”,搜索要查找的关键词,看是否能得到结果,这里目的是查找文章内容,直接搜索“BeautifulSoap用法”即可得到如下界面
Python 爬虫学习笔记(二)
那么为什么选择搜索“BeautifulSoap用法”而不是题目或者其他呢?简单查看源代码即可发现,题目在源代码中多次出现,不能很好的确定文章位置,第一段同理(第一段主要是本人编辑的问题)
【2】进阶方法
对于这个方法,首先需要对网页源代码的组织方式有一定的了解,也就是需要对HTML相关知识有亿点点了解:https://www.runoob.com/html/html-tutorial.html
经过简单的学习(After ten thousands years)
我们知道了:
HTML是一种标记语言,有严谨的标签设置来确定其中每一部分的功能,而更关键的是:

HTML 标签是由尖括号包围的关键词,比如 <html>
HTML 标签通常是成对出现的,比如 <b></b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

声明为 HTML5 文档

<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据,如 <meta` charset=“utf-8”> 定义网页编码格式为 utf-8。

<title> 元素描述了文档的标题
<body>> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
<a> 元素定义一个链接
<img> 元素定义一个图像
<div><span> 元素定义一个区块
<script>定义一个脚本(运行的函数)

有了上面这些知识,那我们需要的东西一定是在body里去找的,具体在哪里找呢?(实话说还是“Ctrl+F”更方便,这些知识更多的是为了下一步从页面中获取内容所需要的)这里我个人推荐sublime作为暂时的阅览器,配置好该软件的“HTML/CSS/JS Prettify”模块之后,只需要轻轻一点,那些没有缩进和对齐的代码就变成了下面这样:
Python 爬虫学习笔记(二)
随后就可以比较方便的通过折叠查找等方式获得我们需要的内容了

(二)分析页面元素
在页面上按“F12”,神奇的事情出现了,页面的右侧(有的浏览器是下方)发生了有趣的变化:
Python 爬虫学习笔记(二)
其上方菜单栏有“元素、控制台、源代码、网络、性能、内存”等几个选项,现在我们只需要注意“元素、网络”两个部分就够了!
元素区系统的展示了页面上全部的元素和内容及其排布方式,修改其中的内容,页面上的内容也会发生相应的改变(别担心,服务器端存储的内容没有改变),将鼠标移到相应的位置,可以看到左侧相应的内容出现了被选中的效果,现在再去寻找元素所在的位置就轻松多了吧。

(三)分析网络传输
如果你对前面的内容还有印象,那你应该还记得,页面上的所有内容都是服务器端传输到我们的浏览器上的,也就是说,页面上的每一个元素都是服务器端传输的结果,在网络中可以看到这个过程:
Python 爬虫学习笔记(二)
看到这么一堆乱七八糟的东西,我的内心是崩溃的(这都啥玩意儿啊)
没事儿,无所不能的网络告诉我们,遇到事情不要慌,先拿出手机拍一张

相关文章: