新手第二步：HTML 入門　3 分鐘掌握網頁設計的骨架！

Sun, 28 Dec 2025 00:00:00 +0000

如果你想學做網頁，第一個要認識的就是 HTML。別把它想得太複雜，它其實就是幫網頁內容「貼標籤」而已！

1. 什麼是 HTML？

HTML 的全名是超文本標記語言。簡單來說，它就像是一份**「網頁的說明書」**。

想像你在蓋房子：

HTML 就是「鋼筋」與「牆壁」，決定哪裡是門、哪裡是窗戶（決定結構）。
CSS 就是「油漆」與「家具」，決定房子好不好看（決定外觀）。

2. 標籤（Tag）：HTML 的基本組成

寫 HTML 的過程，就是把文字用**「標籤」**包起來。標籤通常是成對的，像是一對括號：

<標籤名稱> 內容 </標籤名稱>

<h1>內容</h1>：這是大標題。
<p>內容</p>：這是普通的段落文字。
<a>內容</a>：這是超連結。

3. 網頁的基本長相

每一張網頁都有一個標準的「骨架」，你可以直接複製這段代碼到 VS Code 試試看：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!DOCTYPE html>
<html>
<head>
 <title>我的第一個網頁</title>
</head>
<body>
 <h1>哈囉，世界！</h1>
 <p>這是我用 HTML 寫的第一句話。</p>
 <a href="[https://google.com](https://google.com)">點我連到 Google</a>
</body>
</html>

4. 三個最常用的標籤

新手只要先記住這三個，就能做出最基本的網頁了：

標題標籤 (<h1> 到 <h6>)：<h1> 是最重要的標題（通常一頁只有一個），<h6> 是層級最小的標題。
圖片標籤 (<img>)：用來在網頁中放入照片或圖示。
- 範例：<img src="圖片網址">
超連結標籤 (<a>)：網頁的靈魂！用來連到別的網站或是自己的其他頁面。
- 範例：<a href="網址">點我開啟新視窗</a>

5. 為什麼要學 HTML？

很多人問：「現在排版軟體這麼多，為什麼還要學寫代碼？」原因有這三個：

它是所有網頁的基礎：不管是專業工程師還是數位行銷，看不懂 HTML 就無法深入調整網頁內容。
容易上手：HTML 沒有複雜的數學邏輯，只要像填空一樣把內容塞進標籤裡，成就感很高。
即時回饋：這是學習程式最快樂的地方——寫完存檔，回到瀏覽器重新整理，你剛才寫的東西就會立刻跳出來！

6. 深入一點點：標籤裡的「小祕密」

剛才提到了標籤，但標籤其實可以攜帶更多「額外資訊」，我們稱之為 屬性 (Attributes)。

屬性怎麼寫？

屬性永遠寫在「開頭標籤」裡面，長得像這樣：屬性名稱="屬性值"。

以圖片 <img> 為例：
1

<img src="my-dog.jpg" alt="我的小狗在公園跑步">
- src (source)：告訴瀏覽器圖片在哪裡。
- alt (alternative text)：萬一圖片跑不出來，顯示這段文字告訴使用者這本來是什麼。
以超連結 <a> 為例：
1

<a href="[https://google.com](https://google.com)" target="_blank">另開視窗去搜尋</a>
- target="_blank"：這是一個超實用的屬性，可以讓連結在「新分頁」開啟，不會把原本的網頁蓋掉。

7. 寫 HTML 的好習慣：語意化

雖然 HTML 標籤很多，但不要因為想讓字變大就亂用 <h1>。

SEO (搜尋引擎優化)：如果你正確使用標籤（例如文章內容用 <p>，主標題用 <h1>），Google 的機器人會更喜歡你的網站。
閱讀順序：對視障人士來說，正確的標籤能讓語音朗讀軟體順利讀出網頁內容。

8. 給新手的實戰練習

看完文章，不動手寫是學不會的！請跟著以下步驟做：

打開 VS Code。
新建檔案，存檔為 practice.html。
輸入 ! 並按 Tab 鍵（這是 VS Code 的神奇快捷鍵，會幫你生出骨架）。

在 <body> 標籤中間加入以下內容：

1
2
3
4
5


<h1>我的自我介紹</h1>
<p>大家好，我正在學習網頁開發！</p>
<img src="[https://via.placeholder.com/150](https://via.placeholder.com/150)" alt="測試圖片">
<br>
<a href="[https://facebook.com](https://facebook.com)">我的臉書</a>

存檔並用瀏覽器打開檔案，看看你的成品！

結語：你已經邁出第一步了！

HTML 是網頁世界的敲門磚。雖然現在看起來只是黑白文字，但只要你掌握了這些「標籤」的邏輯，你已經贏過一半以上的人了。

接下來你可以做什麼？ 當你覺得黑白網頁太單調時，就是學習 CSS (樣式表) 的時候了！CSS 會教你怎麼把字變顏色、怎麼排版、怎麼讓網頁看起來像專業公司做的。

準備好進入色彩繽紛的網頁世界了嗎？我們下一篇見！

HTML on EricChung的程式勇者村

新手第二步：HTML 入門 3 分鐘掌握網頁設計的骨架！