正在準備工作環境...
HTML 是什麼？
你每天看的網頁——Google、Yahoo、蝦皮——背後都是 HTML。
HTML 全名是 HyperText Markup Language（超文本標記語言）。聽起來很嚇人，但其實它只做一件事：告訴瀏覽器「這段內容是什麼」。
網頁 = 一份文件
把網頁想像成一份 Word 文件：
- 標題 →
<h1>標籤 - 段落 →
<p>標籤 - 圖片 →
<img>標籤 - 超連結 →
<a>標籤
HTML 用「標籤」來標記每段內容的角色。瀏覽器讀到標籤，就知道要怎麼顯示。
標籤長什麼樣？
標籤都用角括號包住，大部分有「開」和「關」：
<h1>我是標題</h1>
<p>我是一段文字</p>
<h1>是開標籤</h1>是關標籤（多了一個/）- 中間的文字就是「內容」
一個最簡單的網頁
結構拆解
每個 HTML 網頁都有固定結構：
| 部分 | 說明 |
|---|---|
<!DOCTYPE html> | 告訴瀏覽器「這是 HTML5」 |
<html> | 整個網頁的最外層 |
<head> | 網頁的「設定區」（標題、CSS 等，使用者看不到） |
<body> | 網頁的「內容區」（使用者看得到的全在這裡） |
想像一棵樹
HTML 的結構就像一棵倒過來的樹：
html
├── head
│ └── title
└── body
├── h1
├── p
└── p
每個標籤都是樹上的一個節點。標籤可以「包住」其他標籤，形成父子關係。
HTML、CSS、JavaScript 的分工
蓋一棟房子需要三種人：
| 技術 | 角色 | 比喻 |
|---|---|---|
| HTML | 結構 | 鋼筋水泥、隔間 |
| CSS | 外觀 | 油漆、裝潢、傢俱擺設 |
| JavaScript | 行為 | 電燈開關、電梯、自動門 |
這門課只學 HTML 和 CSS。學會這兩個，你就能看懂並修改大部分的網頁。
怎麼「看」一個網頁的 HTML？
在任何網頁上按 右鍵 → 檢查（或按 F12），就能打開「開發者工具」，看到這個網頁背後的 HTML 原始碼。
試試看！打開 Google 首頁，按右鍵 → 檢查，你會發現那個簡潔的搜尋頁面，背後其實有超多 HTML 標籤。
下一課我們來學最常用的 HTML 標籤，動手寫出自己的網頁！
AI 協作：學了這個，跟 AI 怎麼配合？
AI 可以幫你生成整頁 HTML，但你要能看懂結構才知道哪裡要改。
你的人類優勢：
- 你能判斷 AI 生成的網頁結構是否符合你要的排版
- 你知道頁面上「哪一塊」對應到哪段 HTML
可以這樣跟 AI 說：
幫我寫一個簡單的商品介紹頁面，要有標題、商品圖片、價格和「加入購物車」按鈕。
練習題
互動示範
DEMO 1可以修改程式碼試玩
挑戰任務
Task 1
寫一個 HTML 頁面，包含一個 h1 標題「歡迎光臨」和一個 p 段落「我們提供最好的商品」
Task 2
寫一個完整的 HTML 結構（含 DOCTYPE、html、head、body），body 中放一個 h2 標題和兩個 p 段落
Next Lesson →