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

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

觀念分享
Python投資新手必讀

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

既然要談到資料蒐集,爬蟲勢必就是得好好學習的一環,

一旦討論到爬蟲,就不得不談到網頁架構囉,

有些人會問說:「那爬蟲與網頁架構有啥關聯呢?」

而答案其實就是因為「爬蟲說穿了就是將網站上的資料擷取下來。」

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

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

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

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

二、網頁架構長怎樣呢?

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

把它想成超市就很好理解了,網頁的後端如同超市的營運管理系統,比如說如何決定牛奶多少錢,以及後面物流該多久進一次貨、怎麼計算一天營業額等,都是屬於管理系統的管轄範圍。回過頭來,網站後端就是資料庫、程式該怎麼運作等「用戶從介面看不到的功能設計」。

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

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

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

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

  1. HTML:制定原則:
    1. 以超市為例:得有防火設備、出入口、燈光、人員、商品等最基本的設備
    2. 以網頁為例:例如看到 ‘image’ 就表示這是張圖片等原則型的標準內容
  2. CSS:美化環境:
    1. 以超市為例:改變燈光色彩、地板材質、員工服裝、桌椅配色等等
    2. 以網頁為例:網頁顏色、文字顏色、旋轉、模糊等等美感進階設計
  3. Javascript
    1. 以超市為例:ibon可以取票、結帳可以掃載具、刷悠遊卡等等
    2. 以網頁為例:按按鈕可以顯示文章、在網頁上輸入日期可以查詢車班等等

而爬蟲,就是基本上針對這三大項內容進行資料蒐集囉!

以上就是大概在爬蟲開始前,必須要知道的網頁內容

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

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

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

◎量化通FB專頁:https://www.facebook.com/QuantPass
◎量化通網站:https://quantpass.org/
◎學習更多點這裡 → https://lihi1.cc/NVULo

發表迴響

作家資訊

量化通專家
RoWay

更多文章

?
我要提問