首頁 > 爬蟲第一步:認識網頁的基本架構...

爬蟲第一步:認識網頁的基本架構

Python 爬蟲系列閱讀:

一、為何要認識網頁架構?

既然要談到資料蒐集,爬蟲勢必就是得好好學習的一環,
一旦討論到爬蟲,就不得不談到網頁架構囉!

有些人會問說:「那爬蟲與網頁架構有啥關聯呢?」
而答案其實就是因為「爬蟲說穿了就是將網站上的資料擷取下來。」

這樣聽起來可能有點繞口,把爬蟲想成當我們想要網站上的一篇文章內容、一些表格資料,甚至是某張圖片,這時我們會怎麼做來將我們想要的內容存下來呢?

是不是肯定就是複製貼上到WORD?或是對圖片按右鍵去另存圖片呢?

是的,爬蟲就是一個讓程式做跟人們一模一樣的事情,只是說人們判斷想要的資訊很簡單(畢竟是聰明的人腦嘛~)

但程式並沒有那麼聰明,所以這時候只能夠讓人們先告訴程式我想要那些資料、那些資料該長怎樣,存下來時的排版或是分類方式該是如何等等等,讓程式可以照我們的需求乖乖把事情做好呦!

二、網頁架構長怎樣呢?

如下圖,網頁一般分為前端(使用者接觸的到的)與後端(使用者接觸不到的)。

把它想成超市就很好理解了,網頁的後端如同超市的營運管理系統,比如說如何決定牛奶多少錢,以及後面物流該多久進一次貨、怎麼計算一天營業額等,都是屬於管理系統的管轄範圍。

回過頭來,網站後端就是資料庫、程式該怎麼運作等「用戶從介面看不到的功能設計」。

而前端就像是超市中的牛奶該放在哪一櫃、櫃台該在設置在哪邊、動線怎麼規劃、乃至於讓客戶覺得超市美輪美奐想坐下來休息等等與「客戶可以第一線接觸到的使用者設計」。

所以當我們使用爬蟲來做資料擷取時,就像是我們上網去找資料想把它存下來一樣,所以基本上其實就是在跟網頁的前端互動囉!

三、那網頁的前端有哪些要知道的呢?

首先我們要先認識前端基本組成,以剛的超市為例:

1. HTML:制定原則

(1) 以超市為例:必需要有防火設備、出入口、燈光、人員、商品等最基本的設備
(2) 以網頁為例:看到 「image」 就表示這是張圖片等原則型的標準內容

2. CSS:美化環境:

(1) 以超市為例:改變燈光色彩、地板材質、員工服裝、桌椅配色等等
(2) 以網頁為例:網頁顏色、文字顏色、旋轉、模糊等等美感進階設計。

3. Javascript

(1) 以超市為例:ibon可以取票、結帳可以掃載具、刷悠遊卡等等
(2) 以網頁為例:按按鈕可以顯示文章、在網頁上輸入日期可以查詢車班等等。

爬蟲,就是基本上針對這三大項內容進行資料蒐集囉!以上就是大概在爬蟲開始前,必須要知道的網頁內容

小小總結

  • HTML建立起網頁的主結構。
  • CSS負責美化網頁。
  • JavaScript負責描述網頁如何與使用者互動。

量化通是個致力於全民量化金融教育的社群,我們希望透過由淺入深的內容,帶領大家以正確觀念來實踐自動化的金融投資研究分析。內容涵蓋傳統研究分析方法、量化分析、選股、爬蟲、API 串接、回測、以及下單等跨領域多元知識,由各領域專家為大家提供最精闢的內容。

如果覺得我們的文章還不錯,別忘了點擊下方連結,按讚並追蹤量化通的粉專,我們將努力為您提供每篇精選文章。

量化通粉絲社群,定期分享實用資源
✅加入LINE匿名群組量化通QuantPass」無壓力討論與分享!
✅追蹤量化通的粉絲專頁量化通QuantPass」即時獲取實用的資源!

程式交易課程推薦
📣 Python 程式交易系列線上課程,手把手開始用程式交易打造自己的被動收入!

發表迴響

相關文章