歡迎來到 HTML5 完整教學課程！本課程將帶您從零開始，逐步掌握現代網頁開發的三大核心技術：HTML、CSS 和 JavaScript。
📚 課程結構
本課程分為三大部分，共 30 個章節，採用由淺入深的教學方式：
第一部分：HTML 基礎與進階（第 1-9 課）
HTML 是網頁的骨架，定義網頁的結構和內容。
- 第 1 課：HTML 基礎介紹
- 第 2 課：文字標籤和格式化
- 第 3 課：列表和連結
- 第 4 課：圖片和多媒體
- 第 5 課：表格
- 第 6 課：表單基礎
- 第 7 課：表單進階
- 第 8 課：HTML5 語義化標籤
- 第 9 課：HTML5 新功能
第二部分：CSS 樣式設計（第 10-18 課）
CSS 是網頁的外觀，控制網頁的視覺呈現和布局。
- 第 10 課：CSS 基礎介紹
- 第 11 課：選擇器和特異性
- 第 12 課：盒模型和布局基礎
- 第 13 課：文字和顏色樣式
- 第 14 課：Flexbox 布局
- 第 15 課：Grid 布局
- 第 16 課：響應式設計
- 第 17 課：CSS 動畫和過渡
- 第 18 課：CSS 進階技巧
第三部分：JavaScript 互動程式（第 19-30 課）
JavaScript 是網頁的行為，實現動態互動和功能。
- 第 19 課：JavaScript 基礎介紹
- 第 20 課：變數和資料型別
- 第 21 課：運算子和控制流程
- 第 22 課：函式
- 第 23 課：陣列和物件
- 第 24 課：DOM 操作
- 第 25 課：事件處理
- 第 26 課：表單驗證
- 第 27 課：AJAX 和 Fetch API
- 第 28 課：ES6+ 新特性
- 第 29 課：本地儲存和 API
- 第 30 課：整合實戰專題
🎯 學習目標
完成本課程後，您將能夠：
- ✅ 使用 HTML 建立結構完整的網頁
- ✅ 運用 CSS 設計美觀且響應式的網頁版面
- ✅ 使用 JavaScript 實現互動功能和動態效果
- ✅ 理解現代網頁開發的最佳實踐
- ✅ 獨立完成完整的網頁專題
📖 如何使用本課程
- 循序漸進：建議按照課程順序學習，每個章節都建立在前面的基礎上
- 動手實作：每課都包含練習題和實作範例，請務必親自動手寫程式碼
- 查看範例：開啟 examples 目錄中的範例檔案，在瀏覽器中查看效果
- 反覆練習：遇到不懂的地方，多看幾次範例並多加練習
- 整合應用：學完每個部分後，試著整合所學的知識做小專題
🎬 範例檔案
本課程提供了豐富的範例檔案，所有範例都可以直接在瀏覽器中開啟查看效果：
- 📁 examples - 包含所有課程的範例代碼
- 每個課程都有對應的資料夾（如
lesson-01,lesson-02等） - 開啟 examples/index.html 查看完整的範例索引
- 可以直接雙擊 HTML 檔案在瀏覽器中開啟
- 建議使用開發者工具（F12）查看代碼結構
快速開始
- 開啟
examples/index.html查看所有範例 - 點擊任意範例連結在瀏覽器中查看效果
- 按 F12 開啟開發者工具查看 HTML/CSS 代碼
- 複製範例進行修改實驗
💻 開發環境準備
開始學習前，請準備以下工具：
- 文字編輯器：推薦使用 Visual Studio Code
- 網頁瀏覽器：推薦使用 Google Chrome 或 Firefox（含開發者工具）
- 練習資料夾：建立一個專門的資料夾存放練習檔案
📝 課程特色
- 🎓 系統化的學習路徑
- 💡 豐富的實例說明
- 🔧 實用的程式碼範例
- 📋 課後練習題
- 🚀 整合性的實戰專題
🤝 學習建議
- 每天花 1-2 小時學習
- 完成每課的練習題
- 將學到的知識記錄在筆記中
- 加入開發者社群，與他人交流學習心得
- 遇到問題時，善用 Google 和開發者文件
祝您學習愉快！讓我們開始這趟精彩的網頁開發之旅吧！🚀
版本：1.0
最後更新：2026 年 2 月