Why：為什麼 HTML 與 CSS 需要分開學？

新手最常見的困惑，是把「內容結構」和「外觀樣式」混在一起。其實 HTML 與 CSS 的責任完全不同： HTML 負責定義頁面裡有什麼，CSS 負責定義它們看起來怎樣。先分清楚這兩者，之後再學 JavaScript 或框架才不會混亂。

HTML 像骨架

它決定這頁有標題、段落、圖片、連結、表格、表單、區塊等結構。

CSS 像外觀與排版

它決定字體、顏色、間距、大小、欄位排列、卡片風格與響應式版面。

JavaScript 像互動行為

它處理點擊、輸入、資料更新與 DOM 改變，讓畫面變得可互動。

學習策略

先理解 HTML / CSS，再學 DOM 與 JavaScript，最後再進入框架，會更有脈絡。

What：三種前端技術的角色分工

技術	主要角色	常見語法	你會看到的結果
HTML	定義內容結構與語意	`<h1>`、`<p>`、`<a>`、`<section>`	頁面有哪些區塊與元素
CSS	控制樣式、排版與視覺效果	`.card { ... }`、`display: flex;`	畫面好不好看、排版是否整齊
JavaScript	控制互動與邏輯	`addEventListener()`、`fetch()`	按鈕點擊、內容切換、資料更新

flowchart LR A[Server 回傳 HTML] --> B[Browser 建立 DOM] B --> C[載入 CSS] B --> D[執行 JavaScript] C --> E[形成畫面] D --> E

DOM 是什麼？ DOM（Document Object Model）是瀏覽器把 HTML 解析後建立的一棵文件樹。之後 CSS 會套用到這棵樹上，JavaScript 則可以操作這棵樹；下一章會用實際範例拆解這件事。

第一次做網頁，先學最常用的 5 個標籤

如果你是第一次接觸 HTML，不需要先把所有標籤背起來。先掌握 h1、p、div、a、button，就已經能做出第一個簡單頁面。

標籤	你可以拿來做什麼	最小語法
`<h1>`	主標題	`<h1>課程首頁</h1>`
`<p>`	段落說明	`<p>這是一段介紹文字。</p>`
`<div>`	把一組內容包成區塊	`<div>...</div>`
`<a>`	建立連結	`<a href="#lesson">查看課程</a>`
`<button>`	放置可點擊操作	`<button>開始學習</button>`

只用 5 個標籤做第一個頁面

這個例子故意很簡單，目的是讓你先有「我做得出來」的成就感。

<div>
  <h1>AI 與 Web 入門</h1>
  <p>先學會 HTML、CSS、DOM 與 Web server 的基本觀念。</p>
  <a href="#lesson-list">查看章節</a>
  <button>開始學習</button>
</div>

div 只是先把內容包在一起，之後就能一起套用樣式。
h1 與 p 已經足以做出標題與介紹文字。
a 與 button 讓頁面從純文字變成可操作介面。

學習策略： 先會用這 5 個標籤做出第一頁，後面的表格再當查表工具，不需要一開始就全部背起來。

HTML 基本語法：先看完整文件骨架

在學個別標籤前，先認識一份 HTML 文件最基本的結構。這就像一篇作文要有標題、段落與內容區一樣，HTML 也有固定骨架。

一份最基本的 HTML 文件

這是日後所有頁面的起點，理解它就能知道每個標籤在文件中的位置。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的第一個網頁</title>
</head>
<body>
  <h1>Hello HTML</h1>
  <p>這是第一段內容。</p>
</body>
</html>

<!DOCTYPE html> 告訴瀏覽器這是一份 HTML5 文件。
<html> 是整份文件的根元素，lang 屬性可以告訴瀏覽器頁面語言。
<head> 放的是設定資訊，不直接顯示在頁面中。
<body> 才是使用者真正會看到的內容區。

HTML 文件與中繼標籤詳解

