小名片大能量！打造屬於我的數位名片(Day6)

2025 iThome 鐵人賽

DAY 6

佛心分享-IT 人自學之術

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

17th鐵人賽

tingisgood

2025-09-20 19:53:15

69 瀏覽

分享至

學了這麼多天，感覺工具箱越來越滿了。
我會放文字、加圖片、做連結，也能排表格，甚至昨天還讓使用者能填表單！
今天的任務就是 —— 把這些元素都串起來，做一個屬於自己的小名片頁。
就像交朋友時遞出去的名片，只不過這次是數位版的。GO GO GO ~

一、要素整理
我們的「名片頁」可以包含：
•一個大標題（例如：我的名片）
•一張個人照片（< img >）
•一小段自我介紹（< p >，可以用 < strong > 或 < em > 強調）
•興趣清單（< ul >）
•聯絡方式（Email → < a >，或電話）
•簡單表格（例如：我的技能、或學習計畫）

二、程式碼範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Day 6：我的小名片</title>
</head>
<body>
  <h1>我的名片</h1>

  <!-- 照片 -->
  <img src="img/ME.jpg" alt="我的照片" width="150">

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

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

  <!-- 聯絡方式 -->
  <h2>聯絡方式</h2>
  <p>Email: <a href="mailto:example@mail.com">example@mail.com</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>
</body>
</html>

小叮嚀:
寫程式的時候要注意：
檔名大小寫要一致（me.jpg ≠ Me.jpg）。
**src **的路徑要跟資料夾結構對得上。
alt 記得寫，這樣圖片壞掉或載入失敗時，還能看到替代文字。