HTML/CSS 建站基礎概念教學手冊

Chapter 01 (Page 1-4)

導論與網站建構思維

認識網頁前端三劍客、伺服器首頁預設規則、嚴謹的檔案命名規範與標準專案目錄架構。

HTML

超文件標示語言 (結構層)

負責文件內容骨架與語意。秉持「內容優先設計」（逐步提升的第一分層），確保網頁在沒有任何樣式下依然具備完整的資訊閱讀順序。

CSS

層疊樣式表 (外觀層)

決定視覺外觀呈現、色彩搭配、排版版面、字體層次以及針對不同尺寸螢幕（RWD 響應式網頁設計）的美感轉換。

JavaScript

行為腳本 (互動層)

控制動態效果、非同步資料交互（AJAX/API）、使用者操作事件監聽以及富互動前端程式邏輯。

建站六大基礎觀念守則

守則 1

首頁檔名約定

伺服器自動搜尋特定預設檔名，目前最常用為 index。常見格式：index.html、index.htm、index.php、index.asp、index.aspx。

守則 2

內頁檔名語意命名

依照內容含義命名。例如：關於我們 about-us.html、聯絡我們 contact_us.html。若檔名含關鍵字建議使用連字符「-」，底線「_」亦為被廣泛接受的符號。

守則 3 (重大禁忌)

檔名需為羅馬字

網站根目錄中，不論網頁或圖片名稱只能用英文或數字。所有檔名均「不可有中文、空格、特殊字體」，除「_」與「-」之外不建議使用其他特殊符號。

守則 4

影像存放目錄

網站根目錄中建議建立獨立「影像存放目錄」收集網站影像檔案，業界最通用且標準的名稱即為 images 資料夾。

守則 5

樣式表檔案規劃

常使用樣式標籤命名，常用檔案為 style.css。當有多個 CSS 樣式檔案時，通常會建立 css 資料夾進行集中管理。

守則 6

腳本檔案規劃

常使用語法標籤命名，常用檔案為 script.js。當有多個 JS 檔案時，建立 script 或 js 資料夾存放共用腳本。

標準網站專案資料夾結構

/root/

網站專案名稱 (Root Directory)

images/

logo.svg / logo.png

banner.jpg

button.gif / photo.png

css/

style.css (主要樣式表)

other.css

script/ (或 js/)

script.js (主要交互腳本)

other.js

index.html (首頁 Entry)

about.html

news.html

service.html

互動工具：檔名合規性快篩檢驗

試著輸入你規劃的檔案或圖片名稱，系統將自動比對講義中的建站規範（僅限英數小寫、無空格、無中文、僅容許 - 與 _）。

輸入測試檔名：

發現不符合建站規範！

包含中文字元「首頁輪播圖」
包含半形空格空白符號
包含括號特殊符號「(1)」

建議修改為： banner-carousel-01.jpg

Chapter 02 (Page 5-8)

HTML 核心語法與文檔結構

掌握標準 HTML5 文件宣告、DOM 物件模型階層、編寫 8 大守則以及符合 RFC 4646 的 lang 語系定義規範。

HTML 撰寫 8 大注意事項

標籤 = 元素 = 容器

1. 英文小寫字

強烈建議所有標籤與屬性名稱一律採用小寫英文字（例如 <ul>、<li>）。

2. 封閉標籤

絕大多數元素需要成對的結尾標籤來封閉元素（例如 <a>...</a>），不可隨意省略。

3. 巢狀結構順序

注意巢狀標籤的對稱性與位置，先開的標籤必須後關閉（例如 <li><a></a></li>）。

4. 特定專屬屬性

不同標籤具有特定的專屬屬性（例如 <img> 的 src 與 alt）。

5. 雙引號規範

使用雙引號 "..." 設定屬性值（例如 id="box1"），避免遺漏。

6. 自帶預設樣式

多數標籤在瀏覽器中都有預設外觀（例如 h1 大字粗體、p 上下邊距），後續可透過 CSS 重置。

7. DOCTYPE 宣告

