前往
大廳
主題

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

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

前言


        由於爬蟲的目標通常都會是一個網頁的某個東西,例如特定區域圖片、文字或影片,而網頁就是以 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我就不多提,各位可以直接查詢。

6. <ol></ol>
        ordered list,有序列表,對我們爬蟲來說有序無序不是很重要。

7. <ul></ul>
        unordered list,無序列表,對我們爬蟲來說有序無序不是很重要。

8. <li></li>
        list item,列表物品,這個通常才是我們想要的東西,會包在 ul 或 ol 的裡面。

9. <a></a>
        anchor,錨(連結),一般會伴隨著 href 的屬性一起出現,通俗一點的講法就是標記超連結的 tag。

10. <img/>
        image tag,這是比較特殊的 tag,他只有單邊而已,通常會伴隨著 src 的屬性一起出現,src 就是圖片的網址。

11. <form></form>
        form,網頁表單,通常會跟著另一個 input tag 一起出現,在登入或提交資訊的時候很常看到,模擬登入必須要知道的東西。

        以上這些是我覺得以爬蟲角度來說很常碰到的 tag,而且也是 HTML 十分常見的 tag,不過你若記不住這些也沒關係,這些 tag 都很常見,直接 google 都可以找到答案。

總結


        對於我們爬蟲來說,HTML 如何寫得好看、寫得有SEO(搜尋引擎優化)不是重點,只要你知道一些常用的 tag 以及屬性是什麼就好,當你爬蟲寫多了,自然也會慢慢認識網頁是如何運作的,甚至可以一起學習網頁要怎麼寫、前端有那些技術等...。

創作回應

更多創作