简易数据分析 10 - Web Scraper 翻页—抓取「滚动加载」类型网页

是简易数据分析系列的第 10 篇文章。

原文首发于博客园：简易数据分析 10。

友情提示：这一篇文章的内容较多，信息量比较大，希望大家学习的时候多看几遍。

我们在刷朋友圈刷微博的时候，总会强调一个『刷』字，因为看动态的时候，当把内容拉到屏幕末尾的时候，APP 就会自动加载下一页的数据，从体验上来看，数据会源源不断的加载出来，永远没有尽头。

我们今天就是要讲讲，如何利用 Web Scraper 抓取滚动到底翻页的网页。

今天我们的练手网站是知乎数据分析模块的精华帖，网址为：

https://www.zhihu.com/topic/19559424/top-answers

这次要抓取的内容是精华帖的标题、答题人和赞同数。下面是今天的教程。

1.制作 Sitemap

刚开始我们要先创建一个 container，包含要抓取的三类数据，为了实现滚动到底加载数据的功能，我们把 container 的 Type 选为 Element scroll down，就是滚动到网页底部加载数据的意思。

在这个案例里，选择的元素名字为 div.List-item。

为了复习上一节通过数据编号控制条数的方法，我们在元素名后加个 nth-of-type(-n+100)，暂时只抓取前 100 条数据。

然后我们保存 container 这个节点，并在这个节点下选择要抓取的三个数据类型。

首先是标题，我们取名为 title，选择的元素名为 [itemprop='zhihu:question'] a：

然后是答题人名字 name 与赞同数 like，选择的元素名分别为 #Popover10-toggle a 和 button.VoteButton--up：

2.爬取数据，发现问题

元素都选择好了，我们按 Sitemap zhihu_top_answers -> Scrape -> Start craping 的路径进行数据抓取，等待十几秒结果出来后，内容却让我们傻了眼：

数据呢？我要抓的数据呢？怎么全变成了 null？

在计算机领域里，null 一般表示空值，表示啥都没有，放在 Web Scraper 里，就表示没有抓取到数据。

我们可以回想一下，网页上的的确确存在数据，我们在整个的操作过程中，唯一的变数就是选择元素这个操作上。所以，肯定是我们选择元素时出错了，导致内容匹配上出了问题，无法正常抓取数据。要解决这个问题，我们就要查看一下网页的构成。

3.分析问题

查看一下网页的构成，就要用浏览器的另一个功能了，那就是选择查看元素。

1.我们点击控制面板左上角的箭头，这时候箭头颜色会变蓝。

2.然后我们把鼠标移动到标题上，标题会被一个蓝色的半透明遮罩盖住。

3.我们再点击一下标题，会发现我们会跳转到 Elements 这个子面板，内容是一些花花绿绿看不大懂的代码

做到这里心里别发怵，这些 HTML 代码不涉及什么逻辑，在网页里就是个骨架，提供一些排版的作用。如果你平常用 markdown 写作，就可以把 HTML 理解为功能更复杂的 markdown。

结合 HTML 代码，我们先看看 [itemprop='zhihu:question'] a 这个匹配规则是怎么回事。

首先这是个树形的结构：

先是一个名字为 h2 的标签 <h2>...</h2>，它有个 class='ContentItem-title' 的属性；
里面又有个名为 div 的标签 <div>...</div>，它有个 itemprop='zhihu:question' 的属性；
div 标签里又有一个名字为 a 的标签 <a>...</a>；
a 标签里有一行字，就是我们要抓取的标题：如何快速成为数据分析师？
上句话从可视化的角度分析，其实就是一个嵌套的结构，我把关键内容抽离出来，内容结构是不是清晰了很多？

<h2 class='ContentItem-title'/>
 <div itemprop='zhihu:question'/>
 <a>如何快速成为数据分析师？</a>
 </div>
</h2>

我们再分析一个抓取标题为 null 的标题 HTML 代码。

我们可以很清楚的观察到，在这个标题的代码里，少了名为 div 属性为 itemprop='zhihu:question' 的标签！这样导致我们的匹配规则匹配时找不到对应标签，Web Scraper 就会放弃匹配，认为找不到对应内容，所以就变成 null 了。

