人生苦短，我用 Python
前文傳送門：
小白學(xué) Python 爬蟲（2）：前置準(zhǔn)備（一）基本類庫的安裝
小白學(xué) Python 爬蟲（3）：前置準(zhǔn)備（二）Linux基礎(chǔ)入門
小白學(xué) Python 爬蟲（4）：前置準(zhǔn)備（三）Docker基礎(chǔ)入門
小白學(xué) Python 爬蟲（5）：前置準(zhǔn)備（四）數(shù)據(jù)庫基礎(chǔ)
小白學(xué) Python 爬蟲（6）：前置準(zhǔn)備（五）爬蟲框架的安裝
小白學(xué) Python 爬蟲（7）：HTTP 基礎(chǔ)
先贊后看是個(gè)好習(xí)慣
我們的數(shù)據(jù)來源是網(wǎng)頁，那么我們在真正抓取數(shù)據(jù)之前，有必要先了解一下一個(gè)網(wǎng)頁的組成。
網(wǎng)頁是由 HTML 、 CSS 、JavaScript 組成的。
HTML 是用來搭建整個(gè)網(wǎng)頁的骨架，而 CSS 是為了讓整個(gè)頁面更好看，包括我們看到的顏色，每個(gè)模塊的大小、位置等都是由 CSS 來控制的， JavaScript 是用來讓整個(gè)網(wǎng)頁“動(dòng)起來”，這個(gè)動(dòng)起來有兩層意思，一層是網(wǎng)頁的數(shù)據(jù)動(dòng)態(tài)交互，還有一層是真正的動(dòng)，比如我們都見過一些網(wǎng)頁上的動(dòng)畫，一般都是由 JavaScript 配合 CSS 來完成的。
我們打開 Chrome 瀏覽器，訪問博客站的首頁，打開 F12 開發(fā)者工具，可以看到：
在選項(xiàng) Elements 中可以看到網(wǎng)頁的源代碼，這里展示的就是 HTML 代碼。
不同類型的文字通過不同類型的標(biāo)簽來表示，如圖片用 <img> 標(biāo)簽表示，視頻用 <video> 標(biāo)簽表示，段落用 <p> 標(biāo)簽表示，它們之間的布局又常通過布局標(biāo)簽 <div> 嵌套組合而成，各種標(biāo)簽通過不同的排列和嵌套才形成了網(wǎng)頁的框架。
在右邊 Style 標(biāo)簽頁中，顯示的就是當(dāng)前選中的 HTML 代碼標(biāo)簽的 CSS 層疊樣式，“層疊”是指當(dāng)在HTML中引用了數(shù)個(gè)樣式文件，并且樣式發(fā)生沖突時(shí)，瀏覽器能依據(jù)層疊順序處理?！皹邮健敝妇W(wǎng)頁中文字大小、顏色、元素間距、排列等格式。
而 JavaScript 就厲害了，它在 HTML 代碼中通常使用 <script> 進(jìn)行包裹，可以直接書寫在 HTML 頁面中，也可以以文件的形式引入。
我們來手寫一個(gè)簡單 HTML 頁面來感受下。
首先創(chuàng)建一個(gè)文本文件，將后綴名改為 .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>
首先，整個(gè)文檔是以 DOCTYPE 來開頭的，這里定義了文檔類型是 html ，整個(gè)文檔最外層的標(biāo)簽是 <html> ，并且結(jié)尾還以 </html> 來表示閉和。
這里簡單講一下，瀏覽器解析 HTML 的時(shí)候，并不強(qiáng)制需要每個(gè)標(biāo)簽都一定要有閉和標(biāo)簽，但是為了語義明確，最好每個(gè)標(biāo)簽都跟上對應(yīng)的閉和標(biāo)簽。各位同學(xué)可以嘗試刪除其中的閉和標(biāo)簽進(jìn)行嘗試，并不會(huì)影響瀏覽器的解析。
整個(gè) HTML 文檔一般分為 head 和 body 兩個(gè)部分，在 head 頭中，我們一般會(huì)指定當(dāng)前的編碼格式為 UTF-8 ，并且使用 title 來定義網(wǎng)頁的標(biāo)題，這個(gè)會(huì)顯示在瀏覽器的標(biāo)簽上面。
body 中的內(nèi)容一般為整個(gè) html 文檔的正文，這里小編簡單寫了幾個(gè) div 的嵌套。
這個(gè)頁面的顯示如下：
在 HTML 中，所有標(biāo)簽定義的內(nèi)容都是節(jié)點(diǎn)，它們構(gòu)成了一個(gè) HTML DOM 樹。
根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)，HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)：
HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu)。這種結(jié)構(gòu)被稱為節(jié)點(diǎn)樹：
通過 HTML DOM，樹中的所有節(jié)點(diǎn)均可通過 JavaScript 進(jìn)行訪問。所有 HTML 元素（節(jié)點(diǎn)）均可被修改，也可以創(chuàng)建或刪除節(jié)點(diǎn)。
節(jié)點(diǎn)樹中的節(jié)點(diǎn)彼此擁有層級關(guān)系。
父（parent）、子（child）和同胞（sibling）等術(shù)語用于描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)。同級的子節(jié)點(diǎn)被稱為同胞（兄弟或姐妹）。
下面的圖片展示了節(jié)點(diǎn)樹的一部分，以及節(jié)點(diǎn)之間的關(guān)系：
前面我們介紹到 CSS 可以用來美化網(wǎng)頁，那么我們簡單加一點(diǎn) 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 標(biāo)簽，并注明其中的內(nèi)容解析方式為 CSS 。其中的內(nèi)容的含義是讓文本居中顯示，先看下增加 CSS 后的頁面效果吧：
可以看到，原來居左的文字已經(jīng)居中顯示了。
那么，CSS 是如何表示它要修飾的文檔結(jié)構(gòu)的呢？這就要說到 CSS 選擇器了。
在CSS中，我們使用CSS選擇器來定位節(jié)點(diǎn)。例如，上例中 div 節(jié)點(diǎn)的 id 為 container ，那么就可以表示為 #container ，其中 # 開頭代表選擇 id ，其后緊跟 id 的名稱。另外，如果我們想選擇 class 為 wrapper 的節(jié)點(diǎn)，便可以使用 .wrapper ，這里以點(diǎn) . 開頭代表選擇 class ，其后緊跟 class 的名稱。
另外， CSS 選擇器還支持嵌套選擇，各個(gè)選擇器之間加上空格分隔開便可以代表嵌套關(guān)系，如 #container .wrapper p 則代表先選擇 id 為 container 的節(jié)點(diǎn)，然后選中其內(nèi)部的 class 為 wrapper 的節(jié)點(diǎn)，然后再進(jìn)一步選中其內(nèi)部的 p 節(jié)點(diǎn)。另外，如果不加空格，則代表并列關(guān)系，如 div#container .wrapper p.text 代表先選擇 id 為 container 的 div 節(jié)點(diǎn)，然后選中其內(nèi)部的 class 為 wrapper 的節(jié)點(diǎn)，再進(jìn)一步選中其內(nèi)部的 class 為 text 的 p 節(jié)點(diǎn)。這就是 CSS 選擇器，其篩選功能還是非常強(qiáng)大的。
https://www.w3school.com.cn/htmldom/dom_nodes.asp
https://cuiqingcai.com/5476.html
