歡迎來到 HTML5 完整教學課程！本課程將帶您從零開始，逐步掌握現代網頁開發的三大核心技術：HTML、CSS 和 JavaScript。

📚 課程結構

本課程分為三大部分，共 30 個章節，採用由淺入深的教學方式：

第一部分：HTML 基礎與進階（第 1-9 課）

HTML 是網頁的骨架，定義網頁的結構和內容。

第二部分：CSS 樣式設計（第 10-18 課）

CSS 是網頁的外觀，控制網頁的視覺呈現和布局。

第三部分：JavaScript 互動程式（第 19-30 課）

JavaScript 是網頁的行為，實現動態互動和功能。

🎯 學習目標

完成本課程後，您將能夠：

  • ✅ 使用 HTML 建立結構完整的網頁
  • ✅ 運用 CSS 設計美觀且響應式的網頁版面
  • ✅ 使用 JavaScript 實現互動功能和動態效果
  • ✅ 理解現代網頁開發的最佳實踐
  • ✅ 獨立完成完整的網頁專題

📖 如何使用本課程

  1. 循序漸進：建議按照課程順序學習，每個章節都建立在前面的基礎上
  2. 動手實作：每課都包含練習題和實作範例，請務必親自動手寫程式碼
  3. 查看範例：開啟 examples 目錄中的範例檔案，在瀏覽器中查看效果
  4. 反覆練習：遇到不懂的地方，多看幾次範例並多加練習
  5. 整合應用：學完每個部分後，試著整合所學的知識做小專題

🎬 範例檔案

本課程提供了豐富的範例檔案，所有範例都可以直接在瀏覽器中開啟查看效果：

  • 📁 examples - 包含所有課程的範例代碼
  • 每個課程都有對應的資料夾（如 lesson-01, lesson-02 等）
  • 開啟 examples/index.html 查看完整的範例索引
  • 可以直接雙擊 HTML 檔案在瀏覽器中開啟
  • 建議使用開發者工具（F12）查看代碼結構

快速開始

  1. 開啟 examples/index.html 查看所有範例
  2. 點擊任意範例連結在瀏覽器中查看效果
  3. 按 F12 開啟開發者工具查看 HTML/CSS 代碼
  4. 複製範例進行修改實驗

💻 開發環境準備

開始學習前，請準備以下工具：

  1. 文字編輯器：推薦使用 Visual Studio Code
  2. 網頁瀏覽器：推薦使用 Google Chrome 或 Firefox（含開發者工具）
  3. 練習資料夾：建立一個專門的資料夾存放練習檔案

📝 課程特色

  • 🎓 系統化的學習路徑
  • 💡 豐富的實例說明
  • 🔧 實用的程式碼範例
  • 📋 課後練習題
  • 🚀 整合性的實戰專題

🤝 學習建議

  • 每天花 1-2 小時學習
  • 完成每課的練習題
  • 將學到的知識記錄在筆記中
  • 加入開發者社群，與他人交流學習心得
  • 遇到問題時，善用 Google 和開發者文件

祝您學習愉快！讓我們開始這趟精彩的網頁開發之旅吧！🚀

版本：1.0
最後更新：2026 年 2 月