找到原因后我们就好解决问题了。

4.解决问题

我们发现，选择标题时，无论标题的嵌套关系怎么变，总有一个标签不变，那就是包裹在最外层的，属性名为 class='ContentItem-title' 的 h2 标签。我们如果能直接选择 h2 标签，不就可以完美匹配标题内容了吗？

逻辑上理清了关系，我们如何用 Web Scraper 操作？这时我们就可以用上一篇文章介绍的内容，利用键盘 P 键选择元素的父节点：

放在今天的课程里，我们点击两次 P 键，就可以匹配到标题的父标签 h2 （或 h2.ContentItem-title）：

以此类推，因为答题人名字也出现了 null，我们分析了 HTML 结构后选择名字的父标签 span.AuthorInfo-name，具体的分析操作和上面差不多，大家可以尝试一下。

我的三个子内容的选择器如下，可以作为一个参考：

最后我们点击 Scrape 爬取数据，检查一下结果，没有出现 null，完美！

5.吐槽时间

爬取知乎数据时，我们会发现滚动加载数据那一块儿很快就做完了，在元素匹配那里却花了很多时间。

这间接的说明，知乎这个网站从代码角度上分析，写的还是比较烂的。

如果你爬取的网站多了，就会发现大部分的网页结构都是比较「随心所欲」的。所以在正式抓取数据前，经常要先做小规模的尝试，比如说先抓取 20 条，看看数据有没有问题。没问题后再加大规模正式抓取，这样做一定程度上可以减少返工时间。

6.下期预告

这期内容比较多，大家可以多看几遍消化一下，下期我们说些简单的内容，讲讲如何抓取表格内容。

7.推荐阅读

简易数据分析 09 | Web Scraper 自动控制抓取数量 & Web Scraper 父子选择器

简易数据分析 08 | Web Scraper 翻页——点击「更多按钮」翻页

HTML5和CSS3的世界里，2D和3D变换为网页设计带来了革命性的变化。通过简单的CSS属性，我们可以实现元素的平移、旋转、缩放和倾斜等效果，从而创造出更加动态和交互性的用户体验。在本文中，我们将探索2D和3D变换的基本概念，并通过一些实例来演示它们的应用。

2D变换

2D变换是指在平面内对元素进行操作，包括平移（translate）、旋转（rotate）、缩放（scale）和倾斜（skew）。以下是一些基本的2D变换例子：

平移（Translate）

.translate-example {
  transform: translate(50px, 100px);
}

这个例子中，元素将沿X轴移动50像素，沿Y轴移动100像素。

旋转（Rotate）

.rotate-example {
  transform: rotate(45deg);
}

在这个例子中，元素将围绕其中心点旋转45度。

缩放（Scale）

.scale-example {
  transform: scale(2, 3);
}

此处，元素的宽度放大到原来的2倍，高度放大到原来的3倍。

倾斜（Skew）

.skew-example {
  transform: skew(30deg, 20deg);
}

这个例子将使元素沿X轴倾斜30度，沿Y轴倾斜20度。

3D变换

3D变换引入了新的维度，即Z轴，为元素添加了深度感。3D变换包括3D平移（translate3d）、3D旋转（rotateX/rotateY/rotateZ）、3D缩放（scale3d）等。

3D平移（Translate3D）

.translate3d-example {
  transform: translate3d(50px, 100px, 200px);
}

在这个例子中，元素沿X轴移动50像素，沿Y轴移动100像素，同时沿Z轴移动200像素，产生一种深入屏幕的效果。

3D旋转（Rotate3D）

.rotate3d-example {
  transform: rotateX(45deg);
}

这里，元素将围绕X轴旋转45度，创建出一个“翻页”的效果。

3D缩放（Scale3D）

.scale3d-example {
  transform: scale3d(2, 2, 2);
}

此例中，元素在三个维度上均放大两倍。

实战例子

让我们通过几个具体的例子来看看2D和3D变换在实际应用中的效果。

