新手也能看得懂的 HTML 全攻略
10
本教學以您剛剛看到的範例程式碼為核心，帶你逐行拆解、補足必備概念，並提供「動手做」的小練習。即使完全沒寫過網頁，也能快速理解並實作。
1. 一個最小可執行的 HTML5 骨架
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的第一支網頁</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
為什麼只要五行就能跑？
<!DOCTYPE html>：告訴瀏覽器「我是最新的 HTML5」，啟用標準模式。<html lang="zh-Hant">：整頁以繁體中文為主要語言，螢幕閱讀器與 SEO 都靠它判斷。<meta charset="UTF-8">：統一編碼，避免亂碼！<meta name="viewport" ...>：手機先不要放大或縮小，畫面寬度 = 裝置寬度。<title>：分頁名稱，也是書籤文字。
動手 Try：把 title 改成你的暱稱並存檔，重新整理瀏覽器分頁，看看標籤文字是否同步更新。
2. 深入 <head>：每一行都影響使用者體驗
| 標籤 | 功能 | 常見延伸寫法 |
|---|---|---|
<!DOCTYPE html> |
啟用標準模式 | 幾乎永遠固定，除非在寫 HTML 4 舊專案 |
<meta charset> |
字元編碼 | UTF-8 幾乎是唯一選擇 |
<meta name="viewport"> |
響應式設定 | maximum-scale=1、user-scalable=no 可控制縮放 |
<meta http-equiv="X-UA-Compatible"> |
IE 相容模式 | 現代 Edge、Chrome 已不需；若要支援 IE 11 可保留 |
<title> |
分頁標題 + SEO | 建議 30 字內，關鍵字在前 |
<link rel="stylesheet"> |
外部 CSS | 可用 media="print" 或 media="screen and (max-width:600px)" |
<link rel="icon"> |
Favicon 圖示 | sizes="32x32"、href="/favicon-32.png" |
<meta name="description"> |
搜尋摘要 | 150 字內吸引用戶點擊 |
<meta property="og:title"> |
社群分享 | Open Graph 協定，Facebook/X 轉貼時顯示用 |
範例：一次加滿常用 <meta> 與資源
<head>
<!-- 必備 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- SEO / 社群 -->
<title>大貓咪學程式｜超萌的前端教學</title>
<meta name="description" content="最親切的前端教學部落格，陪你寫出第一支 HTML。">
<meta property="og:title" content="大貓咪學程式">
<meta property="og:description" content="超萌又專業的前端教學。">
<meta property="og:image" content="<https://example.com/og-banner.png>">
<!-- 外部資源 -->
<link rel="icon" href="/favicon-32.png" sizes="32x32">
<link rel="preconnect" href="<https://fonts.gstatic.com>">
<link href="<https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap>" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
preconnect提前與字型主機握手，縮短第一次載入時間。- 透過 Google Fonts 引入字型，再用 CSS
font-family: 'Inter', sans-serif;呼叫。
動手 Try：
- 把
description改成你的網站介紹。- 使用
og:image指向一張 1200 × 630 px 的橫幅圖，將網址貼到 Facebook Debugger 預覽看看。
3. 響應式設計小試身手
/* styles.css */
body {
font-family: 'Inter', sans-serif;
margin: 0;
}
/* 行動裝置以下：單欄 */
@media (max-width: 600px) {
.grid {
display: block;
}
}
/* 桌機：雙欄 */
@media (min-width: 601px) {
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
<body>
<section class="grid">
<article>區塊 A</article>
<article>區塊 B</article>
</section>
</body>
viewport+ Media Query = 真．響應式。- 嘗試縮放瀏覽器寬度，觀察
.grid排版如何變化。
加分題：將 grid-template-columns 改成 repeat(auto-fit, minmax(250px, 1fr));，體驗 CSS Grid 的彈性。
4. 常見錯誤排雷指南
| 症狀 | 可能原因 | 解法 |
|---|---|---|
| 中英文出現 � | 編碼不一致 | 確保 meta charset="UTF-8" 及檔案本身另存為 UTF-8 |
| 手機畫面被放大 | 少了 viewport 或寫錯拼字 |
檢查 name="viewport"、屬性間勿留空格 |
| CSS 讀不到 | href 路徑錯誤或快取舊檔 |
用絕對路徑 /css/styles.css 或加 ?v=20250428 強制更新 |
| favicon 不顯示 | 檔名／尺寸不符 | 建議 32×32 PNG，確認路徑、大小寫 |
5. 小型 Lab：從零打造「個人名片頁」
- 目標：一頁式名片，內含頭像、社群連結與一句座右銘。
- 步驟
- 以本文骨架為模板，新建
index.html與styles.css。 - 在
<head>加入 Open Graph 與 Google Fonts。 - 在
<body>建立<header>（頭像+姓名）＋<nav>（社群 icon 列）＋<footer>（copy-right）。 - 使用 Flexbox 置中排版，為不同螢幕寫 Media Query。
- 以本文骨架為模板，新建
- 挑戰
- 頁面載入時淡入動畫（CSS
@keyframes+opacity）。 - 加上
<meta name="theme-color">，讓 Android Chrome 工具列跟著變色。
- 頁面載入時淡入動畫（CSS
6. 總結
<!DOCTYPE html>只是開始；真正左右 UX 的，是<head>裡那些隱藏設定。- 行動優先、字元統一、SEO 友好，三大原則永遠不嫌早。
- 別害怕動手改：改
title、改description、改字型，每一次存檔刷新都是即時回饋。 - 本篇所有範例都可直接 Copy → Paste → 改，做完一次，你已比九成新手更懂 HTML5！
祝你寫網頁順利，接下來就輪到你把這些「看不見的細節」變成「看得見的專業」。
