CHAPTER 01 / FOUNDATION

HTML：
網頁的骨頭

你看的這個網頁、滑的 IG、逛的蝦皮，全部都是 HTML 蓋出來的。不會 HTML 就不要說自己會前端。但別緊張，HTML 是三個技術裡最簡單的，一個下午就能搞懂。

看懂任何網頁的原始碼結構
從零寫出一個五頁的個人網站
做出聯絡表單、相簿、文章列表頁
讓 Google 找得到你的網站（SEO 基礎）
讓視障使用者也能用你的網站（無障礙基礎）

LESSON 1.1

網頁到底是什麼東西？

你打開瀏覽器（Chrome、Safari、Edge），輸入網址，看到網頁。中間到底發生什麼事？

很簡單：你的瀏覽器跑去某台伺服器（24 小時開機的電腦）跟它說「欸給我那個網頁」，伺服器就回傳一份文字檔給你的瀏覽器。瀏覽器讀那份文字檔，把它畫成你看到的樣子。

就像你跟便當店打電話訂便當。你說「老闆，給我一個雞腿便當」，老闆照單做給你。網址是電話、伺服器是便當店、HTML 是那個便當。

那份文字檔就是 HTML。所以 HTML 不是程式語言，是一種標記語言（Markup Language），用一堆標籤把文字包起來，告訴瀏覽器「這段是標題」、「這段是圖片」、「這段是按鈕」。

你的第一個 HTML

新建檔案叫 index.html，貼下面這段，瀏覽器打開（雙擊就行）：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>我的第一個網頁</title>
</head>
<body>
  <h1>哈囉世界</h1>
  <p>這是我寫的第一個網頁。</p>
</body>
</html>

瀏覽器顯示：

index.html

恭喜，你已經是寫過網頁的人了。

標籤的長相

HTML 標籤長這樣：<標籤名>內容</標籤名>。前面的叫開始標籤，後面有 / 的叫結束標籤，中間就是內容。

<h1>標題</h1> — 一級標題（最大）
<p>一段文字</p> — 段落
<a href="...">連結文字</a> — 超連結

有些標籤是單身的，沒有結束標籤，叫自閉合標籤，例如 <img>、<br>、<input>。

新手最常忘記寫結束標籤。<p>這段 沒有 </p> 收尾，瀏覽器會猜，但通常猜歪。有開就要有關，這是基本禮貌。

LESSON 1.2

HTML 文件的標準骨架

每個 HTML 檔長得差不多，就像每個人都有頭跟身體：

<!DOCTYPE html>          // 跟瀏覽器說「我是 HTML5」
<html lang="zh-Hant">     // 整份檔案的最外層
  <head>                 // 頭：給瀏覽器看的（不會顯示）
    <meta charset="UTF-8">
    <title>網頁標題</title>
  </head>
  <body>                 // 身體：使用者看得到的
    ...
  </body>
</html>

head 必備清單

<meta charset="UTF-8"> — 字元編碼。沒寫的話中文變亂碼。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> — 手機顯示用，沒寫網站在手機上會超小。
<title> — 瀏覽器分頁上的字。
<meta name="description" content="..."> — 給 Google 看的網頁描述。
<link rel="stylesheet" href="style.css"> — 引入 CSS。
<script src="app.js" defer></script> — 引入 JS。

接案時客戶常常會丟一句「我們網站在 Google 搜不到」。第一件事就是檢查 head 裡有沒有 title 跟 meta description。十次有八次是這個問題。

LESSON 1.3

常用文字標籤

標題：h1 ~ h6

網頁有不同層級的標題，就像書有章、節、段。h1 最大，h6 最小。

<h1>大標題（一頁通常一個）</h1>
<h2>章</h2>
<h3>節</h3>
<h4>小節</h4>

不要因為「h2 字太大」就跳去用 h4。標題大小是 CSS 管的，HTML 標籤決定的是結構。跳級用標題會讓 SEO 跟無障礙閱讀器爆炸。

