HTML 簡介與文件結構
HTML 是什麼？
比喻：HTML 就像房子的骨架 🏗️
鋼筋決定了牆壁在哪、門在哪、窗戶在哪。 HTML 決定了網頁上「這裡是標題」「那裡是圖片」「這邊是連結」。
HTML = HyperText Markup Language（超文本標記語言）
標籤（Tag）的基本概念
<h1>Hello World</h1>
│ │ │ │
│ │ │ └── 結束標籤的斜線
│ │ └───── 結束標籤
│ └────────────────── 內容（Content）
└───────────────────── 開始標籤
<!-- 配對標籤（有開有關） -->
<p>這是一個段落</p>
<div>這是一個容器</div>
<!-- 自閉合標籤（沒有內容） -->
<br> <!-- 換行 -->
<hr> <!-- 水平線 -->
<img src="pic.jpg" alt="圖片"> <!-- 圖片 -->
<input type="text"> <!-- 輸入框 -->
完整的 HTML5 文件結構
<!DOCTYPE html> <!-- ← 宣告這是 HTML5 文件 -->
<html lang="zh-Hant"> <!-- ← 根元素，lang 設定語言 -->
<head> <!-- ← 頭部：放「看不見」的設定 -->
<meta charset="UTF-8"> <!-- ← 字元編碼（支援中文） -->
<meta name="viewport" <!-- ← 手機適配 -->
content="width=device-width, initial-scale=1.0">
<title>我的網頁</title> <!-- ← 瀏覽器分頁標題 -->
<link rel="stylesheet" <!-- ← 引入 CSS -->
href="style.css">
</head>
<body> <!-- ← 身體：放「看得見」的內容 -->
<h1>歡迎</h1> <!-- ← 主標題 -->
<p>這是第一個網頁。</p> <!-- ← 段落 -->
<script src="app.js"></script> <!-- ← 引入 JS（放 body 最後） -->
</body>
</html>
逐行解析：
<!DOCTYPE html> -- 告訴瀏覽器用 HTML5 模式解析（不寫會進入怪異模式）
<html lang="zh-Hant"> -- 根元素，lang 幫助搜尋引擎和螢幕閱讀器識別語言
<meta charset="UTF-8"> -- 字元編碼設為 UTF-8，才能正確顯示中文、日文等
<meta name="viewport"> -- 讓手機瀏覽器用裝置寬度顯示（不設會縮很小）
<title> -- 顯示在瀏覽器分頁上的文字（也影響 SEO）
<link rel="stylesheet"> -- 引入外部 CSS 檔案
<script src="app.js"> -- 引入外部 JavaScript，放 body 最後避免阻塞載入
標籤的屬性
<a href="https://google.com" <!-- href 是屬性 -->
target="_blank" <!-- target 也是屬性 -->
class="link" <!-- class 用來套 CSS -->
id="main-link"> <!-- id 是唯一識別碼 -->
前往 Google
</a>
常見全域屬性：
| 屬性 | 用途 | 範例 |
|---|---|---|
id |
唯一識別碼 | id="header" |
class |
CSS 類別（可多個） | class="btn primary" |
style |
行內 CSS | style="color: red" |
title |
提示文字（hover 顯示） | title="點我" |
data-* |
自訂資料屬性 | data-id="123" |
hidden |
隱藏元素 | hidden |
註解
<!-- 這是註解，不會顯示在頁面上 -->
<!--
多行註解
也可以這樣寫
-->
<!-- TODO: 之後要加上 footer -->