上一章我們用 Gemini Cli 生成了一個會動的零用錢記帳程式，接著就來看程式碼長什麼樣子吧。先用 Finder 找到對應的資料夾，接著按右鍵，用 Visual Studio Code 開啟這個 "index.html" 檔案。

先來看 HTML 的部份

在編輯器中往下捲，找到 <body> ，往下一行，就是生成我們程式畫面內容的部份。下面的圖是比對瀏覽器中的網頁應用程式畫面，是對應到編輯器中的哪一段 HTML 程式碼。

HTML 標籤 (HTML tag)

你可以注意到，HTML 是由很多長得像 <div></div> 這樣的文字構成的。我們把這種東西叫做HTML 標籤，這種標籤通常是一對的，用 <div> 開頭，通常就會有 </div> 的結尾(有注意到結尾標籤有個斜線嗎？)。在一對的標籤裡，包的就是這個區塊裡的內容。

例如最上方桃紅色的區塊，就是用 <h1> 標題標籤包起來的 "零用錢記帳本" 文字。你可以在編輯器裡改裡面的文字並按 [command] + [s] 存檔，再重新整理編輯器，就可以看到文字改變了。

<div> 與 <span> 容器標籤

HTML 最常用的標籤是 <div>標籤與 <span> 標籤。<div> 是個方型的區域，裡面會裝進其它有功能的標籤，也可以再套好幾層的 <div> 或 <span>。

而 <span> 是一個橫行，通常用在想要讓東西連續橫著排列用的。

在綠色區塊裡，就是怎麼用 <div> 及 <h4> 小標題標籤來排列出總額顯示區的作法。不過 HTML 通常只負責把內容分區塊切好。真正用來調整位置跟顏色的，是之後才會介紹的 CSS。

<form> 表單及輸入相關標籤

在第三個藍色區塊裡，我們可以看到另一群新的標籤。這些標籤，是在程式裡負責填入資訊的功能。包含了表單標籤 <form> 、幾個不同型式的輸入欄位 <input>、用來說明這些欄位的 <label> 以及送出整個表單的 <submit>。

另外可以注意到，這類的標籤長得比較長，像是這樣：

<input type="number" id="amount" placeholder="輸入金額" required>

在這個例子裡， <input>標籤上有四個屬性 (attribute)。分別是表是這是輸入數字用的 type=number。之後程式與它互動時會用來對應哪個欄位的 id="amount"、在欄位裡面顯示提示文字的 placeholder=輸入金額，以及標定這是必填欄位的 required

顯示排列資訊用的 <table>

最下方的橘色區塊，是用來顯示一條條加入的收支項目的。所以會用 <table> 表格標籤。可以注意到程式一開始的 HTML 上只有上方表頭 <thead> 裡有文字，表格內容的 <tbody>是空的，原因是收支項目是在互動後，由 JavaScript 動態填進去的。

營火前的小複習

我們今天研究了網頁程式中的 HTML 部份，看到 HTML 是由許多被標籤包住的文字內容所組成。也說明了幾種不同的標籤

1. 容器標籤: <div>及 <span>。
2. 表單及輸入標籤: <form>、<input>、<submit> 及 <label>
3. 標籤上的屬性: id, type, placeholder 及 required
4. 表格標籤: <table> 及裡面的 <thead>, <tbody>

測驗

可以跟 AI 一起討論，並請它舉出使用的範例喔

1. 最常用的HTML標籤有哪些，是用來做什麼的？

2. 最常用的HTML標籤屬性有哪些，是用來做什麼的？

3. 標籤屬性的 id 與 class 有什麼不同？

4. 有哪幾種輸入資訊用的標籤？

5. 設計用來記錄"一項"回家作業的表單

地圖