---
# System prepended metadata

title: "\U0001F3C5 Day 07 - 設計 HTML 格式檢查小幫手"
tags: [2025 VibeCoding 體驗營]

---

# 🏅 Day 07 - 設計 HTML 格式檢查小幫手


## 題目

請設計一個 HTML 格式檢查小幫手

當我提供下方 HTML 內容時：

```=html
<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="UTF-8">
    <title>我的範例網頁</title>
  </head>
  <body>
    <h2>這是一個符合規則的範例網頁</h2>

    <p>以下是一些示意內容：</p>

    <img src="images/sample.jpg" alt="示意圖片：一張風景照">

    <p>
      想了解更多資訊，可以前往
      <a href="https://www.example.com">範例網站</a>。
    </p>
  </body>
</html>
```

ChatGPT 會回傳給我以下表格格式

| 規則 | 結果 |
| --- | --- |
| 基本結構 `<html><head><body>` | ✅ 通過 |
| `<html lang>` 是否有設定 | ✅ 通過 |
| `<meta charset="UTF-8">` 是否存在 | ✅ 通過 |
| `<title>` 是否非空 | ✅ 通過 |
| `<h1>` 是否僅有一個 | ❎ 未通過 |
| `<img>` 是否皆有非空的 `alt` 屬性 | ✅ 通過 |
| `<a>` 的 `href` 是否合法（非空且非 `#`） | ✅ 通過 |

## 回報格式
請提供您做好的截圖跟 prompt ，張貼回 Discord 每日任務討論串

1. 您的 Prompt
2. 您與 ChatGPT 的完整對話截圖
