我的第一個小網站！HTML 全面整合實戰 (Day7)

2025 iThome 鐵人賽

DAY 7

佛心分享-IT 人自學之術

30 天體驗：從程式菜鳥到前端新手工程師系列第 7 篇

17th鐵人賽

tingisgood

2025-09-21 18:50:38

68 瀏覽

分享至

哇～一轉眼已經到第七天啦 🎉！
回想這一週，我從最基本的 HTML 骨架開始，慢慢認識了標題、段落、清單，再到圖片、連結、表格，昨天甚至還做了小名片。
感覺就像拼拼圖一樣，一塊一塊拼上去，今天終於可以把它們全部組合起來 —做出屬於我的第一個小網站 ✨！

我的小網站包含：
•大大的首頁標題 (< h1 >)
•一小段自我介紹 (< p > 搭配 < strong >、< em >)
•興趣清單 (< ul >)
•今年的目標 (< ol >)
•個人照片 (< img >)
•常用連結（例如 Google、Email < a >）
•技能表格 (< table >)
•還有一個「聯絡我」的小表單 (< form >)

程式碼:

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Day 7：我的第一個小網站</title>
</head>
<body>
  <!-- 網站標題 -->
  <h1>歡迎來到我的個人網站 🎉</h1>

  <!-- 自我介紹 -->
  <h2>關於我</h2>
  <p>嗨！我是 <strong>一位正在學習 HTML 的初學者</strong>。  
  喜歡 <em>挑戰新東西</em>，希望能用程式做出有趣的小專案 ✨。</p>

  <!-- 興趣清單 -->
  <h2>我的興趣</h2>
  <ul>
    <li>🎮 遊戲設計</li>
    <li>📚 閱讀學習</li>
    <li>🌏 旅行探索</li>
  </ul>

  <!-- 目標清單 -->
  <h2>今年目標</h2>
  <ol>
    <li>完成我的第一個小網站</li>
    <li>學會 HTML / CSS / JavaScript</li>
    <li>做一份作品集</li>
  </ol>

  <!-- 插入圖片 -->
  <h2>我的照片</h2>
  <img src="img/me.jpg" alt="我的照片" width="200">

  <!-- 連結 -->
  <h2>常用連結</h2>
  <p>📧 聯絡我：<a href="mailto:example@mail.com">example@mail.com</a></p>
  <p>🔎 搜尋資料：<a href="https://www.google.com" target="_blank">Google</a></p>

  <!-- 表格 -->
  <h2>我的技能</h2>
  <table border="1">
    <tr>
      <th>技能</th>
      <th>熟悉程度</th>
    </tr>
    <tr>
      <td>HTML</td>
      <td>⭐️⭐️⭐️</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>⭐️⭐️</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>⭐️</td>
    </tr>
  </table>

  <!-- 表單 -->
  <h2>聯絡我</h2>
  <form action="#" method="post">
    <p><label>名字：<input type="text" name="username"></label></p>
    <p><label>Email：<input type="email" name="email"></label></p>
    <p><label>留言：<br>
      <textarea name="message" rows="4" cols="30"></textarea>
    </label></p>
    <p><input type="submit" value="送出"></p>
  </form>

  <!-- 結尾 -->
  <h2>小結</h2>
  <p>這就是我一週學習 HTML 的成果 —— <strong>我的第一個個人小網站</strong>！  
  從文字、圖片到表單，全部都學以致用，雖然簡單，卻是最棒的第一步 🚀。</p>
</body>
</html>

總結一下: HTML 一週學習日記

🔹 Day 1：5分鐘帶你快速認識網站架構：基本概念及前端架構
第一天正式開始！今天主要是先了解前端世界長什麼樣子，知道網頁是由 HTML、CSS、JavaScript 組成的。HTML 就像骨架，CSS 是裝潢，JS 則是讓它動起來。雖然還沒寫什麼程式碼，但感覺像是打開了一扇新世界的門 🚪。

🔹 Day 2：前端新手必看：開發環境安裝 + 自學網站大公開
今天逛了幾個學習網站，像是 Codecademy、freeCodeCamp、MDN Web Docs。發現線上平台的互動練習真的蠻有趣，邊寫邊看到結果，學起來比較不會枯燥。雖然英文有點小挑戰，但慢慢看還是能懂！💪

🔹 Day 3：從 < h1 > 到 < ul >：前端新手必學 HTML 標籤
今天終於開始動手寫 HTML！練習 < h1 > 到 < h6 > 的標題、< p > 段落，還有 < strong >、< em > 來強調文字。也玩了一下清單 < ul > 跟 < ol >。第一次看到自己寫的程式碼跑出「我的介紹頁」時，超級有成就感 🎉。

🔹 Day 4：讓網頁動起來！HTML 圖片 × 超連結 × 表格全攻略
今天的網頁變得更豐富啦！我學會了怎麼插入圖片 < img >，加上外部連結< a >，還能用 < table > 排出旅遊行程表。做完後的旅遊計畫小頁面，感覺像是小小的個人作品集，超有趣 ✨。

🔹 Day 5：和使用者互動！HTML 表單 × 輸入元件全攻略
到這裡，網頁不再只是「單向展示」了！今天我用 < form > 建立了表單，可以讓使用者輸入名字、密碼，勾選興趣、選擇性別，甚至還能留言。就像網頁終於學會「回話」一樣，開始和人有互動了 🤖💬。

🔹 Day 6：小名片大能量！打造屬於我的數位名片
拼圖越來越完整 🧩。今天的任務是把前幾天學的標籤整合起來，做一個「小名片頁」。放上照片、自我介紹、興趣清單、聯絡方式，還做了一個技能表格。這就像我的第一張「數位名片」，雖然簡單，但很有成就感 🎊。

🔹 Day 7：我的第一個小網站！HTML 全面整合實戰
一週挑戰的最後一天！把所有東西都拼起來，做出一個完整的「小網站」 🎉。從標題、文字、清單，到圖片、連結、表格，再加上表單，全部一次用上。雖然外觀很樸素，但我知道這是往前端世界邁出的第一大步 🚀。

到這裡，HTML 的基礎就告一段落了。接下來第二週，我就要開始學 CSS，讓我的網站變漂亮起來！🎨