例子1：创建一个简单的卡片翻转效果（2D）

<div class="card">
  <div class="card-front">前面</div>
  <div class="card-back">背面</div>
</div>

.card {
  width: 200px;
  height: 300px;
  position: relative;
}

.card-front, .card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  transition: transform 0.6s;
}

.card-front {
  background-color: #fff;
  z-index: 2;
}

.card-back {
  background-color: #f1f1f1;
  transform: rotateY(180deg);
}

.card:hover .card-front {
  transform: rotateY(-180deg);
}

.card:hover .card-back {
  transform: rotateY(0deg);
}

当鼠标悬停在卡片上时，前面的卡片会翻转到背面。

例子2：3D旋转立方体

<div class="cube">
  <div class="face front">前</div>
  <div class="face back">后</div>
  <div class="face left">左</div>
  <div class="face right">右</div>
  <div class="face top">上</div>
  <div class="face bottom">下</div>
</div>

.cube {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
  animation: spin 5s infinite linear;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #ccc;
}

.front  { transform: translateZ(100px); }
.back   { transform: translateZ(-100px) rotateY(180deg); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

这个立方体会在页面上无限旋转，展示了一个基本的3D效果。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D & 3D Transform Example</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
  }

  .btn-2d {
    padding: 10px 20px;
    margin: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    transition: transform 0.3s ease;
  }

  .btn-2d:hover {
    transform: rotateZ(360deg);
  }

  .card-3d {
    width: 200px;
    height: 300px;
    perspective: 1000px;
    cursor: pointer;
    margin: 20px;
  }

  .card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
  }

  .card-3d:hover .card-inner {
    transform: rotateY(180deg);
  }

  .card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  .card-front {
    background: #007bff;
  }

  .card-back {
    background: #ff5722;
    transform: rotateY(180deg);
  }

  .scene {
    width: 200px;
    height: 200px;
    perspective: 600px;
    margin: 20px;
  }

  .cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-45deg);
    animation: rotateCube 5s infinite linear;
  }

  .face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
  }

  .front  { transform: translateZ(100px); }
  .back   { transform: rotateY(180deg) translateZ(100px); }
  .right  { transform: rotateY(90deg) translateZ(100px); }
  .left   { transform: rotateY(-90deg) translateZ(100px); }
  .top    { transform: rotateX(90deg) translateZ(100px); }
  .bottom { transform: rotateX(-90deg) translateZ(100px); }

  @keyframes rotateCube {
    0% { transform: rotateX(-30deg) rotateY(-45deg); }
    100% { transform: rotateX(-30deg) rotateY(315deg); }
  }

</style>
</head>
<body>

<button class="btn-2d">Click Me!</button>

<div class="card-3d">
  <div class="card-inner">
    <div class="card-face card-front">
      Front Side
    </div>
    <div class="card-face card-back">
      Back Side
    </div>
  </div>
</div>

<div class="scene">
  <div class="cube">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
  </div>
</div>

</body>
</html>

.btn-2d 类定义了一个按钮，当鼠标悬停时，它会应用一个 2D 旋转 (rotateZ) 动画。
.card-3d 类定义了一个 3D 翻转卡片的容器，设置了 perspective 属性，这是实现 3D 翻转效果的关键。
.card-inner 类定义了卡片的内部元素，它将在鼠标悬停时围绕 Y 轴旋转 (rotateY) 180 度，这是通过 .card-3d:hover .card-inner 选择器设置的。
.card-face 类定义了卡片的正反两面，使用了 backface-visibility 属性来在翻转时隐藏背面。
.card-front 和 .card-back 类为卡片的前后面分别设置了不同的背景颜色。
.scene 类定义了一个 3D 场景的容器，设置了 perspective 属性，以便为其中的 3D 对象创建透视效果。
.cube 类定义了正方体的容器，它使用 transform-style: preserve-3d 来保持其子元素的 3D 空间位置。这个容器还应用了一个连续旋转的动画，使正方体不断旋转。
.face 类定义了正方体的每个面，每个面都是一个绝对定位的正方形，具有边框和背景颜色。
.front、.back、.right、.left、.top 和 .bottom 类分别定义了正方体的六个面的位置，每个面都通过 translateZ 被推到其应在的位置。

