【Day 6】了解 HTML 對於之後餵食 AI 做摘要有什麼幫助？

17th鐵人賽

y0yi9ue

2025-08-13 18:42:34

259 瀏覽

分享至

在上一篇已經做完 Gemini 的連接工作，接下來要抓取新聞正文讓它做摘要，在抓正文之前我們需要先對 HTML 的語法有一些了解，因為之後抓的新聞是 HTML 的內容，再用 Code 節點把 HTML 格式轉為純文字讓 AI 摘要，你可能會有一些疑問：「不能直接讓 AI 讀 HTML 格式嗎？」，讓我來為你解答吧！

為什麼要先抓 HTML 再轉純文字？

先回答剛剛那個問題：「不能直接讓 AI 讀 HTML 格式嗎？」
答案：「可以」，你可以直接抓 HTML 格式讓 AI 做摘要。
但為什麼我還要轉成純文字呢？有幾個原因：

內容太多：HTML 不只包含正文，還有廣告、推薦文章、按鈕、版面設定等等，這些對摘要沒有幫助，反而可能干擾 AI 判斷重點。
Token 浪費：還記得我說我用的是 Gemini 1.5 Flash 免費版嗎？既然是免費版那一定有使用上的限制，而 HTML 裡的標籤、CSS、JS 都會佔 token，我們要以最低的成本來獲得最大的收益！
不同網站 HTML 結構差異大：每個新聞網站標籤命名不一樣，直接丟 HTML 就等於把不確定性交給 AI，結果可能不穩定，我們不能期待 AI 會自動知道哪部分是文章正文。
（雖然我這次是用同一個網站的新聞，這條就當作給你們的一點提醒，之後你們可能會使用不同網站的 HTML 內容，要多多注意！）
解讀有風險：雖然 Gemini 能理解 HTML，有兩個原因我們要把標籤、換行號等字元刪除。
- 優化 AI 摘要的品質，給它最乾淨的純文字，讓它能回饋最精準的摘要
- 我們要傳給 AI 的時候是用 JSON 格式（可以回去上一篇看我們寫的程式碼），而 JSON 格式對特殊字元（如換行符號）的處理比較嚴格，為了避免在傳輸或解析時出現錯誤，我們會先將這些特殊字元處理掉，讓 JSON 資料更為乾淨和穩定。

HTML 是什麼？

HTML ( HyperText Markup Language ) 是一種標記語言，可以用來建立網頁，常與 CSS、JavaScript搭配使用，設計網頁排版及畫面。瀏覽器會讀取 HTML 一系列的標籤轉變成供使用者閱覽的頁面。

HTML 基本語法架構

再來我就要介紹 HTML 的基本語法架構啦 ~ 我會說明在此次選擇的新聞網站「CNA」中比較重要的一些語法。

下面是最基本的 HTML 架構：

<!DOCTYPE html>
<html>
  <head>
    <title>網頁標題</title>
    
    <!-- 其他元訊息 -->
    
   </head>
	<body>

 <!-- 網頁內容 -->
 
	</body>
</html>

<!DOCTYPE html>
DOCTYPE 是 Document Type 的縮寫，用來告訴瀏覽器：「我是 HTML ！」
<html>
HTML 文檔的根元素，一個文檔的開頭，所有 HTML 內容都應該被包含在這個標籤裡面。
<head>
包含了一些不會直接顯示在網頁上的設定，例如：字元編碼（charset="UTF-8"）、

標題（<title>）
<body>
實際給使用者看到的網頁內容，常見的元素有：標題（<h1>）、段落（<p>）、連結（<a>）、圖片（<img>）等。大部分我們感興趣的內容（例如新聞正文、圖片等）都在這個標籤裡。

HTML 元素架構

元素架構是由數個 <element> Content </element> 這樣形式的元素組合而成。

起始標籤（<element>）
定義元素的開始，元素名稱包圍在「< >」中。例如 <p> 是一個段落元素。
結束標籤（</element>）
定義元素的結尾，會在元素名稱前面加上一個「/」。
內容（Content）
起始標籤和結束標籤之間的部分，元素的實際內容。
屬性（Attribute）
提供更多元素資訊，會出現在起始標籤裡，包含一個名稱和一個值，值會包在「」中，
常見的屬性有：「class」、「href」、「src」等。

HTML 語法：標題

在看一篇文章時，我們會透過標題字體的大小來分辨文章結構，下面就是在 HTML 中設定標題的方法，以此類推。

<h1> 主標題 </h1>

主標題

<h2> 次標題 </h2>

次標題

<h3> 更小的標題 </h3>

更小的標題

HTML 語法：連結

<a href="https://www.pcschool.com.tw/webdesign"> CNA News </a>

<a> 是 HTML 裡用來建立超連結的標籤。
href 屬性（Hypertext Reference）用來指定連結的目標網址。
兩個 <a> 標籤之間的文字（上例中的 CNA News）就是網頁上會顯示的可點擊文字。
⚠️ 這裡是示範 HTML 語法，在大部分文章平台上不一定會變成可點擊的連結。

在新聞頁面中，<a> 標籤通常會用來：

連到新聞的詳細頁面
插入內文的延伸閱讀連結
連到圖片或其他相關資源

HTML 語法：圖片

<img src="https://i.ibb.co/HpgWvFPL/image.png" alt="示意圖" >
（輸入網址進去看！我自己用滑鼠寫的字👉👈）

<img> 是用來在網頁上插入圖片的標籤
src 屬性（Source）指定圖片的來源路徑，可以是完整網址（如上例）或相對路徑。
alt 屬性（Alternative Text）是替代文字，當圖片無法載入時會顯示這段文字，也方便瀏覽器理解圖片內容。

在新聞頁面中，<img> 標籤通常會用來：

插入新聞主圖（通常在內文開頭）
內文插圖或圖表
其他媒體素材（例如記者拍攝的現場照片）

再看一眼上面的例子，你有沒有發現它後面沒有結束標籤（</>）？
因為 <img> 是一個空元素，它沒有內容，所以也沒有結束標籤！

注意

你可以到 CNA 的新聞頁面按下鍵盤的「 F12」，或是在頁面空白處按下滑鼠右鍵，點擊最下方的「檢查」，打開開發者工具畫面看看這個網頁的各種標籤：<head>、<body>、<p>、<img> 對應在頁面的哪個位置，這樣明天你就能更清楚知道我在抓取哪裡的內容~
（點擊開發者工具畫面左上方的小箭頭，再點選左邊你要看的新聞內容，開發者工具就會自己追蹤點選處的標籤位置！）