文件最頂部必須使用 <!DOCTYPE html> 定義標準 HTML5 版本。

8. 定義 UTF-8 編碼

設定國際萬用字元編碼 <meta charset="UTF-8">，徹底防止瀏覽器出現亂碼。

DOM 文件物件模型

HTML 解析後形成樹狀節點（Document Object Model），父子層次清晰分明：

document

<html>

<head> (定義區)

├── <meta> / <title>

└── <style> / <link>

<body> (視覺內容區)

├── <div> / <section>

├── <ul> ➔ <li>

├── <form> ➔ <input>

└── <script>

標準 HTML5 完整結構與註解說明

<!DOCTYPE html> <!-- 1. 文件類型宣告：告知瀏覽器採用最新 HTML5 版本 -->
<html lang="zh-Hant-TW"> <!-- 2. 根元素，並標註語系為台灣繁體中文 -->
<head>
  <!-- 網站文字編碼：國際萬用 UTF-8 -->
  <meta charset="UTF-8">
  
  <!-- (舊式可省略) 負責將 IE 瀏覽器提升至可用最新版本 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <!-- (RWD 響應式必備) 告訴瀏覽器顯示網站時的縮放基準 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>網頁標題名稱</title>
  
  <!-- CSS 樣式引入與腳本 -->
  <link rel="stylesheet" href="css/style.css">
  <style> /* 內嵌樣式 */ </style>
  <script src="script/script.js"></script>
</head>
<body>
  <!-- 網頁主體內容區 -->
  <h1>歡迎光臨</h1>
  <p>開始打造你的精美網頁！</p>
</body>
</html>

重要提示：<head> 內的資訊不會直接呈現在視覺畫面上，而是提供給瀏覽器與搜尋引擎解析。

lang 網頁語系標註標準（IETF RFC 4646 規範）

舊式 zh-TW 漸被更精確的 RFC 標記取代

在 <html lang="..."> 加入正確標註，能幫助瀏覽器選擇正確的字型渲染引擎、輔助發音工具（語音報讀）以及搜尋引擎精準判定語言地區。

繁體中文 (首選推薦)

zh-Hant-TW

臺灣使用的繁體中文

港澳繁體中文

zh-Hant-HK / MO

香港 / 澳門地區繁體

簡體中文 (通用)

zh-Hans-CN

大陸地區簡體中文

星馬簡體中文

zh-Hans-SG

新加坡簡體中文

Chapter 03 (Page 9-12)

HTML 常用標籤與語意化元素

深度剖析塊狀 (Block) 與行內 (Inline) 元素特質、豐富的文字排版語意標籤，以及超連結與三大按鈕標籤的用法辨析。

塊狀元素 (Block-level Elements)

display: block

獨占一整行寬度，後面的元素會被強制換到下一行。可自由設定寬高 (width、height)、內外距。

行內元素 (Inline Elements)

display: inline

尺寸僅包裹自身內容大小，與其他行內元素並排同一行。無法直接設定垂直上下邊距與固定高寬。

進階與特殊排版標籤完整速查典範 (Page 10-11)

點選標籤即時查看語意定義與實際瀏覽器渲染效果：

<dl>, <dt>, <dd> 描述列表

<dt> 定義術語名稱，<dd> 描述該術語內容。

咖啡: 黑色熱飲

<abbr title="..."> 縮寫標記

滑鼠懸停時會顯示 title 屬性內的完整全名。

The WHO was founded in 1948.

<blockquote> & <q> 長/短引用

<blockquote> 區塊長引用，<q> 行內短引用 (自動補引號)。

打造人與自然和諧相處的未來。

<cite> & <dfn> 作品/詞彙定義

<cite> 定義藝術或書籍名稱；<dfn> 標記專有名詞術語。

吶喊是 Edward Munch 完成的畫作。

<del>, <ins>, <s> 文字刪增狀態

<del> 刪除文本，<ins> 新增文字，<s> 標記不再正確。

最喜愛顏色是藍色紅色！~~僅剩50張票~~

<details> / <summary> 折疊手風琴

