108課綱下拉選單與新增科目 - HTML 學習系統
本系統整合了 HTML、CSS 與 JavaScript 的互動學習功能，除了基本的下拉選單與新增科目功能外， 還提供 HTML 實作練習、進階 DOM 操作、以及小測驗，讓你在實作中學習網頁設計的核心概念。
教學內容說明
1. HTML 結構
系統分為教學說明區、基礎教學、應用程式區、互動任務、HTML 實作練習、DOM 操作與小測驗區， 讓你從理論到實作全方位學習 HTML 與相關技術。
- 學段：下拉選單（小學、國中、高中）。
- 年級：下拉選單（1 到 6）。
- 主題：文字輸入框（預設值為「填充格」）。
2. CSS 樣式設計
CSS 用於美化頁面，設定背景、字型、邊框與按鈕效果，讓介面看起來清晰現代。
3. JavaScript 功能
JavaScript 為系統加入互動性，監聽表單事件、操作 DOM、以及即時回饋操作結果，讓你能夠新增、編輯、刪除項目， 並透過小測驗及 DOM 練習深入理解程式運作流程。
基礎教學
以下介紹 HTML、CSS 與 JavaScript 的基本知識：
HTML 基礎
HTML 定義網頁內容的結構。
例如，<h1> 標籤定義主標題，<p> 標籤定義段落，所有 HTML 文件皆以 DOCTYPE 宣告開頭。
CSS 基礎
CSS 負責設定網頁的外觀，例如背景顏色、字型與間距。
你可以使用
background-color 設定背景，用 font-size 調整字體大小，以及 margin 與 padding 控制間距。
JavaScript 基礎
JavaScript 為網頁增加互動性，能夠根據使用者動作更新內容。
例如，點擊按鈕後改變頁面中的文字內容或樣式，動態更新資料，都是利用 JavaScript 完成。
填充格系統
項目列表
HTML 實作練習
在下方編輯器撰寫 HTML 代碼，點擊「預覽」後，可在預覽區查看實際效果，並可下載程式碼。
進階 DOM 操作練習
利用下方按鈕新增、編輯、刪除一段段落，練習操作 DOM 元素。