iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 5
2

我們在瀏覽器上實際看到的畫面,其實是瀏覽器在收到 HTML 後渲染出來的結果,之後寫爬蟲時也是幾乎都會根據 HTML 來找到我們要爬取的目標,所以必須對 HTML 的結構有一定的了解。

如果想知道平常瀏覽的網頁的原始 HTML,可以在瀏覽器中依序點選「滑鼠右鍵 > 檢視網頁原始碼」,就可以看到了。

https://ithelp.ithome.com.tw/upload/images/20190919/20107875QyS2PM1DA9.png

HTML 是由元素(element)所組成,其中包含了標籤(tag)和內容(content)。

  • 標籤
    • 必須包含起始標籤和結束標籤,例如 <p></p>
    • 沒有內容的標籤可以 self-closing,例如 <img/><br/>
    • 在起始標籤中可以包含多個屬性
  • 屬性
    • 用來提供元素額外的資訊
    • 必須在起始標籤中定義
    • 格式為 attr-name="attr-value",多組定義以空格分割,例如:
      • <a href="https://ithelp.ithome.com.tw/" alt="iT 邦幫忙">iT 邦幫忙</a>
  • 內容
    • 可以是一段文字或其他元素~~,或啥都沒有~~,所以一個完整的 HTML 會是一個樹狀結構的樣子

以上面的超連結標籤來舉例:

<a href="https://ithelp.ithome.com.tw/" alt="iT 邦幫忙">iT 邦幫忙</a>
  • 標籤:a
  • 屬性:hrefalt
  • 內容:iT 邦幫忙

而一個完整的 HTML 結構大致上會長這樣:

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
</body>

</html>
  • <!DOCTYPE html>:宣告文件使用的 HTML 版本,一定要在文件的最上方且只能出現一次。以現在的 HTML5 版本來說,宣告這樣就好了
  • <html></html>:HTML 文件的根元素
  • <head></head>:裡面會包含描述網頁的 meta 資訊。例如 <title></title> 是網頁的標題列;<script></script> 是網頁中引用或撰寫的 javascript
  • <body></body>:實際呈現給使用者的內容,爬蟲通常都是要抓這個元素內的東西

其他更完整的資訊可以到 w3schools 來瞭解,畢竟爬蟲只要知道怎麼定位爬取目標就好 ,就像玩線上遊戲解任務,只要知道去哪裡打幾隻怪就好,不一定需要知道每個標籤的定義。

明天開始就可以開始實際用 Python 程式來取得網頁資料了,敬請期待!

參考資料


上一篇
【Day 3】常見的資料格式 (2/3) - JSON
下一篇
【Day 5】剖析網頁原始內容 (1/2) - HTML
系列文
爬蟲在手、資料我有 - 30 天 Scrapy 爬蟲實戰33

尚未有邦友留言

立即登入留言