🎨 HTML 起手式超白話教學

小學生也能懂的網頁入門課

📚 第一部分:HTML 是什麼?

🎯 一句話說清楚

HTML 就是「網頁的骨架」,用一堆「標籤」告訴瀏覽器:這裡要放標題、那裡要放圖片、這段是按鈕。

📦 什麼是「標籤語言」?

想像你在整理玩具箱:

  • 你會用標籤紙寫「樂高」貼在盒子上
  • 你會用標籤紙寫「娃娃」貼在另一個盒子上

HTML 也一樣,用「標籤」把內容包起來:

<h1>這是大標題</h1> <p>這是一段文字</p> <img src="cat.jpg" />

🧩 成對的標籤(像三明治)

大部分標籤都是成對的,像三明治一樣把內容夾在中間:

<開始標籤> 內容 </結束標籤>
    ↓       ↓      ↓
   麵包    火腿    麵包
<h1>我的網站</h1> <p>歡迎來到我的網站!</p> <button>點我</button>
⚠️ 特殊例外: 有些標籤不需要內容,就不用成對(像 <img /> 圖片、<br /> 換行)

🏗️ HTML 的工作是什麼?

  • 搭建網頁架構:就像蓋房子要先有樑柱
  • 呈現內容:文字、圖片、影片都放在 HTML 裡
  • 讓 CSS 打扮:HTML 是骨架,CSS 是衣服
  • 讓 JavaScript 動起來:HTML 是身體,JavaScript 是動作

📝 第二部分:HTML 檔案結構的起手式

完整的起手式長這樣

<!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>我的第一個網頁</title> </head> <body> <h1>哈囉!</h1> <p>這是我的第一個網頁。</p> </body> </html>

🔍 各部分的作用

1️⃣ <!DOCTYPE html>

  • 是什麼:告訴瀏覽器「這是 HTML5 格式」
  • 名字的意思:
    • DOC = Document(文件)
    • TYPE = Type(類型)
    • DOCTYPE = 文件類型
  • 為什麼:不寫的話,瀏覽器可能用舊規則解讀,排版會跑掉
  • 怎麼用:照抄,放在第一行,不用改

2️⃣ <html>...</html>

  • 是什麼:整個網頁的「大箱子」或「大盒子」,所有東西都要放在裡面
  • 為什麼:瀏覽器才知道「從這裡開始、到這裡結束」
  • 怎麼用:把所有內容包在裡面

3️⃣ <head>...</head>

  • 是什麼:網頁的「設定區」(使用者看不到,但很重要)
  • 放什麼:標題、字典設定、CSS 連結、給搜尋引擎看的資訊
  • 比喻:像書的「版權頁」,讀者不看,但出版社需要

4️⃣ <body>...</body>

  • 是什麼:網頁的「內容區」(使用者看到的所有東西)
  • 放什麼:文字、圖片、按鈕、影片...所有你要展示的東西
  • 比喻:像書的「內文」,這才是重點

🔬 第三部分:逐行詳解 <head> 裡的內容

🌍 <html lang="zh-TW"> 或 <html lang="en">

是什麼?

告訴瀏覽器「這個網頁用什麼語言寫的」

為什麼要寫?

  • 幫助翻譯:瀏覽器可以問你「要不要翻譯成中文?」
  • 幫助朗讀:螢幕朗讀軟體(給視障朋友用的)會用正確的發音
  • 幫助搜尋引擎:Google 知道這頁是中文還是英文

怎麼用?

  • 中文網站 → <html lang="zh-TW"> (TW = 台灣)
  • 英文網站 → <html lang="en"> (en = English)
✏️ 小練習: 做一個中文網站,就寫 lang="zh-TW";如果是英文教學網站,就寫 lang="en"

🔤 <meta charset="UTF-8" />

是什麼?

告訴瀏覽器「這頁用 UTF-8 字典」

為什麼要寫?

  • 沒有它,中文、表情符號常會變亂碼 😱 → ??????
  • UTF-8 是全世界通用的字典,包含中文、日文、emoji、各種符號

怎麼用?

  • 照抄這一行
  • 一定要放在 <head> 最前面(愈前面愈不會出錯)
✏️ 小練習: 在網頁打上「測試:你好 👋」,存檔後正常顯示就對了

📱 <meta name="viewport" content="width=device-width, initial-scale=1" />

是什麼?

定義瀏覽器的「畫布」有多寬,讓手機版網頁正常顯示

