小白學 Python 爬蟲（8）：網頁基礎
人生苦短，我用 Python
前文傳送門：
小白學 Python 爬蟲（1）：開篇
小白學 Python 爬蟲（2）：前置準備（一）基本類庫的安裝
小白學 Python 爬蟲（3）：前置準備（二）Linux基礎入門
小白學 Python 爬蟲（4）：前置準備（三）Docker基礎入門
小白學 Python 爬蟲（5）：前置準備（四）資料庫基礎
小白學 Python 爬蟲（6）：前置準備（五）爬蟲框架的安裝
小白學 Python 爬蟲（7）：HTTP 基礎
先贊後看是個好習慣
網頁的組成
我們的資料來源是網頁，那麼我們在真正抓取資料之前，有必要先了解一下一個網頁的組成。
網頁是由 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 選擇器，其篩選功能還是非常強大的。
參考
https://www.w3school.com.cn/htmldom/dom_nodes.asp
https://cuiqingcai.com/5476.html