🎯 HTML大哥是誰？
🏗️ 建築師角色
HTML就像建築師，負責規劃網頁的結構，決定哪裡放標題、哪裡放內容、哪裡放圖片。沒有HTML，網頁就像沒有骨架的房子！
📝 標記語言
HTML用「標籤」來標記內容，就像在文件上貼標籤一樣。每個標籤都有特定的意義和功能。
🎯 語義化結構
好的HTML不只是堆疊標籤，而是要有意義！讓瀏覽器和搜尋引擎都能理解內容的結構。
🏷️ HTML標籤大全
📋 基礎結構標籤
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
</head>
<body>
<h1>歡迎來到我的網站！</h1>
<p>這是我的第一段內容。</p>
</body>
</html>
<h1> ~ <h6>
標題標籤，h1最大，h6最小，像新聞的大標題和小標題
<p>
段落標籤，用來包裹一段文字，最常用的標籤之一
<div>
容器標籤，像一個盒子，可以裝其他內容
<span>
行內標籤，用來包裹文字中的一小部分
<a>
連結標籤，可以連到其他網頁或頁面內的位置
<img>
圖片標籤，用來顯示圖片，記得要加alt屬性
<ul> <ol> <li>
清單標籤，ul是無序清單，ol是有序清單，li是清單項目
<table>
表格標籤，配合tr（行）和td（儲存格）使用
🎨 實用範例：個人網站首頁
<header>
<h1>王小明的個人網站</h1>
<nav>
<ul>
<li><a href="#about">關於我</a></li>
<li><a href="#projects">作品集</a></li>
<li><a href="#contact">聯絡我</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>關於我</h2>
<img src="avatar.jpg" alt="王小明的照片">
<p>我是一個熱愛學習的高中生，正在學習網頁設計。</p>
</section>
<section id="projects">
<h2>我的作品</h2>
<article>
<h3>第一個網站</h3>
<p>這是我用HTML製作的第一個網站！</p>
</article>
</section>
</main>
<footer>
<p>© 2024 王小明 版權所有</p>
</footer>
💻 實作練習區
🎯 挑戰一：建立自我介紹頁面
使用下面的標籤，建立一個簡單的自我介紹頁面：
📝 請使用這些標籤：
<h1> <h2> <p> <ul> <li> <strong>
🎯 挑戰二：製作課表
使用表格標籤製作一個簡單的課表：
📝 請使用這些標籤：
<table> <tr> <th> <td>
🚀 進階技巧
🎯 語義化HTML5標籤
HTML5推出了許多語義化標籤，讓網頁結構更清楚：
<header>網站頂部，通常包含標題和導航</header> <nav>導航區域，放置選單連結</nav> <main>主要內容區域</main> <article>獨立的文章內容</article> <section>文檔中的一個區段</section> <aside>側邊欄內容</aside> <footer>網站底部，通常包含版權資訊</footer>
🔗 常用屬性
id="名稱"
唯一識別符，一個頁面中不能重複
class="名稱"
類別名稱，可以重複使用，方便CSS選取
src="路徑"
圖片或其他資源的來源路徑
alt="描述"
圖片的替代文字，重要的無障礙功能
💡 HTML大哥的貼心提醒
✅ 良好習慣
- 標籤一定要正確關閉
- 使用語義化標籤
- 保持縮排整齊
- 圖片一定要加alt屬性
❌ 常見錯誤
- 忘記關閉標籤
- 標籤大小寫混用
- 屬性沒有加引號
- 過度使用div標籤