免 JS 即可實現原生原生可點擊開關的詳細資訊元件。

Epcot 中心 (點擊展開)

Epcot 是華特迪士尼世界度假區令人興奮的主題公園。

<mark>, <sub>, <sup> 亮顯與上/下標

<mark> 重點螢光筆；<sub> 下標；<sup> 上標文字。

記得買牛奶！H₂O 與 2³=8

<time> & <data> 機器可讀時間與數據

datetime / value 屬性提供爬蟲與解析引擎標準格式。

情人節 20:00 | 櫻桃番茄

<code>, <kbd>, <var> 代碼與鍵盤指令

<kbd> 代表鍵盤輸入，<code> 代表程式碼段落。

按下 Ctrl + C 複製指令。

按鈕三兄弟與超連結核心差異辨析 (Page 12)

切勿盲目濫用 <a> 做按鈕

<a href="..."> 頁面跳轉導向

常用於連結至其他網頁（站內網頁連結或外部網站連結）。

href="#" ➔ 預設跳轉且會置頂

href="javascript:;" ➔ 阻斷跳轉

<input type="button"> 表單純文字按鈕

主要用於表單相關送出或重置。只能寫入純文字值 (value)，無法在按鈕內包裹圖示或自訂 HTML 結構。

<button type="button"> 最推薦彈性容器

可容納豐富 HTML 內容（如 FontAwesome 圖示、SVG、文字結構）。支援 type="submit" 與 type="button"。

Chapter 04 (Page 13-16)

表單世界 Form & Input 完整指南

表單是收集使用者數據的核心橋樑。深入認識 form 核心屬性、完整 input 類型以及 14 大特定控制屬性。

action 屬性

資料發送後端位置

指定提交表單時將數據傳送的目的伺服器網址（如 action="/api/submit.php"）。

method 屬性

HTTP 傳輸方式

"get" 參數明文附於網址後；"post" 將資料封裝於請求主體中，安全性更高。

accept-charset 屬性

字元編碼規範

指定表單提交時所使用的編碼方式，一般設為 accept-charset="UTF-8"。

表單元件全家福與互動沙盒 (Live Form Playground)

可即時互動測試

<fieldset> 基礎資訊群組 (<legend>)

<label for="demoUser"> 使用者姓名 *

電子信箱 (type="email")

色彩 (type="color")

數值 (type="number")

滑桿 (type="range")

數值: 80

<select> 與 <optgroup> 下拉群組

<datalist> 輸入預設選單

<textarea rows="2"> 多行留言輸入

表單 Payload 數據解析 (含 name 重要性)

⚠️ 只有具備 name 屬性的欄位，提交時才會傳遞值到伺服器！

點擊「提交表單數據」查看序列化資料

常用 Attribute 特定屬性守則：

required: 必填 | autofocus: 載入自動聚焦 | readonly: 唯讀唯看 | disabled: 禁用不可點 | multiple: 支援多選/多檔

表單 Input Types 完整類型速查一覽 (Page 15)

類別	type="值"	用途與語意定義
基本 Input 類型	text	單行純文字輸入欄位（預設值）
	password	密碼欄位，字元會自動轉為黑圓點遮罩隱藏
	radio	單選按鈕（相同 name 群組中僅能單選其一）
	checkbox	核取方塊 / 複選框（可同時勾選多項）
	file	檔案上傳選擇欄位，提供瀏覽檔案功能
	submit	將表單數據提交給表單處理程式的按鈕
	reset	重置按鈕，將所有表單值還原回初始預設值
	button	標準純按鈕，供 JS 綁定點擊事件
HTML5 增強類型	color	調色盤取色器欄位
	email	電子信箱格式欄位（自帶 @ 驗證檢查）
	number	數字輸入欄位，可搭配 min, max, step
	range	水平滑塊控制條，直覺輸入範圍數值
	search	搜尋專用欄位（自帶快速清空 x 符號）
	tel	電話號碼欄位（行動裝置自動彈出撥號鍵盤）
	url	網址 URL 格式專屬欄位
	date / time	日期選擇器 / 時間選擇器
	month / week	年份與月份 / 選擇指定週與年份
	datetime-local	完整本地日期與時間聯合輸入欄位

