主題

【手把手帶你學會爬蟲】#2 認識 HTML

魔化鬼鬼 | 2021-11-07 11:50:42 | 巴幣 2 | 人氣 720

前言

由於爬蟲的目標通常都會是一個網頁的某個東西，例如特定區域圖片、文字或影片，而網頁就是以 HTML 做畫面的呈現，因此有必要提一下 HTML。不過這篇文章不是網頁設計的教學，所以 HTML 只會提一些基本的。

HTML 的簡介

HTML 全名 Hypertext markup language，從名字可以看到它是一個 markup(標記) 的語言，這意味著你不會看到一般程式語言會看到的變數宣告、迴圈、遞迴或函式等概念，他純粹就是一個標記東西的語言，所以你或許聽過「HTML 是不是程式語言」的爭論。

有些人可能會好奇「既然 HTML 沒有這些程式概念，那我點按鈕的那些邏輯是怎麼來的？」，那些其實是 Javascript 做的事情，這邊先不提 Javascript，你只要知道 Javascript 是撰寫網頁背後邏輯的語言就好。

哪裡可以看到 HTML

要看到網頁背後的 HTML 你可以打開開發人員工具，在瀏覽器按下 F12，最上排有一個列，選擇 Elements，那一大坨東西就是 HTML。別慌張，你不需要全部知道那些是什麼，因為我也不是全部都懂，你只要認識一些常見的就好。

如果你想直接完整的看到 HTML 你可以直接在網頁某處點擊右鍵，按下「View page source」，中文的話應該是「檢視原始碼」或「查看原始碼」之類的，如果你想看到特定區域的 HTML，例如某個按鈕，你可以在那個按鈕按下右鍵，按下「Inspect」，中文的話應該是「檢視」

HTML 的結構

首先 HTML 語言的最小單位叫做一個 tag，一個 tag 通常是 <tag></tag> 的方式做表示，某些特定的 tag 只會有單個 <tag> 這樣的結構，這個後面再說。而 tag 裡面還可以在放其他的 tag，例如這樣 <tag1><tag2></tag2></tag1>，這樣就是 tag1 裡面包著 tag2，你可以觀察看看背後的 html 通常都會有一層又一層的 tag，所以網頁一般都是巢狀的結構。

HTML tag 的屬性

如果你有打開我剛剛說的開發人員工具，或是檢視背後的原始碼，你應該會很多 tag 後面會加一堆奇怪的東西，例如什麼 class、style、id、src、href... 等，那些東西叫做屬性(attribute)，對於爬蟲來說，通常爬取的資料會有一個固定規律跟格式，而這些屬性就是我們判斷規律和格式的一個方向。

常見的 HTML tag

說完了 tag 的結構，我們要來認識一些常見的 tag 了。

1. <div></div>

division tag，拿去翻譯的話 division 有區域的意思，這是最?？吹降臉嘶`，通常網頁內容都會用好幾層的 div 包起來，你要的內容可能就在某個 div 裡面。

2. <h1~6></h1~6>

heading tag，以語意來說通常是會在標題之類的地方看到。

3. <p></p>

paragraph tag，段落的意思，通常裡面都會放文字或是超連結之類的東西。

4. <span></span>

我不是很曉得這個的名字，但是跟 div 差不多。

5. <table></table>

就是表格，內部還有其他的 <th></th>、<tr></tr> ...等的 tag我就不多提，各位可以直接查詢。