拆解說明:

  • width=device-width:畫布寬度 = 裝置的螢幕寬度
  • initial-scale=1:開啟網頁時不要自動縮放

為什麼要寫?

❌ 沒有這行的話:

  • 手機會假裝自己是電腦(螢幕很寬,約 980px)
  • 結果字超小、要一直放大縮小才能看

✅ 有這行的話:

  • 手機知道「我就是手機」(螢幕寬 375px)
  • RWD(響應式設計)才會正常啟動

怎麼用?

照抄這一行,不要加 user-scalable=no(會讓人無法放大網頁,對視力不好的人很困擾)

✏️ 小練習: 寫一個 CSS:
@media (max-width: 600px) { body { background: lightgreen; } }
用手機看,背景會變綠色 → 代表 viewport 有生效!

📑 <title>我的網頁</title>

是什麼?

瀏覽器分頁上的標題(那個小標籤的文字)

為什麼要寫?

  • 方便使用者分辨「現在開了哪些分頁」
  • 加入書籤時的名稱
  • 搜尋引擎會拿來當標題

怎麼用?

每個頁面寫得清楚、簡短

  • ✅ 好例子「課程首頁｜VS Code 入門」
  • ❌ 壞例子「首頁」(太模糊)
✏️ 小練習: 改成你要的課程名,存檔後看分頁立即更新

📝 <meta name="description" content="這是一個教學網站" />

是什麼?

這個網頁的「一句話介紹」,給搜尋引擎看的(頁面上不會顯示)

為什麼要寫?

在 Google 搜尋結果裡,會顯示這段文字,讓人知道「這頁在講什麼」

📌 實際例子:
當你在 Google 搜尋「HTML 教學」,會看到這樣的結果:
【標題】HTML 基礎教學 - W3Schools
【網址】https://www.w3schools.com/html/
【描述】學習 HTML 的基礎知識,包含標籤、屬性、格式化等內容...
↑ 這段文字就是從 <meta name="description"> 來的!

沒有寫 description 的話,Google 會隨便抓一段你網頁的文字當描述,可能會很奇怪。

怎麼用?

  • 長度:50～160 個字
  • 內容:一句完整的話,講清楚這頁的重點
  • ❌ 不要亂塞關鍵字:「HTML HTML HTML 教學教學」
  • ✅ 要寫完整句子:「最簡明的 VS Code 入門教學,學會 HTML 起手式與 Live Server」
✏️ 小練習: 把描述換成你的課程介紹,之後分享連結時,很多社群平台也會抓這段文字

💡 第四部分:補充說明

🎨 什麼是 RWD(響應式網頁設計)?

一句話說清楚:
RWD = 網頁會自動變身,電腦看是一個樣子,手機看又是另一個樣子

舉例

  • 電腦螢幕(寬 1920px):文字排三欄、導覽列橫的
  • 手機螢幕(寬 375px):文字排一欄、導覽列變成漢堡選單

怎麼做到的?

用 CSS 的 @media 偵測螢幕寬度:

/* 螢幕小於 600px 時 */ @media (max-width: 600px) { .sidebar { display: none; } /* 側邊欄隱藏 */ }

為什麼要用 RWD?

現在 70% 的人用手機上網,網頁不能只做給電腦看!

🖼️ 什麼是 Viewport(視口)?

一句話說清楚:
Viewport = 瀏覽器用來「展示網頁」的畫布

比喻

想像你在畫圖:

  • 畫布 = Viewport(瀏覽器顯示區域)
  • 你畫的內容 = 網頁內容
  • 畫布大小 = CSS 用來計算「多寬、多高」的基準

為什麼重要?

CSS 的所有計算都以 Viewport 為準:

  • width: 50vw → 畫布寬度的 50%
  • @media (max-width: 600px) → 畫布寬度小於 600px 時

沒有設定 viewport 會怎樣?

手機會假裝畫布很寬(980px),結果:

  • 字超小
  • 要一直捏放才能看
  • RWD 斷點失效

📌 第五部分:最短小抄(背起來!)

🎯 HTML 起手式記憶口訣

DOCTYPE 告訴瀏覽器版本
html 包住全部內容
head 是設定區(看不見)
body 是內容區(看得見)

📊 <head> 五行記憶表