结语

通过本文的介绍，我们了解了2D和3D变换的基本概念以及它们在实际应用中的一些例子。随着技术的进步，现代浏览器对这些效果的支持越来越好，而我们作为开发者，可以利用这些工具创造出更加丰富和生动的网页体验。记得在使用这些技术时保持平衡，确保它们增强而不是干扰用户的体验。

4年的时候小编还是个苦逼青年（说的好像现在不苦逼一样）闲来无事，想做一本属于自己的电子书，最开始的时候，我想的是利用html进行网页文档的制作，结果发现自己毫无网页基础，实在是举步维艰,毕竟小编是个24k纯理工男，学的还是化学专业。

不过不要紧，在我的孜孜不倦和勇于探索的精神下，终于找到一款简单易学，零网页基础，零电脑基础，零排版基础，零智商基础的翻页电子书制作软件：iebook （让大家贱笑了）

在那个苦逼的买不起电脑的年代，小编天天泡在网吧，旁边是各种小学生风骚犀利的lol操作让我自愧不如，经过一个星期的钻研（只怪中途网吧断电，文档无情的没有备份，那感觉让人绝望）终于做出了人生自己的第一本电子书——《后青春期的诗》效果大概是这样的：

iebook的功能是能实现翻页，背景音乐，点击跳转，自动滚动等，如果你想做散文诗歌或者故事类的文章，不失为一个不错的选择。

最终效果一般是以exe格式存在，也可以在线发表，看起来是不是很高大上？

说到技术含量嘛，前面也说过，不难，只要具备基本的审美观和核心内容，加上模板的插入，音乐的插入，制作出一本exe文档的电子书简直易如反掌，就像走在路上随随便便就能捡张毛爷爷一样，就是这么easy。对电子书感兴趣的朋友可以关注小编公众号fish1923 回复“软件”获取iebook，或者回复“电子书”查看本人制作的电子书，欢迎探讨学习。

不过正所谓“师傅领进门，修行靠个人”任何软件的应用本质上是很简单的，例如ps，例如cad，但是要想做到极致却需要付出很大的努力。就iebook这个软件来说，我随便讲几个关键点，也许会对你的制作方面有些帮助，让你少走一些弯路。

插入帧。
就以标准组件来说，一般会有卷首页，封面，版页，封底。我们主要是插入版页如图所示：

点击添加页面就会右方菜单栏出现多个帧，每一帧就是我们说的“每一页”，所谓帧，通俗点说就是一个单位，可以理解为ps里的每一个图层，每一帧都是静止的图象。你只需要在每一个帧上编辑即可。

然后插入文字，模板，都是可以手动拖拽的，复制、放大、缩小、旋转等等操作，都灰常方便。

2.关于模板的下载

在添加完帧之后，接下来就是模板的下载了

如图所示，不管是组合模板，还是页面背景，图文，文字模板，装饰，特效。点击下方的模板下载，都是会跳转到iebook官方网站下载的，比较精美的当然是需要付费下载的（这个世界没有免费的午餐）。

3.关于属性栏的设置。

这就不多说了吧，零智商操作，音乐可以从电脑端导入，我就不废话了。

4.生成的电子杂志去哪里了？

正在编译(生成)EXE电子杂志；
电子杂志编译(生成)完毕；单击打开文件夹按钮，打开电子杂志所在路径，您可以将生成好的电子杂志发给好友分享；己经编译完毕的电子杂志，预览整体效果。

这样，一篇精美的翻页电子书就生成了，是不是一下子就由一个屌丝青年变身成为文艺小青年了，总的来说，这款软件还是十分简单好用的。

其实，谁又天生优秀呢？优秀来源于对简单事情的重复操作和追求极致的精神。欢迎关注小编公众号fish1923 探讨学习！

在线咨询

上一篇：HTML DOM 元素对象
下一篇：超优秀 HTML5 甘特图类库GanttChart

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商