用瀏覽器訪問網站時，頁面各不相同，你有沒有想過它為何會呈現這個樣子呢？本節中，我們就來了解一下網頁的基本組成、結構和節點等內容。
1. 網頁的組成
網頁可以分為三大部分——HTML、CSS和JavaScript。如果把網頁比作一個人的話，HTML相當於骨架，JavaScript相當於肌肉，CSS相當於皮膚，三者結合起來才能形成一個完善的網頁。下面我們分別來介紹一下這三部分的功能。
(1) HTML
HTML是用來描述網頁的一種語言，其全稱叫作Hyper Text Markup Language，即超文字標記語言。網頁包括文字、按鈕、圖片和視訊等各種複雜的元素，其基礎架構就是HTML。不同型別的文字通過不同型別的標籤來表示，如圖片用img標籤表示，視訊用video標籤表示，段落用p標籤表示，它們之間的佈局又常通過佈局標籤div巢狀組合而成，各種標籤通過不同的排列和巢狀才形成了網頁的框架。
在Chrome瀏覽器中開啟百度，右擊並選擇“檢查”項（或按F12鍵），開啟開發者模式，這時在Elements選項卡中即可看到網頁的原始碼，如圖2-9所示。
圖2-9 原始碼
這就是HTML，整個網頁就是由各種標籤巢狀組合而成的。這些標籤定義的節點元素相互巢狀和組合形成了複雜的層次關係，就形成了網頁的架構。
(2) CSS
HTML定義了網頁的結構，但是隻有HTML頁面的佈局並不美觀，可能只是簡單的節點元素的排列，為了讓網頁看起來更好看一些，這裡藉助了CSS。
CSS，全稱叫作Cascading Style Sheets，即層疊樣式表。“層疊”是指當在HTML中引用了數個樣式檔案，並且樣式發生衝突時，瀏覽器能依據層疊順序處理。“樣式”指網頁中文字大小、顏色、元素間距、排列等格式。
CSS是目前唯一的網頁頁面排版樣式標準，有了它的幫助，頁面才會變得更為美觀。
圖2-9的右側即為CSS，例如：
1 2 3 4 5 6 | #head_wrapper.s-ps-islite .s-p-top { position: absolute; bottom: 40px; width: 100%; height: 181px; } |
就是一個CSS樣式。大括號前面是一個CSS選擇器，此選擇器的意思是首先選中id為head_wrapper且class為s-ps-islite的節點，然後再選中其內部的class為s-p-top的節點。大括號內部寫的就是一條條樣式規則，例如position指定了這個元素的佈局方式為絕對佈局，bottom指定元素的下邊距為40畫素，width指定了寬度為100%佔滿父元素，height則指定了元素的高度。也就是說，我們將位置、寬度、高度等樣式配置統一寫成這樣的形式，然後用大括號括起來，接著在開頭再加上CSS選擇器，這就代表這個樣式對CSS選擇器選中的元素生效，元素就會根據此樣式來展示了。
在網頁中，一般會統一定義整個網頁的樣式規則，並寫入CSS檔案中（其字尾為css）。在HTML中，只需要用link標籤即可引入寫好的CSS檔案，這樣整個頁面就會變得美觀、優雅。
(3) JavaScript
JavaScript，簡稱JS，是一種指令碼語言。HTML和CSS配合使用，提供給使用者的只是一種靜態資訊，缺乏互動性。我們在網頁裡可能會看到一些互動和動畫效果，如下載進度條、提示框、輪播圖等，這通常就是JavaScript的功勞。它的出現使得使用者與資訊之間不只是一種瀏覽與顯示的關係，而是實現了一種實時、動態、互動的頁面功能。
JavaScript通常也是以單獨的檔案形式載入的，字尾為js，在HTML中通過script標籤即可引入，例如：
1 | <script src="jquery-2.1.0.js"></script> |
綜上所述，HTML定義了網頁的內容和結構，CSS描述了網頁的佈局，JavaScript定義了網頁的行為。
2. 網頁的結構
我們首先用例子來感受一下HTML的基本結構。新建一個文字檔案，名稱可以自取，字尾為html，內容如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>This is a Demo</title> </head> <body> <div id="container"> <div class="wrapper"> <h2 class="title">Hello World</h2> <p class="text">Hello, this is a paragraph.</p> </div> </div> </body> </html> |
這就是一個最簡單的HTML例項。開頭用DOCTYPE定義了文件型別，其次最外層是html標籤，最後還有對應的結束標籤來表示閉合，其內部是head標籤和body標籤，分別代表網頁頭和網頁體，它們也需要結束標籤。head標籤內定義了一些頁面的配置和引用，如：
1 | <meta charset="UTF-8"> |
它指定了網頁的編碼為UTF-8。
title標籤則定義了網頁的標題，會顯示在網頁的選項卡中，不會顯示在正文中。body標籤內則是在網頁正文中顯示的內容。div標籤定義了網頁中的區塊，它的id是container，這是一個非常常用的屬性，且id的內容在網頁中是唯一的，我們可以通過它來獲取這個區塊。然後在此區塊內又有一個div標籤，它的class為wrapper，這也是一個非常常用的屬性，經常與CSS配合使用來設定樣式。然後此區塊內部又有一個h2標籤，這代表一個二級標題。另外，還有一個p標籤，這代表一個段落。在這兩者中直接寫入相應的內容即可在網頁中呈現出來，它們也有各自的class屬性。
將程式碼儲存後，在瀏覽器中開啟該檔案，可以看到如圖2-10所示的內容。
圖2-10 執行結果
可以看到，在選項卡上顯示了This is a Demo字樣，這是我們在head中的title裡定義的文字。而網頁正文是body標籤內部定義的各個元素生成的，可以看到這裡顯示了二級標題和段落。
這個例項便是網頁的一般結構。一個網頁的標準形式是html標籤內巢狀head和body標籤，head內定義網頁的配置和引用，body內定義網頁的正文。
3. 節點樹及節點間的關係
在HTML中，所有標籤定義的內容都是節點，它們構成了一個HTML DOM樹。
我們先看下什麼是DOM，DOM是W3C（全球資訊網聯盟）的標準，其英文全稱Document Object Model，即文件物件模型。它定義了訪問HTML和XML文件的標準：
W3C文件物件模型（DOM）是中立於平臺和語言的介面，它允許程式和指令碼動態地訪問和更新文件的內容、結構和樣式。
W3C DOM標準被分為3個不同的部分。
- 核心DOM： 針對任何結構化文件的標準模型。
- XML DOM：針對XML文件的標準模型。
- HTML DOM：針對HTML文件的標準模型。
根據W3C的HTML DOM標準，HTML文件中的所有內容都是節點。
- 整個文件是一個文件節點；
- 每個HTML元素是元素節點；
- HTML元素內的文字是文字節點；
- 每個HTML屬性是屬性節點；
- 註釋是註釋節點。
HTML DOM將HTML文件視作樹結構，這種結構被稱為節點樹，如圖2-11所示。
圖2-11 節點樹
通過HTML DOM，樹中的所有節點均可通過JavaScript訪問，所有HTML節點元素均可被修改，也可以被建立或刪除。
節點樹中的節點彼此擁有層級關係。我們常用父（parent）、子（child）和兄弟（sibling）等術語描述這些關係。父節點擁有子節點，同級的子節點被稱為兄弟節點。
在節點樹中，頂端節點稱為根（root）。除了根節點之外，每個節點都有父節點，同時可擁有任意數量的子節點或兄弟節點。圖2-12展示了節點樹以及節點之間的關係。
圖2-12 節點樹及節點間的關係
本段參考W3SCHOOL，連結：www.w3school.com.cn/htmldom/dom…。
4. 選擇器
我們知道網頁由一個個節點組成，CSS選擇器會根據不同的節點設定不同的樣式規則，那麼怎樣來定位節點呢？
在CSS中，我們使用CSS選擇器來定位節點。例如，上例中div節點的id為container，那麼就可以表示為#container，其中#開頭代表選擇id，其後緊跟id的名稱。另外，如果我們想選擇class為wrapper的節點，便可以使用.wrapper，這裡以點（.）開頭代表選擇class，其後緊跟class的名稱。另外，還有一種選擇方式，那就是根據標籤名篩選，例如想選擇二級標題，直接用h2即可。這是最常用的3種表示，分別是根據id、class、標籤名篩選，請牢記它們的寫法。
另外，CSS選擇器還支援巢狀選擇，各個選擇器之間加上空格分隔開便可以代表巢狀關係，如#container .wrapper p則代表先選擇id為container的節點，然後選中其內部的class為wrapper的節點，然後再進一步選中其內部的p節點。另外，如果不加空格，則代表並列關係，如div#container .wrapper p.text代表先選擇id為container的div節點，然後選中其內部的class為wrapper的節點，再進一步選中其內部的class為text的p節點。這就是CSS選擇器，其篩選功能還是非常強大的。
另外，CSS選擇器還有一些其他語法規則，具體如表2-4所示。
表2-4 CSS選擇器的其他語法規則
選擇器 | 例子 | 例子描述 |
|---|---|---|
|
| 選擇 |
|
| 選擇 |
|
| 選擇所有節點 |
|
| 選擇所有 |
|
| 選擇所有 |
|
| 選擇 |
|
| 選擇父節點為 |
|
| 選擇緊接在 |
|
| 選擇帶有 |
|
| 選擇 |
|
| 選擇 |
|
| 選擇所有未被訪問的連結 |
|
| 選擇所有已被訪問的連結 |
|
| 選擇活動連結 |
|
| 選擇滑鼠指標位於其上的連結 |
|
| 選擇獲得焦點的 |
|
| 選擇每個 |
|
| 選擇每個 |
|
| 選擇屬於父節點的第一個子節點的所有 |
|
| 在每個 |
|
| 在每個 |
|
| 選擇帶有以 |
|
| 選擇前面有 |
|
| 選擇其 |
|
| 選擇其 |
|
| 選擇其 |
|
| 選擇屬於其父節點的首個 |
|
| 選擇屬於其父節點的最後 |
|
| 選擇屬於其父節點唯一的 |
|
| 選擇屬於其父節點的唯一子節點的所有 |
|
| 選擇屬於其父節點的第二個子節點的所有 |
|
| 同上，從最後一個子節點開始計數 |
|
| 選擇屬於其父節點第二個 |
|
| 同上，但是從最後一個子節點開始計數 |
|
| 選擇屬於其父節點最後一個子節點的所有 |
|
| 選擇文件的根節點 |
|
| 選擇沒有子節點的所有 |
|
| 選擇當前活動的 |
|
| 選擇每個啟用的 |
|
| 選擇每個禁用的 |
|
| 選擇每個被選中的 |
|
| 選擇非 |
|
| 選擇被使用者選取的節點部分 |
另外，還有一種比較常用的選擇器是XPath，這種選擇方式後面會詳細介紹。
本節介紹了網頁的基本結構和節點間的關係，瞭解了這些內容，我們才有更加清晰的思路去解析和提取網頁內容。
本資源首發於崔慶才的個人部落格靜覓： Python3網路爬蟲開發實戰教程 | 靜覓
如想了解更多爬蟲資訊，請關注我的個人微信公眾號：進擊的Coder
weixin.qq.com/r/5zsjOyvEZ… (二維碼自動識別)