標籤	基本語法	用途	說明與注意事項
`<!DOCTYPE html>`	`<!DOCTYPE html>`	宣告文件型別	通常放在第一行，讓瀏覽器用標準模式解析。
`<html>`	`<html lang="zh-Hant">...</html>`	整份 HTML 文件的根元素	`lang` 有助於搜尋引擎與輔助工具理解語言。
`<head>`	`<head>...</head>`	放置中繼資訊	例如標題、字元編碼、樣式表、腳本連結。
`<meta>`	`<meta charset="utf-8">`	設定文件資訊	常見用途是字元編碼與 viewport。這是 void element，不需要結尾標籤。
`<title>`	`<title>網站標題</title>`	設定瀏覽器分頁標題	也會影響搜尋結果顯示文字。
`<link>`	`<link rel="stylesheet" href="style.css">`	連結外部資源	最常見用途是引入 CSS 檔案。也是 void element。
`<script>`	`<script src="app.js" defer></script>`	載入 JavaScript	`defer` 代表先解析 HTML，再執行腳本。
`<body>`	`<body>...</body>`	顯示內容的主區域	所有會出現在頁面上的標題、段落、圖片、表格多半都在這裡。

標籤	基本語法	用途	補充說明
`<h1> ~ <h6>`	`<h1>主標題</h1>`	標題層級	`h1` 最重要，數字越大層級越低，不只是字變小而已。
`<p>`	`<p>段落文字</p>`	一般段落	適合放敘述文字，瀏覽器會自帶上下間距。
`<strong>`	`<strong>重要</strong>`	強調重要內容	預設常以粗體呈現，但語意重點是「重要」。
`<em>`	`<em>語氣強調</em>`	語氣強調	預設常以斜體呈現，語意與 `strong` 不同。
`<span>`	`<span>行內文字</span>`	行內區塊	常用來搭配 CSS 對一句話中的局部內容加樣式。
`<div>`	`<div>區塊內容</div>`	一般區塊容器	本身沒有特殊語意，但方便分組與排版。
`<br>`	`<br>`	換行	是 void element，適合短句換行，不要拿來替代段落。
`<hr>`	`<hr>`	水平分隔線	適合區隔段落或主題。

HTML 連結、圖片、清單與媒體標籤

標籤	基本語法	用途	關鍵屬性
`<a>`	`<a href="https://example.com">前往網站</a>`	建立超連結	`href` 是目標網址；`target="_blank"` 可開新分頁。
`<img>`	`<img src="photo.jpg" alt="範例圖片">`	顯示圖片	`src` 指定來源，`alt` 是替代文字，對無障礙很重要。
`<ul>`	`<ul><li>項目</li></ul>`	無序清單	常用於選單、重點條列。
`<ol>`	`<ol><li>步驟一</li></ol>`	有序清單	適合流程與步驟說明。
`<li>`	`<li>清單項目</li>`	清單項目	要放在 `ul` 或 `ol` 裡面。

HTML 語意化區塊：讓頁面更有結構

除了 div 之外，HTML5 提供了一批更有語意的區塊標籤，讓人與機器都更容易理解頁面結構。

標籤	用途	典型位置
`<header>`	頁首區	網站標題、Logo、頁首資訊
`<nav>`	導覽區	主選單、麵包屑、頁面連結
`<main>`	頁面主要內容	每頁最重要、最核心的內容
`<section>`	主題區塊	一章、一段主題內容
`<article>`	獨立內容單元	文章、卡片、貼文、新聞
`<aside>`	側邊補充資訊	側欄、補充欄、推薦閱讀
`<footer>`	頁尾區	版權、聯絡資訊、頁尾導覽

語意化頁面骨架範例

下面這個例子可作為網站版面的通用骨架。

<header>網站標題</header>
<nav>首頁 / 課程 / 聯絡</nav>
<main>
  <section>
    <article>第一篇內容</article>
  </section>
</main>
<footer>版權資訊</footer>

這些標籤讓頁面不只「能顯示」，也更容易被搜尋引擎與輔助技術理解。
若只是單純為了排版，div 仍可使用；但有明確語意時，優先使用語意化標籤。

HTML 常見屬性：標籤上的附加設定

標籤本身定義元素類型，屬性（attribute）則補充元素的設定。常見格式是 名稱="值"。

屬性	常見搭配	用途
`class`	大多數標籤	讓 CSS / JavaScript 可以選取一群元素。
`id`	大多數標籤	給元素唯一識別名稱，常用於 JS 與頁內連結。
`href`	`<a>`	設定連結目標。
`src`	`<img>`、`<script>`	設定外部資源來源。
`alt`	`<img>`	圖片無法顯示時的替代文字，也影響無障礙。
`type`	`<input>`、`<button>`	指定輸入框或按鈕型態。
`placeholder`	`<input>`、`<textarea>`	顯示提示文字。

