簡易數據分析 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小時內與您取得聯系。

整合營銷服務商