以網路爬蟲角度解析HTML基本概念
網路爬蟲系列文章(由淺入深，皆含教學影片與程式碼)：
1. 一個觀念，開啟Python 網路爬蟲成長之路！
2. 第一支爬蟲：輕鬆爬取台灣第一位武漢肺炎確診資訊！
3. Cookie 突破PPT 八卦版十八禁限制-網路爬蟲系列
閱讀本篇前建議將以上三篇文章先看過喔^^~
其實網路爬蟲對於Python初學者來說算是很實用的技能，尤其是在把許多瑣事自動化中是最好的應用。但卻讓初學者最頭痛的是好不容易學好Python 可以跑，結果又遇到HTML (HyperText Markup Language) 更加頭痛了。所以我們本篇簡單介紹學習網路爬蟲前最基本必備的重要概念。
但這裡要提醒初學者，絕對要再去更深入的理解HTML 。本篇只有基本概念還有許多進階知識學會會讓你更順利喔！
HTML 元素(Elements)
HTML 元素(Elements) 由各種標籤(Tag) 來呈現不同的功能，詳細可以參考屬性列表。通常有以下幾個重要區塊組成：
1. 標籤名稱(Tag Name)：通常會有開頭跟結尾並用大小於符號框起來。結尾會多一個斜線符號 ( / )表示結尾。
Python網路爬蟲可以直接根據標籤名稱直接抓取單個或多個Elements。
2. 屬性名稱(Attribute Name)：屬性名稱可以說是最重要的一個。因為根據不同屬性名稱可以賦予整個元素不同功能，如：超連結的"href"。或者套用不同的屬性，如：套用CSS樣式的Class、ID。
屬性名稱可以幫助Python網路爬蟲快速定位特殊的"元素位置"，非常好用！
3. 屬性值(Attribute Value)：屬性值就只是屬性名稱對應的值，要特別注意可能一個屬性名稱會含有多個屬性值。
在Python網路爬蟲中，要讓爬蟲知道到底是要抓哪個特殊的元素就是要給Python相對的屬性值。
4. 內容(Content)：是唯一個會被瀏覽器顯示的文字內容。
所以在Python 網路爬蟲中就是我們最後真正抓出來的內容拉。
當然還是要提醒讀者，以上4點在網頁前端中絕對不只有這些含意與功能。我單純用爬蟲角度解釋幫助讀者可以在對短時間內進入狀況。
屬性：ID
Id屬性通常代表後方的 "屬性值" 會在整個網頁中會是獨一無二的。以上圖為例：只有一個HTML元素可以有這個 "topbar" id。
所以他在Python 網路爬蟲是好抓取資料的屬性。如果運氣好要的資料元素中剛好有id 這個屬性，就可以輕易的快速定位資料位置。
屬性：Class
class在網頁前端中最大的應用就是套用某個CSS樣式了，所以往往的在網頁上如果看到同個資料呈現方式通常都會擁有相同的Class。因此是可以有多個元素套用相同的class 屬性值，如上圖。
所以他在Python 網路爬蟲中，最大的特色就是可以透過Class一次大量抓取資訊。例如PPT 整頁的標題。
網頁階層(Page Structure)
一定要特別注意網頁是階層式的。只要被標籤頭跟標籤尾包含住的元素就是下一個階層。
重點在於Python在爬網頁時，某個想要的資料沒有Class或者或者id 就必須要先抓到上一個階層再往下到下一階層抓資料。
以PPT 八卦版網頁為例。在上圖中你就可以發現，class=’r-ent’的元素是最上階層。而class 為 nrec、title、meta都是class=’r-ent’ 的下一階層。
影片( 不知道為何一直無法遷入)
簡單的讀者入門HTML，我們終於可以開始寫網頁爬蟲了！
相關文章：Cookie 突破PPT 八卦版十八禁限制-網路爬蟲系列
相關文章：幫助Python新手度過陣痛期的關鍵功能！整合開發環境 Spyder三大功能
相關文章：怒砍Anaconda ! 手動移除windows Anaconda 殘留檔案！
相關文章：入門必看！Windows 懶人搭建Anaconda Python 學習環境
相關文章：為什麼我的Python 總是學不好?
如果你覺得這篇文章很棒
你的拍手是我前進的動力！
