📄 HTML 基礎結構與語意標籤
📌 什麼是 HTML？
比喻：HTML 就像房子的骨架結構 🏗️
想像你要蓋一棟房子，首先需要的是骨架——鋼筋、梁柱、牆壁的位置。 HTML 就是網頁的骨架，它決定了「這裡放標題」「那裡放段落」「這邊放圖片」。 沒有 HTML，網頁就像一堆散落的建材，無法成形。
HTML（HyperText Markup Language）是網頁的基礎標記語言，每個網頁都是由 HTML 構成的。
📌 HTML5 文件基本結構
每個 HTML 文件都有固定的結構，就像每棟房子都有地基、牆壁和屋頂。
<!DOCTYPE html> <!-- 告訴瀏覽器這是 HTML5 文件 -->
<html lang="zh-Hant"> <!-- 根元素，設定語言為繁體中文 -->
<head> <!-- 頭部區塊，放置網頁的設定資訊（不會顯示在畫面上） -->
<meta charset="UTF-8"> <!-- 設定字元編碼為 UTF-8，支援中文 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 設定手機版面自適應 -->
<title>我的第一個網頁</title> <!-- 設定瀏覽器分頁上顯示的標題 -->
<link rel="stylesheet" href="style.css"> <!-- 引入外部 CSS 樣式檔 -->
</head>
<body> <!-- 身體區塊，放置所有可見的網頁內容 -->
<h1>歡迎來到我的網站</h1> <!-- 主標題，一個頁面通常只有一個 h1 -->
<p>這是一個段落。</p> <!-- 段落標籤 -->
<script src="app.js"></script> <!-- 引入外部 JavaScript 檔案，放在 body 結尾處 -->
</body>
</html>
重要觀念
<!-- head 裡常見的 meta 標籤 -->
<meta name="description" content="這是網頁描述"> <!-- 搜尋引擎會顯示這段描述 -->
<meta name="keywords" content="HTML, CSS, 教學"> <!-- 設定搜尋關鍵字（SEO 用途已降低） -->
<meta name="author" content="你的名字"> <!-- 設定網頁作者 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 告訴 IE 用最新渲染引擎 -->
📌 語意標籤（Semantic Tags）
語意標籤讓瀏覽器和搜尋引擎能「理解」網頁結構，就像幫房間貼上門牌一樣。
<!-- 完整的語意標籤範例 -->
<body> <!-- 整個網頁的可見內容 -->
<header> <!-- 頁首區塊：通常放 Logo 和主導覽列 -->
<h1>我的部落格</h1> <!-- 網站主標題 -->
<nav> <!-- 導覽區塊：放置導覽連結 -->
<ul> <!-- 無序列表，用來組織導覽項目 -->
<li><a href="/">首頁</a></li> <!-- 列表項目 + 超連結 -->
<li><a href="/about">關於我</a></li> <!-- 導覽到「關於我」頁面 -->
<li><a href="/contact">聯絡我</a></li> <!-- 導覽到「聯絡我」頁面 -->
</ul>
</nav>
</header>
<main> <!-- 主要內容區塊：一個頁面只能有一個 main -->
<section> <!-- 區段：將相關內容分組 -->
<h2>最新文章</h2> <!-- 區段標題 -->
<article> <!-- 文章區塊：獨立的內容單元 -->
<h3>學習 HTML 的第一天</h3> <!-- 文章標題 -->
<time datetime="2024-01-15">2024 年 1 月 15 日</time> <!-- 時間標籤，datetime 給機器讀 -->
<p>今天開始學習 HTML...</p> <!-- 文章內容 -->
</article>
<article> <!-- 另一篇獨立文章 -->
<h3>CSS 入門心得</h3> <!-- 第二篇文章標題 -->
<p>CSS 真的很有趣...</p> <!-- 第二篇文章內容 -->
</article>
</section>
<aside> <!-- 側邊欄：放置次要的輔助內容 -->
<h3>熱門標籤</h3> <!-- 側邊欄標題 -->
<ul> <!-- 標籤列表 -->
<li>HTML</li> <!-- 標籤項目 -->
<li>CSS</li> <!-- 標籤項目 -->
</ul>
</aside>
</main>
<footer> <!-- 頁尾區塊：放置版權、聯絡資訊 -->
<p>© 2024 我的部落格</p> <!-- 版權符號 + 文字 -->
</footer>
</body>
📌 表單元素（Form Elements）
表單是使用者與網站互動的橋樑，就像房子裡的門鈴、信箱和對講機。
<form action="/api/register" method="POST"> <!-- 表單標籤，設定送出的目標和方法 -->
<!-- 文字輸入 -->
<label for="username">使用者名稱：</label> <!-- label 綁定到 input，點標籤也能聚焦 -->
<input type="text" id="username" name="username" placeholder="請輸入帳號" required> <!-- 文字輸入框，required 表示必填 -->
<!-- 電子信箱 -->
<label for="email">電子信箱：</label> <!-- 信箱欄位的標籤 -->
<input type="email" id="email" name="email" placeholder="example@mail.com"> <!-- email 類型會自動驗證格式 -->
<!-- 密碼 -->
<label for="password">密碼：</label> <!-- 密碼欄位的標籤 -->
<input type="password" id="password" name="password" minlength="8"> <!-- password 類型會隱藏輸入內容 -->
<!-- 數字 -->
<label for="age">年齡：</label> <!-- 年齡欄位的標籤 -->
<input type="number" id="age" name="age" min="1" max="120"> <!-- number 類型有上下箭頭，可限制範圍 -->
<!-- 日期 -->
<label for="birthday">生日：</label> <!-- 生日欄位的標籤 -->
<input type="date" id="birthday" name="birthday"> <!-- date 類型會顯示日期選擇器 -->
<!-- 下拉選單 -->
<label for="city">城市：</label> <!-- 下拉選單的標籤 -->
<select id="city" name="city"> <!-- 下拉選單標籤 -->
<option value="">請選擇城市</option> <!-- 預設選項，value 為空 -->
<option value="taipei">台北</option> <!-- 選項：台北 -->
<option value="taichung">台中</option> <!-- 選項：台中 -->
<option value="kaohsiung">高雄</option> <!-- 選項：高雄 -->
</select>
<!-- 多行文字 -->
<label for="bio">自我介紹：</label> <!-- 多行文字的標籤 -->
<textarea id="bio" name="bio" rows="4" cols="50" placeholder="請簡述自己..."></textarea> <!-- 多行文字框，rows 設行數 -->
<!-- 核取方塊 -->
<label> <!-- label 包住 input 也能達到綁定效果 -->
<input type="checkbox" name="agree" required> <!-- 核取方塊，required 表示必須勾選 -->
我同意服務條款
</label>
<!-- 單選按鈕 -->
<fieldset> <!-- 用 fieldset 將相關的單選按鈕分組 -->
<legend>性別：</legend> <!-- legend 是 fieldset 的標題 -->
<label><input type="radio" name="gender" value="male"> 男</label> <!-- 同一組 radio 用相同 name -->
<label><input type="radio" name="gender" value="female"> 女</label> <!-- 同 name 的 radio 只能選一個 -->
<label><input type="radio" name="gender" value="other"> 其他</label> <!-- 第三個選項 -->
</fieldset>
<button type="submit">送出表單</button> <!-- 送出按鈕，觸發 form 的 action -->
<button type="reset">清除</button> <!-- 重設按鈕，清除所有填寫內容 -->
</form>
📌 表格（Table）
表格適合呈現結構化資料，就像 Excel 試算表。
<table border="1"> <!-- 表格標籤，border 設定邊框（實務中用 CSS） -->
<caption>學生成績表</caption> <!-- 表格標題，會顯示在表格上方 -->
<thead> <!-- 表頭區塊：定義欄位標題 -->
<tr> <!-- 表格列（table row） -->
<th>姓名</th> <!-- 表頭儲存格（會粗體置中） -->
<th>國文</th> <!-- 第二個欄位標題 -->
<th>數學</th> <!-- 第三個欄位標題 -->
<th>英文</th> <!-- 第四個欄位標題 -->
</tr>
</thead>
<tbody> <!-- 表格主體：放置資料列 -->
<tr> <!-- 第一列資料 -->
<td>小明</td> <!-- 一般儲存格（table data） -->
<td>85</td> <!-- 小明的國文成績 -->
<td>92</td> <!-- 小明的數學成績 -->
<td>78</td> <!-- 小明的英文成績 -->
</tr>
<tr> <!-- 第二列資料 -->
<td>小華</td> <!-- 第二位學生 -->
<td>90</td> <!-- 小華的國文成績 -->
<td>88</td> <!-- 小華的數學成績 -->
<td>95</td> <!-- 小華的英文成績 -->
</tr>
</tbody>
<tfoot> <!-- 表格頁尾：通常放合計或平均 -->
<tr> <!-- 頁尾列 -->
<td>平均</td> <!-- 標示這列是平均 -->
<td>87.5</td> <!-- 國文平均 -->
<td>90</td> <!-- 數學平均 -->
<td>86.5</td> <!-- 英文平均 -->
</tr>
</tfoot>
</table>
🤔 我這樣寫為什麼會錯？
❌ 錯誤 1：忘記關閉標籤
<!-- 錯誤：<p> 沒有關閉，會導致後面的排版全部亂掉 -->
<p>這是第一段
<p>這是第二段</p> <!-- 瀏覽器會猜測結構，結果不可預期 -->
<!-- 正確：每個開啟標籤都要有對應的關閉標籤 -->
<p>這是第一段</p> <!-- 正確關閉段落標籤 -->
<p>這是第二段</p> <!-- 正確關閉段落標籤 -->
❌ 錯誤 2：label 的 for 和 input 的 id 不對應
<!-- 錯誤：for="name" 但 input 的 id="username"，點標籤不會聚焦到輸入框 -->
<label for="name">姓名：</label> <!-- for 寫的是 name -->
<input type="text" id="username"> <!-- id 卻是 username，兩者不匹配 -->
<!-- 正確：for 和 id 必須完全一致 -->
<label for="username">姓名：</label> <!-- for 改成 username -->
<input type="text" id="username"> <!-- 現在 for 和 id 一致了 -->
❌ 錯誤 3：在 main 外面放主要內容
<!-- 錯誤：主要內容放在 main 外面，不符合語意結構 -->
<body> <!-- body 裡應該用語意標籤組織內容 -->
<div>這是我的文章內容</div> <!-- 用 div 沒有語意，搜尋引擎不知道這是什麼 -->
</body>
<!-- 正確：用語意標籤包裹主要內容 -->
<body> <!-- body 裡正確使用語意標籤 -->
<main> <!-- main 告訴瀏覽器這是主要內容區 -->
<article> <!-- article 表示這是一篇獨立的文章 -->
<h1>這是我的文章內容</h1> <!-- 用標題標籤而非純文字 -->
<p>文章正文...</p> <!-- 段落用 p 標籤 -->
</article>
</main>
</body>
📌 給 .NET 開發者的提醒
如果你在 ASP.NET Core 的 Razor 頁面中使用 HTML：
<!-- 在 Razor 頁面中，HTML 和 C# 可以混合使用 -->
<h1>@Model.Title</h1> <!-- @Model 是 Razor 語法，會被伺服器端取代為實際值 -->
<p>歡迎，@User.Identity.Name</p> <!-- @User 取得目前登入使用者的名稱 -->
<!-- 表單會搭配 Tag Helper 使用 -->
<form asp-action="Create" asp-controller="Product"> <!-- asp-action 指定 Controller 的方法 -->
<input asp-for="Name" /> <!-- asp-for 自動綁定 Model 的屬性 -->
<span asp-validation-for="Name"></span> <!-- 自動顯示驗證錯誤訊息 -->
<button type="submit">建立</button> <!-- 送出按鈕 -->
</form>