【網絡爬蟲學習】網頁的基本構成

爬蟲程序之所以可以抓取數據，是因為爬蟲能夠對網頁進行分析，並在網頁中提取出想要的數據。在學習 Python 爬蟲模塊前，我們有必要先熟悉網頁的基本結構，這是編寫爬蟲程序的必備知識。

網頁的基本結構

關於 Web 初步教程：Here

• 網頁在組成上一般由三部分組成，分別是

  HTML（超文本標記語言）負責定義網頁的內容、

  CSS（層疊樣式表）負責描述網頁的布局、

  JavaScript（簡稱“JS”動態腳本語言）負責網頁的行為，它們三者在網頁中分別承擔着不同的任務。

• 網頁從類型分為靜態與動態，

  靜態網頁是標准的 HTML 文件，通過 GET 請求方法可以直接獲取，文件的擴展名是.html、.htm等（靜態並非靜止不動，它也包含一些動畫效果，這一點不要誤解）

  動態網頁指的是采用了動態網頁技術的頁面，比如 AJAX（是指一種創建交互式、快速動態網頁應用的網頁開發技術）和JSP(是 Java 語言創建動態網頁的技術標准) 等技術，它不需要重新加載整個頁面內容，就可以實現網頁的局部更新。

針對靜/動態的一個重要區別在於，有無需要連接后台數據庫，

由於靜態網頁的內容相對固定，且不需要連接后台數據庫，因此響應速度非常快。但靜態網頁更新比較麻煩，每次更新都需要重新加載整個網頁。

動態頁面使用“動態頁面技術”與服務器進行少量的數據交換，從而實現了網頁的異步加載。下面看一個具體的實例：

打開百度圖片（https://image.baidu.com/）並搜索 Python，當滾動鼠標滑輪時，網頁會從服務器數據庫自動加載數據並渲染頁面，這是動態網頁和靜態網頁最基本的區別。如下所示：

動態網頁中除了有 HTML 標記語言外，還包含了一些特定功能的代碼。這些代碼使得瀏覽器和服務器可以交互，服務器端會根據客戶端的不同請求來生成網頁，其中涉及到數據庫的連接、訪問、查詢等一系列 IO 操作，所以其響應速度略差於靜態網頁。

注意：一般網站通常會使用動靜相結合的方式，使其達到一種平衡的狀態。

當然動態網頁也可以是純文字的，頁面中也可以包含各種動畫效果，這些都只是網頁內容的表現形式，其實無論網頁是否具有動態效果，只要采用了動態網站技術，那這個網頁就稱為動態網頁。

---

\[QAQ \]

---

抓取動態網頁的過程較為復雜，需要通過動態抓包來獲取客戶端與服務器交互的 JSON 數據。抓包時，可以使用 Chrome 的開發者模式（快捷鍵：F12）Network選項，然后點擊 XHR，找到獲取 JSON 數據的 URL，如下所示：

或者您也可以使用專業的抓包工具 Fiddler 。關於動態網頁的數據抓取，在后續內容會做詳細講解。

審查網頁元素

前面說了這么多關於網頁的構成，其實是要引出本部分內容。

瀏覽器都自帶檢查元素的功能，不同的瀏覽器對該功能的叫法不同， Chrome 稱為“檢查”，而 Firefox 則稱“查看元素”，盡管如此，但它們的功卻是相同的。（接下來以 Chrome 進行操作）

在動手編寫爬蟲程序前，必須要對網頁元素進行審查、並且能從中提煉出有效的信息。

這就要求我們能善於發現網頁元素的規律。

檢查百度首頁

點擊審查元素按鈕，然后將鼠標移動至您想檢查的位置，比如百度的輸入框，然后單擊，此時就會將該位置的代碼段顯示出來（如圖 1 所示）。最后在該代碼段處點擊右鍵，在出現的會話框中選擇 Copy 選項卡，並在二級會話框內選擇“Copy element”，如下所示：

百度輸入框的代碼如下所示：

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

依照上述方法，您可以檢查頁面內的所有元素。

編輯網頁代碼

通過檢查元素也可以更改網頁代碼，下面仍通過 百度 頁面進行簡單演示

檢查密碼框的 HTML 代碼，代碼如下所示：

<input id="TANGRAM__PSP_11__password" type="password" name="password" class="pass-text-input pass-text-input-password" autocomplete="off" value="" placeholder="密碼">

只要在顯示出的代碼段上稍微做一下更改，密碼就會變為可見狀態。如下圖所示：

雙擊 type="password" 將輸入框類型更改為 text，此類操作適用於所有網站的登錄界面。但是需要注意，您做的更改僅限本次有效，當關閉網頁后，會自動恢復為原來的狀態。

檢查網頁結構

對於爬蟲而言，檢查網頁結構是最為關鍵的一步，需要對網頁進行分析，並找出信息元素的相似性。下面以貓眼電影網為例，檢查每部影片的 HTML 元素結構。如下所示

第一部影片的代碼段如下所示：

    <div class="board-item-main">
      <div class="board-item-content">
              <div class="movie-item-info">
        <p class="name"><a href="/films/1299372" title="你好，李煥英" data-act="boarditem-click" data-val="{movieId:1299372}">你好，李煥英</a></p>
        <p class="star">
                主演：賈玲,張小斐,沈騰
        </p>
<p class="releasetime">上映時間：2021-02-12</p>    </div>
    <div class="movie-item-number score-num">
<p class="score"><i class="integer">9.</i><i class="fraction">5</i></p>       
    </div>

      </div>
    </div>

接下來檢查第二部影片的代碼，如下所示：

    <div class="board-item-main">
      <div class="board-item-content">
              <div class="movie-item-info">
        <p class="name"><a href="/films/553231" title="心靈奇旅" data-act="boarditem-click" data-val="{movieId:553231}">心靈奇旅</a></p>
        <p class="star">
                主演：傑米·福克斯,蒂娜·菲,菲利西亞·拉斯海德
        </p>
<p class="releasetime">上映時間：2020-12-25</p>    </div>
    <div class="movie-item-number score-num">
<p class="score"><i class="integer">9.</i><i class="fraction">3</i></p>       
    </div>

      </div>
    </div>

經過對比發現，除了每部影片的信息不同之外，它們的 HTML 結構是相同的，比如每部影片都使用<dd></dd>標簽包裹起來。這里我們只檢查了兩部影片，在實際編寫時，你可以多檢查幾部，從而確定它們的 HTML 結構是相同的。

PS：通過檢查網頁結構，然后發現規律，這是編寫爬蟲程序最為重要的一步。