Vibe Coder
網頁是怎麼組成的？HTML 結構入門
網頁是怎麼組成的？HTML 結構入門
AI 幫你生出一整個網頁只要幾秒鐘，但畫面不對的時候，你要能自己看懂那份 HTML，才知道問題出在哪裡、該怎麼跟 AI 描述修改需求。
這篇帶你從網頁的三層結構開始，一路學到用瀏覽器開發者工具拆解任何網頁，是 Vibe Coder 讀懂前端的第一步。
你將學到什麼
網頁的三層結構
結構、樣式、行為分別由誰負責，一次分清楚。
HTML 標籤速查
十個最常用標籤與屬性，看到就認得。
語意標籤為什麼重要
用對標籤，AI 跟搜尋引擎都更看得懂你的網頁。
用開發者工具找元素
F12 打開後，幾個步驟就能拆解任何網頁的結構。
網頁是怎麼組成的
每個網頁都由三個層次組成，各自分工明確，AI 生成網頁時也是照這個邏輯寫程式碼。
| 層次 | 負責什麼 | 語言 | 比喻 |
|---|---|---|---|
| 結構 | 內容是什麼、怎麼組織 | HTML | 建築的骨架 |
| 樣式 | 看起來什麼樣子 | CSS | 裝潢和外觀 |
| 行為 | 點了會發生什麼事 | JavaScript | 電路和機關 |
HTML 標籤速查
先記住這幾個最常用的標籤，看到 AI 生成的程式碼就能立刻對上號。
| 標籤 | 用途 | 範例寫法 |
|---|---|---|
| h1 到 h6 | 標題，數字越小越重要 | h1 包住主標題文字 |
| p | 段落文字 | p 包住一段文字 |
| div | 容器，用來分組元素 | div class="card" |
| span | 行內容器，不換行 | span class="highlight" 包住強調文字 |
| a | 超連結 | a href="/about" 包住連結文字 |
| img | 圖片 | img src="logo.png" alt="Logo" |
| input | 輸入框 | input type="text" placeholder="搜尋" |
| button | 按鈕 | button 包住按鈕文字 |
| ul、li | 無序清單 | ul 底下包多個 li |
| table | 表格 | table 搭配 tr、td |
id（唯一識別碼）、class（CSS 樣式類別）、href（連結目標）、src（來源）。結構語意：為什麼用對標籤很重要
HTML5 引入了語意標籤，讓標籤本身說明它的用途，不只是視覺上的容器。
| 語意標籤 | 代表什麼 | 跟用 div 的差異 |
|---|---|---|
header | 頁首區塊 | 比用 div class="header" 更有意義 |
nav | 導覽列 | 搜尋引擎和螢幕閱讀器知道這是導覽 |
main | 主要內容 | 明確標示頁面的核心區域 |
article | 獨立的文章或內容 | 適合部落格文章、新聞 |
section | 主題相關的區塊 | 通常有自己的標題 |
footer | 頁尾區塊 | 版權、聯絡資訊 |
button | 可點擊的按鈕 | 比用 div onclick 更有語意，也更容易用鍵盤操作 |
用瀏覽器開發者工具看任何網頁
按 F12（或 Cmd + Option + I）開啟開發者工具，這是前端最重要的工具，沒有之一。
- Elements 面板：看完整的 DOM 結構，點選任何元素可以看它的 HTML 和 CSS。滑鼠移到元素上，畫面上對應的區塊會高亮。
- 點選工具（左上角箭頭）：點它再點畫面上任何元素，開發者工具自動跳到該元素的 HTML 位置，是最快找到元素的方法。
- Console 面板：JavaScript 的錯誤訊息會出現在這裡，前端壞了先來這裡看有沒有紅色錯誤。
- Network 面板：看所有的網路請求，包含 API 呼叫，可以看到請求的網址、狀態碼、回應內容。
讀懂 AI 生的 HTML
AI 常生成類似下面這種結構，先練習從外層往內層拆解著讀。
<div class="card">
<div class="card-header">
<h2 class="card-title">天氣資訊</h2>
</div>
<div class="card-body">
<p id="temperature">28°C</p>
<p class="description">晴天</p>
</div>
</div>讀法：從外層 div.card 開始，裡面有 div.card-header（標題區）和 div.card-body（內容區），內容區裡有兩個 p 標籤分別顯示溫度和天氣描述。id 是唯一識別碼，class 是 CSS 樣式類別。
練習：描述一段導覽列的結構
<nav class="navbar">
<a href="/" class="logo">酒Ann</a>
<ul class="nav-links">
<li><a href="/courses">課程</a></li>
<li><a href="/about">關於</a></li>
</ul>
</nav>上手前的小提醒
打開你常用的網站，按 F12 開啟開發者工具，用點選工具點擊導覽列，找到對應的 HTML 元素，說出它用了什麼標籤和 class。能做到這一步，你就已經具備跟 AI 精確溝通前端問題的基礎能力了。
延伸學習
做出你的第一個 Skill
一場快閃直播的完整重製。從搞懂 Skill 的五個層級開始，帶你把一件你每天在做的重複工作，寫成一支 AI 真的會照做的 Skill ── 命名、description、輸入拆解、Workflow 訪談、Output 與 Checks，最後組成一份能通過格式檢查的 SKILL.md。
NT$ 999
HE101｜Harness Engineering Foundation（3 小時）
三小時的地圖課，不是操作課。把 Model 與 AI System 分開，拆解一套 AI Harness 的八個組成（Goal、Context、Knowledge、Rules、Tools、Workflow、Evaluation、Iteration），再帶你逆向拆解四個你已經在用的系統，最後畫出自己的第一張 Harness Blueprint。5 章 27 課，附學員講義 PDF 與術語速查表。
NT$ 2,599