Chapter 05 (Page 17-21)

CSS 核心機制與盒模型

理解 4 種樣式匯入途徑、絕對與相對單位深度換算、CSS 權重層疊法則、豐富選擇器大全與 Box Model 盒模型維度計算。

1. 行內樣式 (Inline)

直接在標籤上寫 style 屬性：

<p style="color: blue;">

2. 外部連結 (External)

業界最佳實務，透過 link 標籤：

<link rel="stylesheet" href="style.css">

3. 內嵌式 (Internal)

在 head 標籤內放置 style 區塊：

<style> p { color:blue; } </style>

4. @import 匯入

在 CSS 檔案中載入另一份 CSS：

@import url('font.css');

網頁常用長度單位換算與定義 (Page 19)

瀏覽器預設文字尺寸多為 16px

絕對單位 (固定尺寸)

px (像素): 固定像素尺寸大小，螢幕顯示最基本單位。
pt (點): 印刷常見單位，根據螢幕解析度計算：
• 72dpi 時：1pt = 1/72 英吋 = 1px
• 96dpi 時：1px = 0.75pt (72/96 = 0.75)

相對單位 (彈性比例)

rem: 相對於根元素 (<html>) 的字體大小。若預設 16px，則 1rem = 16px。
em: 相對於父元素的字體大小。
%: 以父容器對應數值作為百分比基準。
vw / vh: 相對於瀏覽器視窗 (Viewport) 的寬度 / 高度 (100vw = 100% 視窗寬)。

CSS 選擇器大全與權重順序 (Page 20)

!important > ID > Class > 元素 > 行數 > 全域(*)

全域選擇器 *

* { margin: 0; } 選擇所有元素。

標籤 (元素) 選擇器

