【Day 4】常見的資料格式 (3/3) - HTML - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 5

AI & Data

爬蟲在手、資料我有 - 30 天 Scrapy 爬蟲實戰系列第 5 篇

【Day 4】常見的資料格式 (3/3) - HTML

11th鐵人賽 python html

Rex Chien

2019-09-19 10:59:28

3878 瀏覽

分享至

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

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

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
屬性：href、alt
內容：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>：實際呈現給使用者的內容，爬蟲通常都是要抓這個元素內的東西