段落、換行、強調

<p>這是一段文字。</p>
<p>這是<strong>很重要</strong>的話，
這是<em>需要強調</em>的字。</p>
<p>第一行<br>第二行</p>
<hr>  // 分隔線

清單：ul / ol / li

<ul> = 無序清單（圓點）
<ol> = 有序清單（1, 2, 3）
<li> = 清單裡的每一項

<ul>
  <li>雞腿便當</li>
  <li>排骨便當</li>
  <li>滷肉飯</li>
</ul>

連結：a

// 連到別的網站
<a href="https://google.com">去 Google</a>

// 連到同網站其他頁
<a href="about.html">關於我</a>

// 開新分頁
<a href="https://..." target="_blank" rel="noopener">新分頁</a>

// 撥電話 / 寄信
<a href="tel:0912345678">打給我</a>
<a href="mailto:me@x.com">寄信</a>

target="_blank" 一定要配 rel="noopener"！沒寫的話新開的頁面可以透過 window.opener 操控原頁面，釣魚網站就是這樣騙你的。

圖片：img

<img src="cat.jpg" alt="我的貓在睡覺" width="400" loading="lazy">

alt 是「圖片載不出來時顯示的文字」，也是給視障使用者讀的。loading="lazy" 讓圖片捲到附近才載入，網站變快。

每張 <img> 都要寫 alt。客戶網站的 SEO 分數有一大半看你 alt 寫得好不好。Lighthouse 少一個 alt 就扣分。

LESSON 1.4

div / span 跟語意化標籤

<div> 跟 <span> 是 HTML 裡最沒個性的兩個標籤，作用就是把東西包起來，沒任何意義。

<div> = 區塊級（獨佔一行）
<span> = 行內級（不換行）

為什麼不全部用 div 就好？

技術上你可以全部用 div，網頁也跑得起來。但有兩個問題：

Google 看不懂你的網站。整頁都是 div 像一本只有「章節章節」沒寫內容的書。
視障使用者沒辦法用。讀屏軟體靠標籤的「意義」導讀。

HTML5 給了我們語意化標籤：

標籤	意思	用途
`<header>`	頁首	logo、導覽
`<nav>`	導覽	選單那塊
`<main>`	主內容	頁面核心，一頁一個
`<section>`	區段	有獨立主題的一塊
`<article>`	文章	可獨立存在的內容
`<aside>`	側邊	側欄、相關連結
`<footer>`	頁尾	版權、聯絡方式

把 div 想成牛皮紙袋，什麼都能裝但外面看不出裡面是什麼。語意化標籤是上面寫了「便當」、「飲料」、「餐具」的紙袋，外送員一看就知道。

<body>
  <header>
    <h1>我的部落格</h1>
    <nav>
      <a href="/">首頁</a>
      <a href="/about">關於</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>第一篇文章</h2>
      <p>內容...</p>
    </article>
  </main>

  <footer>
    <p>© 2026 我的部落格</p>
  </footer>
</body>

LESSON 1.5

表單：怎麼讓使用者輸入

登入、註冊、訂購、聯絡我們，全部都是表單。寫對寫錯差異就是「客戶覺得你很專業」跟「客戶覺得你新手」。

<form action="/submit" method="POST">

  <label for="name">姓名</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email">

  <label for="msg">訊息</label>
  <textarea id="msg" name="msg" rows="5"></textarea>

  <button type="submit">送出</button>

</form>

input 的 type

type	用途
`text`	一般文字
`email`	email（手機跳出 @ 鍵盤）
`tel`	電話（跳出數字鍵盤）
`password`	密碼（自動 ●●●）
`number`	數字
`date`	日期（跳出日曆）
`checkbox`	勾選框
`radio`	單選
`file`	選檔案
`color`	選顏色
`range`	滑桿