HTML 表單與表格標籤

表單常見標籤

<form>：包住整份表單。
<label>：欄位說明文字。
<input>：單行輸入框。
<textarea>：多行輸入。
<select> / <option>：下拉選單。
<button>：提交或操作按鈕。

表格常見標籤

<table>：整張表格。
<thead>：表頭區。
<tbody>：資料區。
<tr>：列。
<th>：標題儲存格。
<td>：資料儲存格。

CSS 基本語法：一條樣式規則長什麼樣子？

CSS 規則的基本結構

每一條 CSS 規則都由「選擇器 + 宣告區塊」構成。

selector {
  property: value;
  property: value;
}

/* 範例 */
h1 {
  color: #1d4ed8;
  font-size: 32px;
}

這是一個藍色大標題

selector：要選哪個元素。
property：要改哪個樣式屬性。
value：要改成什麼值。
每條屬性建議以分號結尾，便於維護與擴充。

CSS 選擇器完整入門

類型	語法	用途	範例說明
元素選擇器	`p`	選取所有同類型標籤	`p { color: gray; }` 會套用到所有段落。
類別選擇器	`.card`	選取 class 為 card 的元素	最常用於共用樣式。
ID 選擇器	`#banner`	選取 id 為 banner 的元素	通常一頁只對應一個元素。
後代選擇器	`.card p`	選取 card 裡面的所有 p	常用於限定範圍。
群組選擇器	`h1, h2, h3`	同時套用多種元素	適合統一標題樣式。
Pseudo-class	`a:hover`	選取特殊狀態	例如滑鼠移上去時改顏色。

CSS 常見屬性：先學最常用的四大類

類別	常見屬性	用途
文字與顏色	`color`、`font-size`、`font-weight`、`line-height`、`text-align`	控制字的顏色、大小、粗細、行高與對齊。
盒模型	`width`、`height`、`margin`、`padding`、`border`	控制元素大小與內外距離。
背景與裝飾	`background`、`border-radius`、`box-shadow`	控制背景色、圓角、陰影與視覺層次。
版面配置	`display`、`position`、`flex`、`grid`、`gap`	控制區塊如何排列、對齊與響應式調整。

CSS 單位與顏色表示法

常用長度單位

px：像素，最直覺。
%：相對於父元素比例。
rem：相對於根字級，適合整體縮放。
vh / vw：相對於視窗高寬。

常用顏色寫法

#2563eb：十六進位色碼。
rgb(37, 99, 235)：RGB。
rgba(37, 99, 235, 0.2)：含透明度。
hsl(217, 82%, 54%)：以色相、飽和度、亮度表示。

CSS 盒模型（Box Model）

每個 HTML 元素都可以想成一個盒子，而盒子通常由 content → padding → border → margin 四層組成。如果你不知道元素為什麼看起來太擠、太寬或沒對齊，通常問題就在盒模型。

flowchart LR A[content 內容] --> B[padding 內距] B --> C[border 邊框] C --> D[margin 外距]

盒模型範例

同一個元素的大小，常常不只由 width 決定。

.box {
  width: 220px;
  padding: 20px;
  border: 4px solid #2563eb;
  margin: 16px;
  background: #dbeafe;
}

這是一個盒模型範例

內容寬度是 220px，但實際占位還要加上 padding、border、margin。
這也是為什麼排版常需要搭配 box-sizing: border-box; 使用。

CSS 版面語法：Flexbox 與 Grid

技術	常見語法	適合情境
Flexbox	`display: flex;`、`justify-content`、`align-items`、`gap`	一維排列：一列卡片、工具列、按鈕列
Grid	`display: grid;`、`grid-template-columns`、`gap`	二維排列：卡片牆、儀表板、首頁分欄

Flexbox 橫向排列卡片

這是最常用的版面語法之一，很適合教學網站與導覽列。

.card-row {
  display: flex;
  gap: 16px;
}

.card-row article {
  flex: 1;
  padding: 16px;
  border-radius: 14px;
  background: #eef4ff;
}

