小白學 Python 爬蟲（8）：網(wǎng)頁基礎

東東Wr 2019-12-15

展開全文

人生苦短，我用 Python

前文傳送門：

小白學 Python 爬蟲（1）：開篇

小白學 Python 爬蟲（2）：前置準備（一）基本類庫的安裝

小白學 Python 爬蟲（3）：前置準備（二）Linux基礎入門

小白學 Python 爬蟲（4）：前置準備（三）Docker基礎入門

小白學 Python 爬蟲（5）：前置準備（四）數(shù)據(jù)庫基礎

小白學 Python 爬蟲（6）：前置準備（五）爬蟲框架的安裝

小白學 Python 爬蟲（7）：HTTP 基礎

先贊后看是個好習慣

網(wǎng)頁的組成

我們的數(shù)據(jù)來源是網(wǎng)頁，那么我們在真正抓取數(shù)據(jù)之前，有必要先了解一下一個網(wǎng)頁的組成。

網(wǎng)頁是由 HTML 、 CSS 、JavaScript 組成的。

HTML 是用來搭建整個網(wǎng)頁的骨架，而 CSS 是為了讓整個頁面更好看，包括我們看到的顏色，每個模塊的大小、位置等都是由 CSS 來控制的， JavaScript 是用來讓整個網(wǎng)頁“動起來”，這個動起來有兩層意思，一層是網(wǎng)頁的數(shù)據(jù)動態(tài)交互，還有一層是真正的動，比如我們都見過一些網(wǎng)頁上的動畫，一般都是由 JavaScript 配合 CSS 來完成的。

我們打開 Chrome 瀏覽器，訪問博客站的首頁，打開 F12 開發(fā)者工具，可以看到：

在選項 Elements 中可以看到網(wǎng)頁的源代碼，這里展示的就是 HTML 代碼。

不同類型的文字通過不同類型的標簽來表示，如圖片用 <img> 標簽表示，視頻用 <video> 標簽表示，段落用 <p> 標簽表示，它們之間的布局又常通過布局標簽 <div> 嵌套組合而成，各種標簽通過不同的排列和嵌套才形成了網(wǎng)頁的框架。

在右邊 Style 標簽頁中，顯示的就是當前選中的 HTML 代碼標簽的 CSS 層疊樣式，“層疊”是指當在HTML中引用了數(shù)個樣式文件，并且樣式發(fā)生沖突時，瀏覽器能依據(jù)層疊順序處理?！皹邮健敝妇W(wǎng)頁中文字大小、顏色、元素間距、排列等格式。

而 JavaScript 就厲害了，它在 HTML 代碼中通常使用 <script> 進行包裹，可以直接書寫在 HTML 頁面中，也可以以文件的形式引入。

網(wǎng)頁結構

我們來手寫一個簡單 HTML 頁面來感受下。

首先創(chuàng)建一個文本文件，將后綴名改為 .html ，名字可以自取，寫入如下內(nèi)容：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Demo</title>
 </head>
 <body>
 <div id="container">
 <div class="wrapper">
 <h1>Hello World</h1>
 <div>Hello Python.</div>
 </div>
 </div>
 </body>
</html>

首先，整個文檔是以 DOCTYPE 來開頭的，這里定義了文檔類型是 html ，整個文檔最外層的標簽是 <html> ，并且結尾還以 </html> 來表示閉和。

這里簡單講一下，瀏覽器解析 HTML 的時候，并不強制需要每個標簽都一定要有閉和標簽，但是為了語義明確，最好每個標簽都跟上對應的閉和標簽。各位同學可以嘗試刪除其中的閉和標簽進行嘗試，并不會影響瀏覽器的解析。

整個 HTML 文檔一般分為 head 和 body 兩個部分，在 head 頭中，我們一般會指定當前的編碼格式為 UTF-8 ，并且使用 title 來定義網(wǎng)頁的標題，這個會顯示在瀏覽器的標簽上面。

body 中的內(nèi)容一般為整個 html 文檔的正文，這里小編簡單寫了幾個 div 的嵌套。

這個頁面的顯示如下：

HTML DOM

在 HTML 中，所有標簽定義的內(nèi)容都是節(jié)點，它們構成了一個 HTML DOM 樹。

根據(jù) W3C 的 HTML DOM 標準，HTML 文檔中的所有內(nèi)容都是節(jié)點：

整個文檔是一個文檔節(jié)點
每個 HTML 元素是元素節(jié)點
HTML 元素內(nèi)的文本是文本節(jié)點
每個 HTML 屬性是屬性節(jié)點
注釋是注釋節(jié)點

HTML DOM 將 HTML 文檔視作樹結構。這種結構被稱為節(jié)點樹：

通過 HTML DOM，樹中的所有節(jié)點均可通過 JavaScript 進行訪問。所有 HTML 元素（節(jié)點）均可被修改，也可以創(chuàng)建或刪除節(jié)點。

節(jié)點樹中的節(jié)點彼此擁有層級關系。

父（parent）、子（child）和同胞（sibling）等術語用于描述這些關系。父節(jié)點擁有子節(jié)點。同級的子節(jié)點被稱為同胞（兄弟或姐妹）。

在節(jié)點樹中，頂端節(jié)點被稱為根（root）
每個節(jié)點都有父節(jié)點、除了根（它沒有父節(jié)點）
一個節(jié)點可擁有任意數(shù)量的子
同胞是擁有相同父節(jié)點的節(jié)點

下面的圖片展示了節(jié)點樹的一部分，以及節(jié)點之間的關系：

CSS

前面我們介紹到 CSS 可以用來美化網(wǎng)頁，那么我們簡單加一點 CSS 修改下頁面的顯示效果。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Demo</title>
 <style type="text/css">
 .wrapper {
 text-align: center;
 }
 </style>
 </head>
 <body>
 <div id="container">
 <div class="wrapper">
 <h1>Hello World</h1>
 <div>Hello Python.</div>
 </div>
 </div>
 </body>
</html>

我們在 head 中添加了 style 標簽，并注明其中的內(nèi)容解析方式為 CSS 。其中的內(nèi)容的含義是讓文本居中顯示，先看下增加 CSS 后的頁面效果吧：

可以看到，原來居左的文字已經(jīng)居中顯示了。

那么，CSS 是如何表示它要修飾的文檔結構的呢？這就要說到 CSS 選擇器了。

在CSS中，我們使用CSS選擇器來定位節(jié)點。例如，上例中 div 節(jié)點的 id 為 container ，那么就可以表示為 #container ，其中 # 開頭代表選擇 id ，其后緊跟 id 的名稱。另外，如果我們想選擇 class 為 wrapper 的節(jié)點，便可以使用 .wrapper ，這里以點 . 開頭代表選擇 class ，其后緊跟 class 的名稱。

另外， CSS 選擇器還支持嵌套選擇，各個選擇器之間加上空格分隔開便可以代表嵌套關系，如 #container .wrapper p 則代表先選擇 id 為 container 的節(jié)點，然后選中其內(nèi)部的 class 為 wrapper 的節(jié)點，然后再進一步選中其內(nèi)部的 p 節(jié)點。另外，如果不加空格，則代表并列關系，如 div#container .wrapper p.text 代表先選擇 id 為 container 的 div 節(jié)點，然后選中其內(nèi)部的 class 為 wrapper 的節(jié)點，再進一步選中其內(nèi)部的 class 為 text 的 p 節(jié)點。這就是 CSS 選擇器，其篩選功能還是非常強大的。