上一章我們用 Gemini Cli 生成了一個會動的零用錢記帳程式，接著就來看程式碼長什麼樣子吧。先用 Finder 找到對應的資料夾，接著按右鍵，用 Visual Studio Code 開啟這個 "index.html" 檔案。
在編輯器中往下捲，找到 <body> ，往下一行，就是生成我們程式畫面內容的部份。下面的圖是比對瀏覽器中的網頁應用程式畫面，是對應到編輯器中的哪一段 HTML 程式碼。
你可以注意到，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 是由許多被標籤包住的文字內容所組成。也說明了幾種不同的標籤
<div>及 <span>。<form>、<input>、<submit> 及 <label>
id, type, placeholder 及 required
<table> 及裡面的 <thead>, <tbody>
可以跟 AI 一起討論，並請它舉出使用的範例喔
id 與 class 有什麼不同？
iThome鐵人賽
看影片追技術