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