Web 開發教程 - MDN Web Docs

面向完全的初學者

使用 HTML 構建內容結構: 我們的 HTML 入門學習模組從基礎開始教授 HTML — 無需任何先驗知識。它為您打下基礎，讓您熟悉重要的概念和語法，瞭解如何將 HTML 應用於文字，如何建立超連結，以及如何使用 HTML 構建網頁結構。
面向初學者的 HTML: 面向初學者的 HTML 指南，包括對常見標籤（包括 HTML 標籤）的解釋。還包括一個逐步指南，介紹如何使用程式碼示例建立基本網頁。
HTML 挑戰: 使用這些挑戰來磨練您的 HTML 技能（例如，“我應該使用 <h2> 元素還是 <strong> 元素？”），專注於有意義的標記。

Web 表單: 表單是 Web 中非常重要的一部分 — 它們提供了您與網站互動所需的大部分功能，例如註冊和登入、傳送反饋、購買產品等。此模組將帶您入門表單的客戶端部分。
編寫快速載入 HTML 頁面的技巧: 最佳化網頁，為訪問者提供更具響應性的網站，並減少 Web 伺服器和網際網路連線的負載。

CSS 基礎: CSS（層疊樣式表）是您用於為網頁設定樣式的程式碼。CSS 基礎 將帶您瞭解入門所需的一切。我們將回答諸如：如何將文字設定為黑色或紅色？如何將內容顯示在螢幕上的特定位置？如何用背景影像和顏色裝飾我的網頁？
CSS 樣式基礎: CSS（層疊樣式表）用於設定網頁的樣式和佈局 — 例如，更改內容的字型、顏色、大小和間距，將其分成多列，或新增動畫和其他裝飾性功能。本模組透過 CSS 工作原理、語法外觀以及如何開始使用 CSS 為 HTML 新增樣式等基礎知識，為您走向 CSS 精通之路提供了一個溫和的開端。
選擇器: 使用 CSS 定位 HTML 元素，包括基於元素狀態的定位。
優先順序: 理解瀏覽器演算法，該演算法用於確定在存在衝突宣告時哪些 CSS 宣告被應用於元素，並附帶一個特異度測驗。
處理衝突: 層疊、特異度和繼承控制著 CSS 如何應用於 HTML 以及如何解決樣式宣告之間的衝突。
CSS 文字樣式: 在這裡，我們將探討文字樣式基礎知識，包括設定字型、粗細、斜體、行間距和字間距，以及陰影和其他文字功能。模組最後，我們將探討如何將自定義字型應用於您的頁面，以及如何設定列表和連結的樣式。
解決常見的 CSS 問題: 初學者常見問題解答。

CSS 佈局: 此時，我們已經學習了 CSS 基礎知識、文字樣式設定以及內容容器（盒子）的樣式設定和操作。現在是時候瞭解如何將這些盒子相對於視口和彼此進行正確放置了。我們已經涵蓋了必要的先決條件，現在可以深入研究 CSS 佈局，探討不同的顯示設定、涉及浮動和定位的傳統佈局方法，以及像 flexbox 這樣的新型佈局工具。
CSS 參考: CSS 完全參考，包含 Firefox 和其他瀏覽器支援的詳細資訊。
響應式網格: 設計能夠隨著瀏覽器視窗流體縮放的佈局，同時仍使用排版網格。
CSS 挑戰: 鍛鍊您的 CSS 技能，看看您還需要在哪裡加強練習。

使用 JavaScript 進行動態指令碼編寫: 在此模組中，我們將繼續介紹 JavaScript 的所有關鍵基礎特性，重點關注常見的程式碼塊型別，如條件語句、迴圈、函式和事件。您已經在課程中遇到過這些內容，但只是略過 — 在這裡我們將詳細討論它們。
JavaScript 入門: 什麼是 JavaScript，它如何幫助您？
Codecademy: Codecademy 是學習 JavaScript 編碼的便捷方式。它具有互動性，您可以與朋友一起學習。
freeCodeCamp: freeCodeCamp 教授各種 Web 開發語言和框架。它還有一個論壇、一個網際網路廣播電臺和一個部落格。

JavaScript 物件入門: 在 JavaScript 中，大多數事物都是物件，從字串和陣列等核心 JavaScript 功能到構建在 JavaScript 之上的瀏覽器 API。您甚至可以建立自己的物件，將相關函式和變數封裝到高效的包中。如果您想深入瞭解該語言的知識並編寫更高效的程式碼，理解 JavaScript 的面向物件性質非常重要，因此我們提供了此模組來幫助您。在這裡，我們將詳細講解物件理論和語法，探討如何建立自己的物件，並解釋 JSON 資料是什麼以及如何處理它。
客戶端 Web API: 在為網站或應用程式編寫客戶端 JavaScript 時，您很快就會開始使用 API — 用於操作瀏覽器和執行網站的作業系統不同方面，甚至是從其他網站或服務獲取資料的介面。在此模組中，我們將探討 API 是什麼，以及如何在開發工作中經常遇到的常用 API。
Eloquent JavaScript: 面向中級和高階 JavaScript 方法的綜合指南。
Speaking JavaScript: 面向希望快速、正確地學習 JavaScript 的程式設計師，以及希望深化技能和/或查詢特定主題的 JavaScript 程式設計師。
JavaScript 核心設計模式: JavaScript 核心設計模式簡介。
JavaScript.info - 現代 JavaScript 教程: 第一部分：語言。第二部分：與瀏覽器互動。

JavaScript 指南: 一份全面的、定期更新的 JavaScript 指南，涵蓋從初學者到高階的所有學習級別。
You Don't Know JS: 一系列深入探討 JavaScript 語言核心機制的書籍。
JavaScript 花園: 關於 JavaScript 中最奇特部分的文件。
探索 ES6: 關於 ECMAScript 2015 的可靠且深入的資訊。
JavaScript 模式: JavaScript 模式和反模式集合，涵蓋函式模式、jQuery 模式、jQuery 外掛模式、設計模式、通用模式、字面量和建構函式模式、物件建立模式、程式碼重用模式、DOM。
瀏覽器工作原理: 一篇詳細的研究文章，描述了不同的現代瀏覽器、它們的引擎、頁面渲染等。
JavaScript 影片: JavaScript 影片集。

WebExtensions: WebExtensions 是一個用於開發瀏覽器外掛的跨瀏覽器系統。該系統在很大程度上相容 Google Chrome 和 Opera 支援的擴充套件 API。為這些瀏覽器編寫的擴充套件在大多數情況下都可以在 Firefox 或 Microsoft Edge 中執行，只需做少量修改。該 API 也完全相容多程序 Firefox。

此頁面最後修改於 2025 年 4 月 23 日，由 MDN 貢獻者。