網頁三本柱
┌─────────────────────────────────────────────────┐
│ 網頁 │
│ ┌─────────────────────────────────────────┐ │
│ │ HTML │ │
│ │ (結構/內容) │ │
│ │ ┌─────────────┐ ┌─────────────────┐ │ │
│ │ │ CSS │ │ JavaScript │ │ │
│ │ │ (樣式) │ │ (行為) │ │ │
│ │ └─────────────┘ └─────────────────┘ │ │
│ └─────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘
| 技術 | 角色 | 負責內容 |
|---|
| HTML | 骨架 | 定義內容結構和語意 |
| CSS | 外觀 | 控制視覺呈現和排版 |
| JavaScript | 行為 | 處理互動和動態邏輯 |
HTML 文件結構
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<!-- 元資料區 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="網頁描述">
<title>頁面標題</title>
<!-- 外部資源 -->
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- 內嵌樣式 -->
<style>
body { margin: 0; }
</style>
</head>
<body>
<!-- 頁面內容 -->
<header>
<nav>導航</nav>
</header>
<main>
<article>
<h1>標題</h1>
<p>內容</p>
</article>
</main>
<footer>頁尾</footer>
<!-- JavaScript（放在 body 結尾） -->
<script src="app.js"></script>
</body>
</html>
Head 區域詳解
<!-- 字元編碼（必須） -->
<meta charset="UTF-8">
<!-- 響應式設計（必須） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO 相關 -->
<meta name="description" content="網頁描述，約 150-160 字">
<meta name="keywords" content="關鍵字1, 關鍵字2">
<meta name="author" content="作者名">
<!-- 搜尋引擎指令 -->
<meta name="robots" content="index, follow">
Open Graph（社群分享）
<!-- Facebook / LINE -->
<meta property="og:title" content="文章標題">
<meta property="og:description" content="文章描述">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="文章標題">
<meta name="twitter:description" content="文章描述">
<meta name="twitter:image" content="https://example.com/image.jpg">
資源載入
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
<!-- 圖示 -->
<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-icon.png">
<!-- 字型預載入 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="font.woff2" as="font" crossorigin>
<!-- 預先連線（加速第三方資源） -->
<link rel="dns-prefetch" href="https://api.example.com">
<link rel="preconnect" href="https://cdn.example.com">
Body 區域常見結構
語意化標籤
<body>
<!-- 頁首 -->
<header>
<nav>
<ul>
<li><a href="/">首頁</a></li>
<li><a href="/about">關於</a></li>
</ul>
</nav>
</header>
<!-- 主要內容 -->
<main>
<!-- 文章 -->
<article>
<header>
<h1>文章標題</h1>
<time datetime="2024-01-01">2024年1月1日</time>
</header>
<section>
<h2>段落標題</h2>
<p>內容...</p>
</section>
<footer>
<p>作者：Terry</p>
</footer>
</article>
<!-- 側邊欄 -->
<aside>
<h3>相關文章</h3>
<ul>...</ul>
</aside>
</main>
<!-- 頁尾 -->
<footer>
<p>© 2024 版權所有</p>
</footer>
</body>
CSS 載入方式
<!-- 1. 外部樣式表（推薦） -->
<link rel="stylesheet" href="styles.css">
<!-- 2. 內部樣式 -->
<style>
.container { max-width: 1200px; }
</style>
<!-- 3. 行內樣式（避免使用） -->
<div style="color: red;">文字</div>
<!-- 4. CSS-in-JS（框架內） -->
<script>
// styled-components, emotion 等
</script>
JavaScript 載入方式
<!-- 1. 外部腳本（放 body 結尾） -->
<script src="app.js"></script>
<!-- 2. async - 非同步載入，載入完立即執行 -->
<script async src="analytics.js"></script>
<!-- 3. defer - 非同步載入，DOM 完成後執行（推薦） -->
<script defer src="app.js"></script>
<!-- 4. module - ES6 模組 -->
<script type="module" src="main.js"></script>
<!-- 5. 內嵌腳本 -->
<script>
console.log('Hello');
</script>
載入順序
HTML 解析：──────────────────────────────────────→
一般 script: 解析暫停 ─→ 下載 ─→ 執行 ─→ 繼續解析
async script: 解析繼續 ──────────────→
↑ 下載 ─→ 執行（可能中斷解析）
defer script: 解析繼續 ──────────────────────→ 執行
↑ 下載 ─────────────────→
常見資源類型
| 資源類型 | 檔案格式 | 說明 |
|---|
| 圖片 | jpg, png, webp, svg | 頁面圖像 |
| 字型 | woff2, woff, ttf | 自訂字型 |
| 影片 | mp4, webm | 影片內容 |
| 音訊 | mp3, ogg | 音訊內容 |
| 資料 | json, xml | API 資料 |
| 文件 | pdf, doc | 下載檔案 |
現代前端專案結構
project/
├── public/ # 靜態資源
│ ├── favicon.ico
│ └── robots.txt
├── src/
│ ├── assets/ # 圖片、字型
│ ├── components/ # 元件
│ ├── styles/ # CSS/SCSS
│ ├── utils/ # 工具函數
│ ├── App.jsx # 根元件
│ └── main.js # 入口點
├── index.html # HTML 模板
├── package.json
└── vite.config.js # 打包設定
延伸閱讀
MDN - HTML 基礎
DOM
BOM
為什麼前端要用打包工具