標籤 作用 一句話
lang="zh-TW" 語言設定 告訴瀏覽器這頁是中文
charset="UTF-8" 字典設定 中文不亂碼
viewport 畫布設定 手機版網頁會正常顯示
<title> 分頁標題 瀏覽器分頁上的文字
description 頁面介紹 搜尋引擎的摘要

🚀 三個一定要記住的事

  1. charset 要放最前面,不然中文會亂碼
  2. viewport 不能少,不然手機版會爆掉
  3. 每個頁面都要有 <title>,不然分頁會顯示「無標題」

🎓 總複習:完整範例

<!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>我的第一個網頁｜HTML 入門</title> <meta name="description" content="這是一個 HTML 入門教學網站,適合小學生學習。" /> </head> <body> <h1>歡迎來到我的網站!</h1> <p>這是我用 HTML 做的第一個網頁 🎉</p> </body> </html>

✅ 檢查清單

🎉 全部打勾 ✅ = 你的 HTML 起手式超標準!

❓ 常見問題

Q1:為什麼要寫這麼多看不見的東西?

A:就像蓋房子要打地基,雖然看不見,但沒有地基房子會倒。<head> 就是網頁的地基!

Q2:我可以不寫 viewport 嗎?

A:可以,但手機版網頁會超難看,字會超小。現在 70% 的人用手機上網,一定要寫!

Q3:lang="en" 和 lang="zh-TW" 差在哪?

A:差在瀏覽器的翻譯功能、螢幕朗讀的發音。中文網站一定要寫 "zh-TW",不然朗讀軟體會用英文發音念中文字(超怪)。

Q4:我把 charset 放在後面會怎樣?

A:可能前面幾個中文字會變亂碼,所以一定要放在 <head> 最前面!

Q5:UTF-8 跟 utf-8 有差嗎?

A:沒差!大小寫都可以,但習慣上都寫大寫 UTF-8。

✏️ 實戰練習

練習 1:做一個自我介紹網頁

要求:

  • 用完整的 HTML 起手式
  • lang 設成中文
  • <title> 寫「我的自我介紹」
  • description 寫一句介紹自己的話
  • <body> 裡放:
    • 大標題:你的名字
    • 段落:介紹你的興趣

範例:

<!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>我的自我介紹｜小明</title> <meta name="description" content="我是小明,喜歡畫畫和打籃球。" /> </head> <body> <h1>大家好,我是小明!</h1> <p>我喜歡畫畫和打籃球,最喜歡的顏色是藍色。</p> </body> </html>

練習 2:檢查錯誤

下面這個 HTML 有 5 個錯誤,你能找出來嗎?

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="UTF-8" /> <title>錯誤範例 </head> <body> <h1>這是標題</h1> <p>這是內容 </body> </html>
點我看答案 👇
  1. ❌ <html> 沒有寫 lang 屬性 → ✅ 應該寫 <html lang="zh-TW">
  2. ❌ charset 沒有放在最前面 → ✅ 應該放在 viewport 之前
  3. ❌ <title> 沒有結束標籤 → ✅ 應該寫 </title>
  4. ❌ <p> 沒有結束標籤 → ✅ 應該寫 </p>
  5. ❌ 沒有 description → ✅ 應該加上描述

🏆 恭喜你!

看完這份教學,你已經:

  • ✅ 知道 HTML 是什麼
  • ✅ 會寫完整的 HTML 起手式
  • ✅ 理解每一行的意義
  • ✅ 知道 RWD 和 Viewport 是什麼
  • ✅ 能夠自己檢查 HTML 有沒有寫對

📝 下一步

  1. 實際動手做:打開 VS Code,把起手式打一遍
  2. 存成 .html 檔案:例如 index.html
  3. 用瀏覽器打開:雙擊檔案,看看效果
  4. 試著修改內容:改標題、改文字,看看變化
💡 記住: 程式是做出來的,不是看出來的!現在就開始動手吧!💪

📖 名詞對照表

中文 英文 說明
超文本標記語言 HTML (HyperText Markup Language) 網頁的骨架
標籤 Tag 用來標記內容的符號,如 <p>
屬性 Attribute 標籤裡的設定,如 lang="zh-TW"
響應式網頁設計 RWD (Responsive Web Design) 網頁會自動適應不同螢幕
視口 Viewport 瀏覽器用來顯示網頁的畫布
字元編碼 Character Encoding 讓電腦知道怎麼顯示文字
元資料 Meta Data 關於網頁的資訊(放在 <head> 裡)