HTML 與網頁

網頁 HTML 、JavaScript 、 CSS 三種不同的程式碼所組成,他們各自負責不同的角色。以網頁爬蟲而言,我們主要關注的對象是 HTML,包含主要的資料內容。

畫面與 HTML 物件

在意的問題是:如何從網頁畫面上找到你需要的資料對應的 HTML 物件在哪裡?我們可以利用 Chrome (或其他瀏覽器)的開發者工具進行探索,其主要流程如下:

  1. 在 Google Chrome 瀏覽器上右鍵,點選檢查叫出開發者工具

  1. 切換到 Elements 區塊,顯示出目前的 HTML 程式碼
  2. 點選開發者工具左上角的「點選指標」圖示,變為藍色表示點選模式

  1. 此時滑鼠可以在網頁上任意移動,Elements 區塊會即時切換到選取範圍的 HTML 物件

  1. 滑鼠點擊後進入已選取模式,Elements 會將被選取的 HTML 物件 固定住

HTML 物件的定位

HTML(超文本標記語言,HyperText Markup Language)用於結構化網頁內容。DOM指的是HTML的分層結構。每個尖括號中的標籤稱為一個元素(元素),網頁瀏覽器通過解析DOM 來理解頁面的內容。一個基本的 HTML 程式碼的結構如下:

對於爬蟲程式而言,我們不需要非常熟悉 HTML 語法也沒關係,但是我們至少要知道幾個屬性:

  • id 是 HTML 元素的唯一識別碼,一個網頁中是不可重複的。主要是定位與辨識使用。
  • name 主要是用於獲取提交表單的某表單域信息,同一表單內不可重複。
  • class 是設置標籤的類,用於指定元素屬於何種樣式的類,允許同一樣式元素使用重複的類名稱。

那們就可以從被固定的 HTML 物件中,定義想要的物件長怎樣?該怎麼定位?我們通常會這樣描述:

一個 class = _、 id = ___ 標籤,需要他的 _ 屬性 或 _ 內容。

Python 爬蟲程式實作

接著我們可以利用 Python 的 Request 取回資料,並且使用 BeautifulSoup 將原始的 HTML 字串轉換成 HTML 樹狀結構,再進一步取出需要的部分,整理成適合的結構。整體流程如下:

  1. 利用 Python Request 取回資料,轉換成 HTML 樹狀結構
1
2
r = request.get('網頁網址')
soup = BeatifulSoup(r.text)
  1. 先看一下是什麼標籤(例如:<p><div><img> …),再加上 class 或是 id 進行限縮,轉換成 Python BeautifulSoup 的語法:
1
d = soup.find('標籤名稱', id='id 是什麼', class_='class 是什麼', attrs={'其他條件一': 'XXX', ... })
  1. 從取得的物件中拉出需要的資料
1
2
d.text() # HTML 物件的文字內容部分
d['屬性名稱'] # HTML 物件的屬性資料,例如 class 名稱、圖片的 src 屬性 ...

License


本著作由Chang, Wei-Yaun (v123582)製作,
創用CC 姓名標示-相同方式分享 3.0 Unported授權條款釋出。