display: flex 讓子元素排成一列或一欄。
gap 是元素之間的間距。
flex: 1 代表每個子元素平均分配空間。

CSS 響應式語法：為什麼同一頁在手機與桌機不一樣？

響應式設計（Responsive Design）的核心，是讓畫面依螢幕尺寸調整。最常見的做法是使用 @media 條件判斷。

Media Query 範例

畫面寬度夠大時用兩欄，小螢幕時改為單欄。

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

桌機： 兩欄並排
手機： 改成單欄，避免內容過擠。

@media 是 CSS 中用來根據條件切換樣式的語法。
教學網站若沒有響應式調整，在手機上會很難閱讀。

HTML 與 CSS 的關係：同一份結構，不同外觀

把同一份 HTML 套上 CSS 後的差異

這組範例特別適合讓學生理解：HTML 是內容，CSS 是樣式。

<section class="notice">
  <h2>課程提醒</h2>
  <p>今天記得完成 HTML 與 CSS 練習。</p>
</section>

.notice {
  padding: 18px;
  border-left: 6px solid #2563eb;
  background: #eff6ff;
}

HTML 只描述一個提醒區塊，CSS 決定它長得像通知卡片。
日後框架做的事情，也仍然離不開這種「結構 + 樣式」的組合。

JavaScript 在這一章的位置

雖然你這次要求重點補強 HTML 與 CSS，但仍要記住：真正讓畫面產生互動的，是 JavaScript。它會操作 DOM、監聽事件、向伺服器發送請求，並把資料更新到頁面上。

學習順序建議： 先把 HTML 標籤與 CSS 基本語法學紮實，再進入 JavaScript，會更容易理解 DOM 與框架。

Practice：本章練習

練習 1：HTML 標籤辨識

請用 header、nav、main、section、footer 組出一個簡單頁面骨架。

練習 2：CSS 樣式設計

請把一個 div 改造成卡片，至少使用 padding、background、border-radius、box-shadow 四個屬性。

練習 3：選擇器比較

請說明元素選擇器、class 選擇器與 id 選擇器的差異，並各寫一個範例。

練習 4：響應式思考

如果卡片在手機上太擠，應該優先調整什麼？是 HTML 結構、CSS 版型，還是 JavaScript？

Summary：本章結論

HTML 負責結構與語意，CSS 負責外觀與版面，兩者需要分開理解。
第一次做網頁時，先學會 h1、p、div、a、button 這 5 個常用標籤最有效率。
學會文件骨架、常見屬性與 CSS 基礎後，再把後面的標籤表當查表工具使用即可。
JavaScript 與框架仍然建立在 HTML / CSS 之上，因此這一章是所有前端學習的基礎。

先把 HTML 結構與 CSS 樣式打好基礎

Why：為什麼 HTML 與 CSS 需要分開學？

HTML 像骨架

CSS 像外觀與排版

JavaScript 像互動行為

學習策略

What：三種前端技術的角色分工

第一次做網頁，先學最常用的 5 個標籤

只用 5 個標籤做第一個頁面

HTML 基本語法：先看完整文件骨架

一份最基本的 HTML 文件

HTML 文件與中繼標籤詳解

更多常見 HTML 標籤（查表用）

HTML 連結、圖片、清單與媒體標籤

HTML 語意化區塊：讓頁面更有結構

語意化頁面骨架範例

HTML 常見屬性：標籤上的附加設定

HTML 表單與表格標籤

表單常見標籤

表格常見標籤

CSS 基本語法：一條樣式規則長什麼樣子？

CSS 規則的基本結構

這是一個藍色大標題

CSS 選擇器完整入門

CSS 常見屬性：先學最常用的四大類

CSS 單位與顏色表示法

常用長度單位

常用顏色寫法

CSS 盒模型（Box Model）

盒模型範例

CSS 版面語法：Flexbox 與 Grid

Flexbox 橫向排列卡片

CSS 響應式語法：為什麼同一頁在手機與桌機不一樣？

Media Query 範例

HTML 與 CSS 的關係：同一份結構，不同外觀

把同一份 HTML 套上 CSS 後的差異

JavaScript 在這一章的位置

Practice：本章練習

練習 1：HTML 標籤辨識

練習 2：CSS 樣式設計

練習 3：選擇器比較

練習 4：響應式思考

Summary：本章結論