X 光透視：所有網站底層都一樣

每個瀏覽器都內建了一個超強的「X 光機」叫做 DevTools（開發者工具）。 不管是 Google、YouTube、Shopee 還是 ChatGPT，打開 DevTools 你會發現：它們全都是 HTML + CSS 組成的。 下面我們用模擬的 DevTools 來「透視」四個你每天都在用的網站。

按 F12 ／ Cmd + Option + I 打開 DevTools，或右鍵 →「檢查」。點擊頁面上的任何元素，就能在右側看到它的 HTML 標籤和 CSS 樣式。 下面的模擬器也是同樣的操作方式：點擊左側網頁中的元素，右側會即時顯示對應的程式碼。

💬 ChatGPT

chatgpt.com
ChatGPT
P

What can I help with?

Ask anything
Elements (HTML)
<div class="main">
  <h1>What can I help with?</h1>
  <div class="bar">...</div>
</div>
Styles (CSS)
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

🔍 Google Search

google.com/search?q=如何學寫程式
Google
如何學寫程式

約 1,230,000 項結果 (0.42 秒)

vibeacademy.com

如何開始學程式？新手指南

學習程式設計的第一步，從 HTML、CSS 開始理解網頁的基本結構...

codecademy.com

Learn to Code - Codecademy

Free coding lessons for beginners. Start with HTML, CSS, JavaScript...

台灣
Elements (HTML)
<div class="results">
  <div class="result">...</div>
  <div class="result">...</div>
</div>
Styles (CSS)
.results {
  max-width: 640px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

▶️ YouTube

youtube.com
YouTube
搜尋
P
首頁
Shorts
訂閱
你的頻道
HTML 教學12:34

30 分鐘學會 HTML

氛圍學院 · 1.2 萬次觀看

CSS 教學8:21

CSS Flexbox 教學

程式學院 · 8,500 次觀看

JavaScript 教學45:12

JavaScript 入門教學

DevTips · 2.3 萬次觀看

Elements (HTML)
<main class="video-grid">
  <div class="video-card">...</div>
  <div class="video-card">...</div>
  <div class="video-card">...</div>
</main>
Styles (CSS)
.video-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px;
  align-content: start;
}

🛒 Shopee

shopee.tw
Shopee
在 Shopee 搜尋
🛒3
耳機-30%

藍牙無線耳機 降噪款

$399$570
鍵盤-15%

機械鍵盤 RGB 背光

$1,280$1,500
手機殼-50%

手機殼 透明防摔

$99$199
充電線-20%

USB-C 充電線 快充

$159$199
Elements (HTML)
<div class="product-grid">
  <div class="product-card">...</div>
  <div class="product-card">...</div>
  <div class="product-card">...</div>
</div>
Styles (CSS)
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 16px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

看到了嗎？

不管網站長得多不一樣，底層都是同一套東西：HTML 定義結構，CSS 控制外觀。 學會這兩個，你就能看懂（甚至修改）任何網站。下一課我們就要正式動手寫 HTML 了！

下一課