label 的 for 一定要對應 input 的 id。這樣使用者點 label 自動 focus 到 input。沒做的網站用了會煩。

表單驗證屬性

required — 必填
minlength="6" — 至少 6 字元
maxlength="20" — 最多 20 字元
min="0" max="100" — 數字範圍
pattern="[0-9]{10}" — 自訂格式（正規表示式）
placeholder="王小明" — 提示文字
autocomplete="email" — 自動填入提示

LESSON 1.6

id、class、屬性

每個標籤都可以加屬性，格式 名稱="值"：

<div id="hero" class="big red" data-user="123">
  ...
</div>

id vs class

id 是身分證：一頁只能有一個。同 id 不能用兩次。
class 是貼紙：一個元素可貼很多張，很多元素可貼同張。

身分證字號全班只有你是 A123456789，但「男生」、「戴眼鏡」、「住台北」這些 class 標籤可以同時貼在很多人身上。

data-* 自訂屬性

想存資料在 HTML 又不想搞奇怪？用 data- 開頭，後面 JS 可以拿來用。

<button data-product-id="42" data-price="299">
  加入購物車
</button>

LESSON 1.7

SEO 與無障礙基礎

會做網頁的人多，會做「Google 找得到、誰都能用」的網頁的人不多。這個差距就是你接案多收三成價的原因。

SEO 必做清單

每頁都有獨特的 title，30 字以內
每頁都有 meta description，70~150 字
一頁只有一個 h1，且包含關鍵字
圖片都有 alt
連結文字描述清楚，不要寫「點我」
使用語意化標籤（header、main、article）
網站速度快（圖片壓縮、用 webp）
RWD（手機要看得順）

無障礙必做清單（a11y）

圖片有 alt
表單 input 都有對應 label
顏色對比夠（白底配淺灰字會被罵）
能用鍵盤操作（Tab 鍵走得到所有按鈕）
影片有字幕
圖示按鈕加 aria-label="關閉"

把這兩張清單變成「交件檢查表」，每次交件前自己跑一遍。客戶不會懂這些是什麼，但會覺得你交出來的東西「就是不一樣」。

練習：個人介紹頁

不准用 CSS，只用 HTML，做一個介紹自己的頁面，要包含：

網頁標題（瀏覽器分頁顯示你的名字）
大頭照（用 https://placehold.co/200 代替）
h1 寫名字、h2 寫一句自我介紹
無序清單寫五個興趣
聯絡表單（姓名、email、訊息、送出）
footer 放 IG、Email 連結
整頁用 header / main / footer 包好

做完丟到瀏覽器打開看看。能跑就過關。

常見卡關 FAQ

// HTML 學員最常問的問題

為什麼我的中文變亂碼？

因為 head 裡沒寫 <meta charset="UTF-8">。加上去就好。或檔案存檔時編碼選錯，VS Code 右下角可以改。

瀏覽器顯示我的 HTML 原始碼，沒有變網頁？

檔名要是 .html 結尾。如果你存成 index.html.txt 就會被當文字檔。Windows 預設隱藏副檔名，要在「檢視」打開「副檔名」。

圖片放在資料夾裡顯示不出來？

路徑問題。src="img/cat.jpg" 是「同層的 img 資料夾裡的 cat.jpg」。src="../cat.jpg" 是「上一層的 cat.jpg」。src="/img/cat.jpg" 是「網站根目錄的 img/cat.jpg」。新手最常路徑寫錯。

表單按了送出沒反應？

兩種可能：(1) action 設定的網址不存在，所以送了沒人接；(2) 沒有後端可接資料。學習階段可以先用 Formspree 這類免費服務。

什麼時候用 ul、什麼時候用 ol？

順序重要用 ol（食譜步驟、排行榜），順序不重要用 ul（興趣清單、商品列表）。導覽列雖然 ul 看起來奇怪但業界慣例就是 <nav><ul> 包一堆 <li><a>。

← 回

首頁

02 CSS