Python爬蟲必備的HTML概念，5個要點認識網頁的基本結構

更新日期: 2022 年 9 月 11 日

如果學習HTML，就跟學會日常生活中你有興趣的事類似，你會不會比較能夠感同身受，容易理解HTML的運作方式?

學習新的事物，要是可以與你的生活經驗結合，學習起來會比較親近點，好學一些。

它們可能很相似，也可能完全不同；若概念相似，可以讓你套用既有的經驗仿效學習，若是截然不同，也會讓你開開眼界，發現原來有這樣的方法，來組織起一個有價值的東西，讓你有所成長。

打個比方來說，假如你現在想創業，加盟或開設一家實體商店，當你選好店面地點、商品類型後，你需要:

(本文HTML皆指HTML5版本)

快速閱讀

HTML是網頁的骨架

你可將網頁與商店放一起做聯想：

作為商店老闆，建立自己新事業的順序上，是有了商店的基本架構後，才會進行裝潢、發起與顧客互動的相關活動；網頁也有類似的流程，一個網頁有了HTML後，才會再附加上CSS、JavaScript。

這也是為什麼，設計一個Python爬蟲或開發網頁，需要先弄懂HTML的緣由。作為一個爬蟲的設計者，如果不知道要擷取的網頁資訊在那兒可以找到，爬蟲是無法爬取到東西的。而網頁開發就更不用說了，HTML是網頁的基本結構，建不起結構，便無法蓋出你要的房子了。

大概知道HTML之於網頁與Python爬蟲的關係後，我們來看看HTML是什麼?

HTML而是HyperText Markup Language的縮寫，由各單字的首個字母所組成。

中文有人翻譯為「超文本標記語言」，或是「超文件標示語言」等各種意思相近的名稱。

超這個字讓人感覺這個語言好難，不需要把超這個字想的太難，把它想成超車的超，應該就沒那麼難了。(要是你就是要想成超人的超，難怪超難)，如果覺得許多不同的中文譯名讓你十分混淆，你可以記得英文就好。

看到HTML原始碼，也是由一堆字母、符號構成，你可能會以為它是一個程式語言，但其實HTML並不是程式語言，而是標記語言，它透由標記來架構起一個網頁。

標記語言相對程式語言容易不少，你只需要學會基本的架構，把標記放上去就可以了。

但標記是什麼概念?

就好像你走進一個賣場，為了讓你可以更快地找到你需要的商品，不同區域會有不同的商品類型標示牌，賣魚、賣肉的地方標記生鮮區，販售零食、餅乾、泡麵、五穀雜糧的地方標記食品區，擺放衛生紙、洗碗精、洗衣精的區塊標記生活用品區。

HTML的標記有點類似商店各類商品標示的概念，標記你要在網頁上放些什麼東西，讓瀏覽器幫你呈現出來。

知道HTML是標記語言，而不是程式語言後，我們來看看它的標記怎麼呈現。

HTML的每個標記都由<>這兩個符號所組成，你只要看到<>，基本上就是標記，也稱之為標籤（tag），當然不同的標記有不同的文字代表，像是<html>、<head>、<body>都是不同的標記，有不同的功用。

HTML用不同的標記來形成網頁所需的骨架，建立起網頁的架構，有了架構我們再使用CSS來美化它、用JavaScript增加網頁的互動性。

就是無論HTML原始碼再怎麼複雜、豐富都會有的基本形式。就好像一間商店必然會有招牌、店面空間、營運系統、呈現在顧客前的商品。

如果我們把商店的比喻放到HTML來看：

招牌是要讓消費者認出你是他要找的店
類似於<!DOCTYPE html>宣告，DOCTYPE是document type的意思，有這個宣告，瀏覽器才知道這個文件是HTML。
店面空間是你的商店營運的範圍
類似於<html>標籤，標定網頁原始碼的範圍，<head>與<body>標籤都要放在這裡頭。
營運系統，像是物流、金流這些不是要賣給顧客，卻是商店所需的系統
類似於<head>，告訴瀏覽器網頁如何編碼、使用哪個關鍵字等，不會直接呈現在網頁上的內容，都放在<head>標籤中。<title>標籤算是小小特例，網頁名稱會顯示在瀏覽器的分頁上。
呈現在顧客面前的商品
類似於<body>標籤，要呈現在網頁上的內容都要放在<body>標籤內。

這4個元素便是構成HTML的基本架構，你可以看到呈現的方式如下方這個圖

這個架構圖與前面的架構圖有點不同，少了空行，每個標籤都連在一起了，但功能是相同的。編輯HTML時，使用空行、縮排只是為了方便閱讀，有利於你編輯與閱讀，但對瀏覽器而言是一樣的東西，瀏覽器只能辨別宣告、標籤，當然還有標籤內的屬性、內容。

<>是標籤呈現的樣貌，不同的標籤會在<>這兩個符號中間加入特定的文字。
HTML開頭必須宣告<!DOCTYPE html>，瀏覽器才會知道這是HTML檔案。宣告雖然與標籤長得很類似，由<與>包覆住，但宣告不屬於標籤（tag），歸類為宣告。
HTML基本架構為：<!DOCTYPE html>宣告、<html>、<head>、<body>標籤。
多數標籤都有一個開頭與結尾，結尾標籤與開頭標籤的差異只差在一個斜線。
例如：
<body></body>、<p></p>
少數標籤不須結尾，只需要開頭，例如：
<br>、<hr>、<meta>
你也許會看到有人這樣表示<br/>，這是XHTML的用法，也適用於HTML。當標籤只需單一個即可，會在文字尾端加上一個斜線。
要給瀏覽器知道的資訊，放在<head>標籤中；顯示在你的網頁頁面的內容，則放在<body>標籤中。