div { background: #000; } 選擇所有同名標籤。

ID 選擇器 #box

唯一性、可作錨點、常用於主要區塊與表單。

Class 類別 .style_1

點號開頭，可重複多處疊加。首字不可為數字！

子元素選擇器 div > p

嚴格選擇父元素為 div 的第一層子 p 元素。

相鄰兄弟 div + p

選擇緊跟在 div 之後的第一個兄弟 p 元素。

通用兄弟 div ~ p

選擇放置在 div 之後的所有兄弟 p 元素。

屬性選擇器 a[target=_blank]

選擇含有指定屬性或指定屬性值的特定標籤。

calc(), clamp(), :root

calc(運算符前後必有空格)、clamp(最小, 偏好, 最大)。

可視化 Box Model 盒模型實驗室 (Page 21)

總寬 = Content + Padding + Border + Margin

Margin 外距 (框與框距離): 20px

Border 邊框 (樣式與尺寸): 5px

Padding 內距 (框與內容距離): 15px

順時針簡寫記憶法：

• 4個值: 上右下左 (順時針)

• 3個值: 上 (左右) 下

• 2個值: (上下) (左右)

• 1個值: 上下左右相同

Content
文字 / 圖片內容

Chapter 06 (Page 22-24)

字體規範、偽類偽元素與前綴

跨系統標準字型降級族名鏈、CSS 偽類與結構虛擬類別、偽元素規範與各大瀏覽器廠商引擎前綴。

標準系統字型族名規範 (font-family 最佳降級鏈)

body {
  font-family:
    /* 英文字型優先：優先調用各作業系統的高效原生系統字體 */
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial,
    /* 中文字型降級：蘋果蘋方 ➔ 黑體 ➔ 微軟正黑體 ➔ Google思源黑體 */
    "PingFang TC", "黑體-繁", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Noto Sans TC",
    /* 通用無襯線保底族名 */
    sans-serif;
  font-optical-sizing: auto; /* 字體光學尺寸微調，提高易讀性 */
}

通用字型族關鍵字：

• system-ui: 使用各作業系統預設系統字型

• emoji: 相容系統 emoji 表情符號

• math: 數學表示式專用字體

• fangsong: 中文仿宋專用字體

中文字體考量重點：

• PingFang TC (蘋方): 現行蘋果 macOS / iOS 預設

• 微軟正黑體: Windows 平台繁體中文標竿

• Noto Sans TC: Google 思源黑體，Android 與跨端相容

:nth-child() 結構偽類實時互動運算器 (Page 23)

公式：an + b (n 從 0, 1, 2... 遞增)

快速切換公式：

目前套用 CSS：:nth-child(2n)

CSS 偽元素 (Pseudo Elements)

• ::before / ::after: 產生裝飾性節點。必須設定 content:""，就算沒文字也要保留空值。
• 預設為行內元素 (display: inline)。

瀏覽器引擎字首前綴 (Page 24)

-webkit- : Chrome, Safari, iOS

-moz- : Firefox

-ms- : IE, 旧Edge

-o- : Old Opera

Chapter 07 (Page 25-33)

CSS 重置、架構與命名規範

探討 Reset vs Normalize、企業級 Copyright 版權結構標準、三大前端架構命名法則 (BEM / OOCSS / SMACSS) 與規範。

CSS Reset (強烈歸零)

Eric Meyer / HTML5 Doctor

徹底重置所有瀏覽器的預設樣式（margin=0, padding=0, 標題字重正常等），抹平各家瀏覽器落差，需要時再手動補回。

CSS Normalize (優雅調和)

normalize.css 官方理念

保留有用的瀏覽器預設樣式，為廣泛標籤提供一致化規範，修正常見 Bug，並具備極其詳盡的註解說明。

Copyright 版權宣告結構與大廠典範 (Page 26-27)

智慧財產權之著作財產權

版權宣告三大核心組成：

2. 年份 : 作品發表年份或公司成立區間（例：2024 或 1996-2024）

3. 作者 / 擁有人 : 版權擁有者或企業官方名稱

Apple

Adobe

Samsung

McDonald's

7-ELEVEN

三大模組化 CSS 命名架構法深度拆解

原則：一致性、簡潔性、描述性、可擴展性

1. BEM 命名法 Block__Element--Modifier

將類名切分為獨立區塊、所屬元素與修飾狀態。極大化降低樣式衝突與嵌套依賴。

Block 區塊:
.menu { }, .btn { }

Element 元素 (雙底線 __):
.menu__item { }, .btn__icon { }

Modifier 修飾符 (雙破折號 --):
.menu--collapsed { }, .btn--disabled { }

2. OOCSS 物件導向 Structure & Skin

主張「分離結構與皮膚」及「分離容器與內容」。避免撰寫深層次選擇器（如 .card.header .title ❌）。

結構類 (Structure):
.card { }, .card_header { }

皮膚類 (Skin):
.bg-blue { }, .text-large { }

模組命名空間:
.btn-primary { }, .btn-secondary { }

3. SMACSS 模組分類 Base / Layout / Module / State

將樣式劃分為 5 大類別，並廣泛透過前綴（如 .l-、.is-）區隔功能。

• Base: body, h1, p

• Layout: .l-header, .l-footer

• Module: .card, .button

• State: .is-active, .has-error

• Theme: .theme-dark

SMACSS 容器、色彩與文字規範命名全對照 (Page 32)

容器規範 (container- / layout-)

container-header : 頁首容器
layout-nav : 頁面導航佈局
container-main : 頁面主體容器
aside-sidebar : 側邊欄容器
footer-footer : 頁尾容器

色彩規範 (color- / theme- / status-)

color-primary : 主色調
color-primary-dark : 主色深色變體
color-secondary : 輔助色
status-success / danger
theme-dark / light

文字規範 (text- / font-)

text-size-16 : 字級 16px
text-size-24rem : 24rem 尺寸
text-weight-bold : 粗體
text-weight-normal : 正常字重
text-style-italic : 斜體

恭喜完成 HTML / CSS 建站基礎全概念！

有任何問題歡迎交流：田甜甜教案實驗室 / 甜甜圈設計交流社團 (@tientientien.design)

HTML / CSS 建站基礎概念