上一章我們用 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 有什麼不同?