Vibe Coding 網頁必備知識：開發者的「溝通工具箱」
在 Vibe Coding 的世界裡，雖然不用精通每一行程式語法，但如果對「網頁是如何運作的」缺乏基礎理解，就像是想當導演卻分不清鏡頭與燈光。這篇教學將會介紹最核心也最基本的網頁知識，讓大家在指揮 AI 開發網頁時，能更精準地傳達指令，並在出錯時知道該看哪裡。
- 更多參考：Vibe Coding 全方位開發導讀
- 如果使用 Vibe Coding 是要學 Python，請先閱讀：Vibe Coding Python 必備知識
快速導覽：
認識網址與路徑
當使用提示詞告訴 AI「幫我放一張背景圖」時，或「超連結到指定網頁」，AI 寫出的程式碼通常會包含一個「路徑」。如果路徑發生錯誤，網頁就會出現破圖 ( 缺少圖片 ) 或連結錯誤的狀況，因此必須要先了解下方這些常見的網址和路徑知識。
延伸閱讀：網頁相對路徑與絕對路徑
網址 ( URL )：就像房子的門牌號碼，必須符合規定才找得到網頁或資源。
絕對路徑：包含開頭
http://或https://的完整的網址，精確指向目標，雖然可以都指向特定連結，不過一但有更新，就得修改全部絕對路徑。相對路徑：使用
./代表「目前這個資料夾」，../代表「往上一層資料夾」，通常網站的開發幾乎都會使用相對路徑，避免搬移資源時出現無法連結的狀況，但這是 Vibe Coding 最常出錯的地方。
靜態網頁 vs 動態網頁
在網頁的世界裡，可概觀分成兩種網頁「靜態網頁、動態網頁」，建議新手從「靜態網頁」開始，如此一來能夠更專注於介面視覺與互動，而不被複雜的資料庫邏輯卡住，不過雖然使用 Vibe Coding 的大部分情形都是產生「靜態網頁」，但仍然必須要了解這些網頁種類的差異，才能夠更精準的向 AI 許願。
延伸閱讀：關於 HTML 與網頁運作原理
| 特性 | 靜態網頁 ( Static Web Page ) | 動態網頁 ( Dynamic Web Page ) |
|---|---|---|
| 定義 | 內容固定，像印刷品，所有人看到的內容都一樣 | 內容會變，像互動電視，根據使用者或時間顯示不同內容 |
| 組成技術 | HTML、CSS、JavaScript ( 前端為主 ) | HTML、CSS、JS + 後端語言 ( Python、PHP ) + 資料庫 |
| 載入速度 | 極快 ( 伺服器直接傳送現成檔案 ) | 較慢 ( 需要伺服器運算並從資料庫抓取資料 ) |
| 互動功能 | 基本互動 ( 點擊連結、簡單動畫 ) | 高度互動 ( 會員登入、購物車、留言系統 ) |
| 安全性 | 高 ( 沒有資料庫，較難被駭客攻擊 ) | 需注意 ( 資料庫可能有入侵風險 ) |
| 主機成本 | 低 ( 甚至有許多免費空間，如 GitHub Pages ) | 較高 ( 需要支援後端語言與資料庫的伺服器 ) |
| 適合場景 | 個人名片、產品介紹、活動一頁式網站 | 社群平台、電商網站、內容管理系統 ( WordPress ) |
認識網頁三本柱：HTML、CSS、JavaScript
在正式進入網頁開發前，必須知道網頁是由這三大核心技術組成：CSS、HTML 和 JavaScript，它們各自負責不同的任務，並相互協作以實現完整的網頁功能：
- HTML：負責「定義網頁的結構和內容」，使用標籤來描述網頁中的不同元素，可想像成靜止的「全裸人體」。
- CSS：負責「控制網頁的外觀和版面」，使用選擇器和屬性來定義 HTML 裡元素的樣式，如顏色、字體、邊框等，可想像成替全裸的人體加上「膚色、髮色、化妝、衣物...等」裝扮。
- JavaScript：負責「實現網頁的動態效果和互動性」，透過操作 HTML 和 CSS，實現網頁的互動功能或改變網頁元素的外觀和行為，可想像成賦予人體「認知、社交、互動」等能力。
認識網頁 HTML 基本架構
即使 AI 幫你寫好網頁程式碼，最少也要看得懂這 HTML 的基本架構，下方列出一些常用的 HTML 標籤：
延伸閱讀：HTML 教學、HTML 標籤與架構
| 常用標籤 | 說明 |
|---|---|
<head> |
網頁的腦袋。放標題、字體設定、或是套用 CSS 的連結。放在裡面的內容並不是讓使用者看的 ( 使用者看不到 )，主要是讓搜尋引擎或社群爬蟲有參考內容依據，因此對於 SEO 非常重要。 |
<body> |
網頁的身體。所有要讓使用者看的文字、圖片和內容都放在這裡。 |
<h1> 到 <h6> |
標題，h1 最重要且最大，隨後遞減。 |
<p> |
段落文字，常用於一般文字內容。 |
<a> |
超連結，例如 <a href="網址">。 |
<img> |
圖片，例如 <img src="圖片路徑" alt="圖片說明">。 |
<ul> 與 <li> |
項目列表，用於製作清單或導覽列。 |
<table>、<tr>、<td> |
表格元素，用於製作多欄位表格。 |
<div> |
塊級區塊，通常進行排版使用。 |
<span>、<strong>、<em> |
文字類型區塊，放在文字裡搭配樣式強化重點。 |
<nav> |
導覽列，語意化區塊。 |
<main> |
主要內容，語意化區塊。 |
<footer> |
頁尾，語意化區塊。 |
如何套用 CSS 與 JavaScript？
在網頁裡面套用 CSS 與 JavaScript 通常有三種形式，能夠正確的套用，網頁才能具有漂亮的設計感以及正確的功能。
內嵌式 ( Internal )：
直接把樣式或指令寫在 HTML 中，適合快速原型測試，這也是 Vibe Coding 產生網頁程式碼的基本寫法 ( 因為使用者常常會用錯相對路徑而導致網頁無法順利運作，所以 AI 會採用這種最保險的方法 )。
<head> <style> /* 這裡寫 CSS */ </style> </head> <body> <script> /* 這裡寫 JavaScript */ </script> </body>
外部連結 ( External )：
將樣式與邏輯獨立出來存放，這種做法不僅彈性好維護，更能保持程式碼整潔，是各類型專案或正規開發的標準做法。
<head> <!-- 連結外部 CSS 檔 --> <link rel="stylesheet" href="外部 CSS 路徑"> </head> <body> <!-- 連結外部 JS 檔 --> <script src="外部 JS 路徑"></script> </body>
CDN ( 外部資源庫 Content Delivery Network )：
CDN 就像是在全球各地都有「分倉庫」，當美國的朋友看網頁時，會從距離最近的美國伺服器抓資料，而不是從台灣抓，載入速度會快非常多，例如 Google Fonts、Bootstrap 等標準資源都會使用 CDN 的方式，現在的主流部署工具都已經內建了全球 CDN，不需要額外設定就能享有極速。
<head> <!-- 範例：引用 Google Fonts 的字體 --> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap" rel="stylesheet"> </head>
認識響應式設計 ( RWD )
RWD 全名為 Responsive Web Design ( 響應式網頁設計 )，早期開發者為了讓手機使用者有更好的體驗，通常要製作一套獨立的手機版網站，這種做法需要同時維護兩份程式碼，既費時又容易出錯，因此在 2010 年，由設計師 Ethan Marcotte 提出了 RWD 的概念，主張網頁應該像水一樣，不論倒入什麼形狀的容器 ( 螢幕 )，都能自動調整佈局。
隨著行動裝置的普及，RWD 也越來越重要，因為 RWD 網頁有下列幾個優勢：
- 不論是桌機、平板還是手機，都共用同一套程式碼，大幅降低開發與維護成本。
- 網頁會根據螢幕寬度自動重新排列內容，使用者不需要辛苦地手動放大縮小，擁有絕佳的使用者體驗。
- Google 明確指出，採用響應式設計的網站會在搜尋結果中獲得更好的排名 ( SEO )。
開發 RWD 網頁需要有下列幾種方式：
Viewport ( 視窗設定 )：
在
<head>撰寫標籤屬性，讓手機能正確縮放。<meta name="viewport" content="width=device-width, initial-scale=1.0">Media Queries ( 媒體查詢 )：
使用 CSS 中負責「偵測螢幕大小」並改變樣式的語法，參考「CSS @media 媒體查詢 ( Media Queries )」。
/* 當螢幕寬度小於 600px 時（通常是手機） */ @media (max-width: 600px) { body { font-size: 20px; /* 讓文字變成 20px */ } }
認識常見的網頁圖片格式
下方列出在網頁中常見的圖片格式：
| 圖形格式 | 副檔名 | 透明 | 說明 |
|---|---|---|---|
| JPG ( JPEG ) | .jpg、.jpeg | 不支援 | 適合色彩豐富的照片，相容性最高。 |
| WebP | .webp | 支援漸層透明 | 現代網頁首選。體積比 JPG 更小，畫質更好。 |
| PNG | .png | 支援漸層透明 | 適合需要「透明背景」的圖案或 Logo，畫質好但檔案較大。 |
| GIF | .gif | 僅單色透明 | 合簡單的「動態圖」。常用於表達簡單的互動流程或幽默圖案。 |
| SVG | .svg | 支援漸層透明 | 向量圖形。不管怎麼放大都不會糊，適合用程式碼控制顏色的圖示。 |
| Sprites 圖形 | 支援各種圖檔格式 | 根據圖檔格式 | 將許多小圖標拼成一張大圖的技術。能大幅減少伺服器請求次數，提升載入速度。 |
網頁觀察與除錯
開發網頁之後，有兩種方式可以觀察網頁的程式碼：
延伸閱讀：如何觀察 HTML 原始碼
檢視原始碼：
查看網頁原始碼的方式很簡單，使用 Chrome 瀏覽器開啟網頁，在網頁上按下滑鼠右鍵，選擇「檢視網頁原始碼」( Firefox 稱作「檢視原始碼」，Safari 稱作「顯示網頁原始碼」 )。
點選後就會開啟一個新分頁，分頁裡會呈現該網頁的原始碼，從中可以看到 HTML 的基本架構，以及各種標籤組成的網頁元素。
透過這個步驟查看的原始碼屬於「靜態網頁」原始碼，如果網頁裡有動態內容，則不會透過這種方式顯示。
開啟瀏覽器控制台，檢查網頁：
如果要查看目前網頁「真正的原始碼」( 最終呈現樣貌的原始碼 )，則需要使用「檢查網頁」的方式，使用 Chrome 瀏覽器開啟網頁，在網頁上按下滑鼠右鍵，選擇「檢查」( Firefox 稱作「檢測」，Safari 稱作「檢閱元件」 )。
點選後會在瀏覽器的下方或右側 ( 可以點擊裡面的圖示切換位置 )，開啟一個可以拖拉大小的顯示區塊，使用 Chrome 瀏覽器點擊「element」頁籤，就能看到完整的 HTML 原始碼，此時也可使用滑鼠點擊網頁元素，就能看到該元素的樣式。
使用 Firebox 瀏覽器點擊「檢測器」頁籤，就能看到完整的 HTML 原始碼以及網頁元素。
使用 Safari 瀏覽器點擊「元件」頁籤，就能看到完整的 HTML 原始碼以及網頁元素。
網頁上線的開發環境與部署
在本地開發完成後，最後一步就是將網頁部署，讓全世界都可以觀看這個網頁，「部署」表示把網頁檔案上傳到一台全天候運作的伺服器，並取得一個專屬的網址。如果不部署，網頁就只能存在自己的電腦裡，別人無法觀看，根據的技術成熟度與網頁類型，可以選擇以下幾種方式：
自動化託管平台 ( Vibe Coding 首選 )
目前最推薦給新手的方式，只需要把程式碼同步到 GitHub，或直接將資料夾拖進去，網頁就自動上線。
- Vercel 或 Netlify：不僅快速，且內建了全球 CDN 與自動 SSL (HTTPS) 憑證，完全免費。
- GitHub Pages：如果你已經學會使用 Git，這是存放個人靜態作品集最專業且穩定的選擇。
- Google 雲端硬碟 + Google App Script：將雲端硬碟作為網站伺服器，適合簡單展示，不適合正式網站。
租用虛擬主機或雲端伺服器 ( VPS / Cloud )
如果需要架設具備資料庫的「動態網頁」，或是想擁有完全的控制權，可以選擇租用伺服器。
- 虛擬主機 ( Shared Hosting )：適合簡單的 WordPress 網站。
- VPS ( 虛擬專用伺服器 )：如 Linode、DigitalOcean，月租約 5 美金起，需要自己安裝系統環境。
- 雲端龍頭：AWS ( Amazon )、GCP ( Google Cloud )，功能強大但設定複雜，適合大型商業專案。
自己架設伺服器 ( Self-hosting )
適合進階「玩家」或是有安全性考量的企業，用家裡的舊電腦、NAS 主機或Raspberry Pi ( 樹莓派 )，透過固定 IP 或內網穿透技術開放給外網。
需要自行維護硬體、電費，以及處理最頭痛的資訊安全防護。
直接用 AI Canvas ( 畫布 ) 分享網頁的優缺點
在 Vibe Coding 的過程中，各種 AI 工具都有提供內建的 Canvas ( 畫布 ) 直接預覽與分享，雖然方便使用但有許多局限性，下方列出這種方式的優缺點：
優點：
- 極致速度：不需要額外設定，一鍵就能讓夥伴看到目前的進度。
- 即時反饋：適合在討論階段快速確認視覺效果。
缺點：
- 非永久性：連結具有時效性，或僅供當前對話使用。
- 資源限制：無法綁定自定義網域 ( 如 oxxostudio.tw 等 ) ，且對外部圖片或大型資源的載入穩定性較低。
- 不適合生產環境：若要作為正式作品集或產品，正式部署網頁才是唯一首選。
小結
這篇教學介紹的網頁基礎知識，是 AI Vibe Coding 的「導航儀」，擁有這些基礎知識後，下指令時就能說出更精確的「指令」，而不只是盲目測試，完成網頁之後，也才能夠正確又順暢的分享自己的作品。
延伸閱讀
Vibe Coding 的重點都不在於「寫程式」，而是為了配合程式的各種「準備工作」，下方列出 Vibe Coding 相關的教學，透過一系列的教學，就更能掌握正確且順暢的開發流程:
- 認識 Vibe Coding：程式不再是拼邏輯，而是拼「感覺」
- Vibe Coding 新手入門：從藍圖規劃到 AI 開發的思維轉型
- Vibe Coding 重要的準備工作：架構流程圖
- Vibe Coding 網頁必備知識：開發者的「溝通工具箱」
- Vibe Coding Python 必備知識：AI 與 Colab 開啟程式直覺
- Vibe Coding 固定網頁樣式：解決樣式不一致的惱人問題
- Vibe Coding 圖片處理心法：從雲端空間到 Base64 的完美配置
- Vibe Coding 玩家必備的 SVG 進階操作指南
- Vibe Coding 字體指南：用文字風格定義網頁靈魂
- 下載 Vibe Coding 網頁程式碼，掌握程式碼的主導權
- Vibe Coding 實戰：利用 Google Apps Script 打造免費網頁部署基地
- Vibe Coding 實戰：使用 GitHub 部署你的網頁作品
- AI 時代的輕量級後端：當 Vibe Coding 遇上 Google Sheets
- 從靈感到即時同步：Vibe Coding 遇上 Firebase Realtime Database
- 數位靈魂的存放處：Vibe Coding 串接 Firebase Firestore
- 拒絕資料裸奔！Vibe Coding 必備 Firebase App Check 安全防護指南
- Vibe Coding + Firebase Authentication 打造順暢的註冊登入體驗
- Vibe Coding 將 Google Drive 變身最強檔案後端
- 靈感即程式：用 Gemini API 開啟你的 Vibe Coding 新時代
- Vibe Coding 極速打造 LINE Bot 智慧機器人
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～