人生苦短，我用 Python
前文傳送門：
小白學 Python 爬蟲（2）：前置准備（一）基本類庫的安裝
小白學 Python 爬蟲（3）：前置准備（二）Linux基礎入門
小白學 Python 爬蟲（4）：前置准備（三）Docker基礎入門
小白學 Python 爬蟲（6）：前置准備（五）爬蟲框架的安裝
先贊后看是個好習慣
網頁的組成
我們的數據來源是網頁，那么我們在真正抓取數據之前，有必要先了解一下一個網頁的組成。
網頁是由 HTML 、 CSS 、JavaScript 組成的。
HTML 是用來搭建整個網頁的骨架，而 CSS 是為了讓整個頁面更好看，包括我們看到的顏色，每個模塊的大小、位置等都是由 CSS 來控制的， JavaScript 是用來讓整個網頁“動起來”，這個動起來有兩層意思，一層是網頁的數據動態交互，還有一層是真正的動，比如我們都見過一些網頁上的動畫，一般都是由 JavaScript 配合 CSS 來完成的。
我們打開 Chrome 瀏覽器，訪問博客站的首頁，打開 F12 開發者工具，可以看到：
在選項 Elements 中可以看到網頁的源代碼，這里展示的就是 HTML 代碼。
不同類型的文字通過不同類型的標簽來表示，如圖片用 <img> 標簽表示，視頻用 <video> 標簽表示，段落用 <p> 標簽表示，它們之間的布局又常通過布局標簽 <div> 嵌套組合而成，各種標簽通過不同的排列和嵌套才形成了網頁的框架。
在右邊 Style 標簽頁中，顯示的就是當前選中的 HTML 代碼標簽的 CSS 層疊樣式，“層疊”是指當在HTML中引用了數個樣式文件，並且樣式發生沖突時，瀏覽器能依據層疊順序處理。“樣式”指網頁中文字大小、顏色、元素間距、排列等格式。
而 JavaScript 就厲害了，它在 HTML 代碼中通常使用 <script> 進行包裹，可以直接書寫在 HTML 頁面中，也可以以文件的形式引入。
網頁結構
我們來手寫一個簡單 HTML 頁面來感受下。
首先創建一個文本文件，將后綴名改為 .html ，名字可以自取，寫入如下內容：
<!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 來定義網頁的標題，這個會顯示在瀏覽器的標簽上面。
body 中的內容一般為整個 html 文檔的正文，這里小編簡單寫了幾個 div 的嵌套。
這個頁面的顯示如下：
HTML DOM
在 HTML 中，所有標簽定義的內容都是節點，它們構成了一個 HTML DOM 樹。
根據 W3C 的 HTML DOM 標准，HTML 文檔中的所有內容都是節點：
- 整個文檔是一個文檔節點
- 每個 HTML 元素是元素節點
- HTML 元素內的文本是文本節點
- 每個 HTML 屬性是屬性節點
- 注釋是注釋節點
HTML DOM 將 HTML 文檔視作樹結構。這種結構被稱為節點樹：
通過 HTML DOM，樹中的所有節點均可通過 JavaScript 進行訪問。所有 HTML 元素（節點）均可被修改，也可以創建或刪除節點。
節點樹中的節點彼此擁有層級關系。
父（parent）、子（child）和同胞（sibling）等術語用於描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。
- 在節點樹中，頂端節點被稱為根（root）
- 每個節點都有父節點、除了根（它沒有父節點）
- 一個節點可擁有任意數量的子
- 同胞是擁有相同父節點的節點
下面的圖片展示了節點樹的一部分，以及節點之間的關系：
CSS
前面我們介紹到 CSS 可以用來美化網頁，那么我們簡單加一點 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 標簽，並注明其中的內容解析方式為 CSS 。其中的內容的含義是讓文本居中顯示，先看下增加 CSS 后的頁面效果吧：
可以看到，原來居左的文字已經居中顯示了。
那么，CSS 是如何表示它要修飾的文檔結構的呢？這就要說到 CSS 選擇器了。
在CSS中，我們使用CSS選擇器來定位節點。例如，上例中 div 節點的 id 為 container ，那么就可以表示為 #container ，其中 # 開頭代表選擇 id ，其后緊跟 id 的名稱。另外，如果我們想選擇 class 為 wrapper 的節點，便可以使用 .wrapper ，這里以點 . 開頭代表選擇 class ，其后緊跟 class 的名稱。
另外， CSS 選擇器還支持嵌套選擇，各個選擇器之間加上空格分隔開便可以代表嵌套關系，如 #container .wrapper p 則代表先選擇 id 為 container 的節點，然后選中其內部的 class 為 wrapper 的節點，然后再進一步選中其內部的 p 節點。另外，如果不加空格，則代表並列關系，如 div#container .wrapper p.text 代表先選擇 id 為 container 的 div 節點，然后選中其內部的 class 為 wrapper 的節點，再進一步選中其內部的 class 為 text 的 p 節點。這就是 CSS 選擇器，其篩選功能還是非常強大的。