想做技术自媒体实现财富自由？先看看广告报价吧，无编码学爬虫之二。_馃埐馃埐馃埐馃埐馃埐馃埐馃埐馃埐馃埐馃埐馃埐馃埐-优快云博客

本文引导读者通过案例学习无编码爬虫工具WebScraper，解析分页数据抓取。从创建新爬虫、设置选择器到处理分页和子选择器，详细讲解每个步骤，帮助读者掌握网页抓取技巧。最终成功抓取指定网站的多页数据，并解决数据交错问题，实现有效整理和存储。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天是持续写作的第 17 / 100 天。
如果你有想要交流的想法、技术，欢迎在评论区留言。

从本文开始，将通过一个个的案例带你进入无编码学爬虫领域，玩转 Web Scraper，万物皆可爬。
此类教程涉及图片比较多，学习的时候大量的依赖实操，所以在后续本系列内容将转换为视频载体提供给大家。

缓解一下视疲劳

在这里插入图片描述

缓解一下视疲劳

目标网站分析

本次要爬取的网站为：https://www.chuanboyi.com/zimeiti/search-catid-1-page-1.html，选择本案例的原因是要解决一般分页数据如何抓取的问题。

什么是一般分页，例如本案例中数据的分页方式就是通过底部的数字进行分页。
想做自媒体实现财富自由，先看看广告报价吧，无编码学爬虫之二。
通过点击分页跳转链接发现分页规则为，页面的规则每个网站都不同，多点击几次一般都可以找到对应的规律：

https://www.chuanboyi.com/zimeiti/search-catid-1-page-1.html
https://www.chuanboyi.com/zimeiti/search-catid-1-page-2.html
https://www.chuanboyi.com/zimeiti/search-catid-1-page-3.html
https://www.chuanboyi.com/zimeiti/search-catid-1-page-4.html

首先创建一个新的爬虫。sitemap 与 start url 书写好即可。常规套路先测试任意一页的数据，实现之后再扩展到所有目标数据。
想做技术自媒体实现财富自由？先看看广告报价吧，无编码学爬虫之二。
进入 selector 页面，新增加一个选择器，注意点选的时候至少点选 2 个元素，如果发现元素选择没有达到预期，例如下图所示内容，继续勾选直到选择的数据是你期望的数据即可（希望动图能给你增强理解）。

想做技术自媒体实现财富自由？先看看广告报价吧，无编码学爬虫之二。
最终实现的效果是三个红圈中的数据全部存在并且正确， Save Selector。

想做技术自媒体实现财富自由？先看看广告报价吧，无编码学爬虫之二。
相同的手法在创建一个 price 选择器。

编写完毕如果需要修改注意是点击右侧的 Edit ，不要直接点击选择器，直接点击选择器会进入到子选择器添加界面。编写的过程中还需要不断的点击 Data preview 去确定数据是否正确。

想做技术自媒体实现财富自由？先看看广告报价吧，无编码学爬虫之二。
点击 Element preview 会在页面中通过红色背景标记出选择的数据。

单页数据已经拿到了，接下来修改一下 metadata。

Edit metadata 是什么意思？非常简单，就是可以修改 sitemap 信息，包含标题和起始地址。

想做技术自媒体实现财富自由？先看看广告报价吧，无编码学爬虫之二。
修改待抓取地址为多个，可以设置一个范围的 URL，范围 URL 设置格式为：

http://example.com/page/[1-3]

如果设置为上述内容，那在爬取的时候回批量生成 3 个地址。

http://example.com/page/1
http://example.com/page/2
http://example.com/page/3

也可以让数字编码按照 [001-100] 这样的规律生成或者按照 [0-100:10]，该内容表示生成 0-100 的数字，但是间隔 10 个数字，也就是生成的是 0,10,20，...，100。

以上设置需要预先知道总页码是多少，知道总页码之后就可以直接获取到目标数据了。

运行代码之后，在你的任务栏会出现一个蜘蛛网图标，注意不要关闭了。
想做技术自媒体实现财富自由？先看看广告报价吧，无编码学爬虫之二。
运行过程中还会出现一个小浏览器，左上角的页码在不断的变动，表示数据在反复抓取。浏览器运行完毕会自动关掉，不要手动关闭（关闭爬虫程序就停止运行了）。
想做技术自媒体实现财富自由？先看看广告报价吧，无编码学爬虫之二。

爬虫运行完毕，会出现如下问题，实际数据发现如果设置多个选择器，会导致链接爬取两边，数据并没有放在一起，呈现的效果如下图。还需要进行调整。
想做技术自媒体实现财富自由？先看看广告报价吧，无编码学爬虫之二。
以下调整过程希望可以仔细练习，新知识要来喽！

修改爬虫，增加子选择器

上文在选择内容的时候出现了一点点小问题，数据抓取的不是我们期望的格式，咱希望抓到 title 和 price 在一行，此时就需要父选择器与子选择器搭配使用了。

啥叫父选择器？网页中的各个元素都可以看成一个盒子，盒子里面有各种东西，可以有小盒子，小盒子里面才放着目标数据。

这种一层一层的嵌套就出现了父级与子级的概念，大盒子就是父级，小盒子就是子级，如果小盒子里面再有一个小盒子呢？子子孙孙无穷尽也。

emmm 不是，其实很多时候，按照父级->子级->子级的子级，这样是就能解决很多问题了。

细心的你可能已经注意到每次选择元素之后，都需要点击一下一个按钮，就是下图的 Done selecting，完成选择按钮，在这个按钮的左边有三个东东，分别是 S，P，C，含义都在下面，使用的时候按键盘操作即可，一般微操的时候会用。

S：Select，按下键盘的 S 键，选择选中的元素
P：Parent，按下键盘的 P 键，选择选中元素的父节点
C：Child，按下键盘的 C 键，选择选中元素的子节点

想做技术自媒体实现财富自由？先看看广告报价吧，无编码学爬虫之二。

点击 select 之后，框选最外层的大元素，也就是选择一个目标区域最大的盒子，如下图所示。

想做技术自媒体实现财富自由？先看看广告报价吧，无编码学爬虫之二。
以下 4 个位置相关的内容都核对好。重点注意位置 2，此时我们选择的是 Element 是由于上述动图选择的内容是后续的父级元素，所以此处为 Element内容。
目前对于这个 Type 下拉列表已经使用了 2 个选项了，一个是 Text，表示选择文本，一个是 Element 表示选中标签，别急后面还有好几种。
想做技术自媒体实现财富自由？先看看广告报价吧，无编码学爬虫之二。
接下来的操作需要注意，要在父级标签里面添加子元素选择器，具体使用参考下图。

下图中尤其注意父级选择器，title 和 price 的父级选择器都是刚才创建好的 parent_div。如果刚才父级选择器中的 Type 设置的是 Text，这里是没有办法选择 parent_div 的。
想做技术自媒体实现财富自由？先看看广告报价吧，无编码学爬虫之二。
设置为上述内容之后发现选择的数据格式还是不正确，最终呈现的依旧是交错数据，问题出现在多选位置。