過去這幾天，我們就像是在收集網頁的各個零件，我們認識了網頁的黃金骨架，學會了填入標題與內文，還解鎖了圖片、超連結、互動表單，以及區塊概念（<div>與<span>）。
今天是我們的HTML階段的最後一天，我們將只使用HTML，並純粹用前面七天所學到的東西，拼出一個具備目前進度、互動聯絡表單與一些之前學過的功能的標準綜合網頁。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>綜合網頁</title>
</head>
<body>
<div id="header-section">
<img src="ChatGPT Image 2026年8月30日 下午11_42_49.png" alt="貓咪" width="200" />
<h1>歡迎來到這裡</h1>
</div>
<div id="about-section">
<h2>目前進度</h2>
<p>跟著我的腳步，成功解鎖了網頁底層的黃金結構，以下是你會學到的技能樹：</p>
<ul>
<li><strong>HTML5 基礎骨架</strong>：了解網頁的中樞神經與舞台。</li>
<li><strong>語意化標籤</strong>：用正確的標籤讓搜尋引擎看懂網頁。</li>
<li><strong>互動表單元件</strong>：打造能夠跟使用者對話的橋樑。</li>
</ul>
<p>想學習更多嗎？可以點擊這個 <a href="https://ithome.com.tw" target="_blank">超連結前往iThome鐵人賽官網</a> 觀看喔</p>
</div>
<div id="contact-section">
<p>如果您對我的技術文章有任何建議，歡迎填寫下方表單與我交流：</p>
<form>
<p>
<label for="userName">您的姓名：</label>
<input type="text" id="userName" placeholder="請輸入您的名字">
</p>
<p>
<label for="userLocation">居住地區：</label>
<select id="userLocation">
<option value="taiwan">台灣</option>
<option value="japan">日本</option>
<option value="usa">美國</option>
</select>
</p>
<p>
<label for="userSuggestion">建議：</label>
<input type="text" id="userSuggestion"placeholder="請輸入您的建議">
</p>
<p>
<button type="submit">送出訊息</button>
</p>
</form>
</div>
</body>
</html>
在這段大總整的程式碼中，我使用了前幾天學的東西，方便大家複習：
<div>：這個網頁我使用了三個<div>區塊（#header-section、#about-section、#contact-section），將頁面劃分為三個邏輯區塊，這就是現代網頁排版的基礎型態。<form>）：最下方的聯絡我們區塊，我們用<form>外殼將 label、input 和 select 完美地打包在一起。<img>：這個網頁我放入了一個圖片<li>：使用無序清單介紹學了什麼<a href>：我使用了一個超連結<input>：可以輸入的輸入欄位<button>：可以按的按鈕雖然它目前只有單純的白底黑字和藍色超連結，看起來很單調，而且表單也沒辦法真的送到後端，不過這些在之後幾天就會學到了。
明天我們即將進入下一個技術領域：CSS，我們將要成為造型師，幫今天做的這個網頁染上色彩。
iThome鐵人賽
看影片追技術