1. Web 標準

學習成果

• 客戶端和伺服器及其在 Web 中的作用。

• DNS 及其工作原理（高層概述）。

• TCP/IP 和 HTTP。

• HTTP 語法（基礎級別）。

• 常見的 HTTP 響應程式碼（例如 200、301、403、404 和 500）。

• URL 的組成部分（協議、域名和子域名）。

• 頂級域名 (TLD) 以及如何註冊域名。

• 託管，如何購買以及如何將網站上線。

注意:

• 本節的關鍵目標之一是高層次地理解 Web 在程式碼之外是如何運作的。
• 您還應該掌握一套術語，以便能夠精確地談論 Web 的運作方式。

資源

• 請求和響應，Scrimba 課程合作伙伴

• Web 是如何工作的

• Web 如何工作：面向 Web 開發新手（或任何人）的入門指南，freeCodeCamp (2015)

• 什麼是域名？

• 什麼是 URL？

• 釋出您的網站

學習成果

• HTML、CSS 和 JavaScript 的用途。

注意:

主要 Web 創作技術的用途

• HTML 用於結構和語義（含義）。
• CSS 用於樣式和佈局。
• JavaScript 用於控制動態行為。

• 它們在更大的生態系統中的位置，以及它們並非唯一的 Web 技術。

• 為什麼分離層級是個好主意。

注意:

分離是個好主意，因為

• 程式碼管理和理解。
• 團隊協作/角色分離。
• 效能。

• 事實上，在現實中，分離並不總是清晰的。

注意:

• 一個典型的例子是使用 JavaScript 來即時動態更新 CSS 樣式，以響應應用程式狀態的變化、使用者選擇等。
• 通常的做法是修改 `Element.style.x` 屬性，這會導致內聯 CSS 被注入到 HTML 中。更好的策略是新增/更改元素的類，以避免內聯 CSS。
• 更嚴重的是，JavaScript 框架使用各種“HTML-in-JavaScript”或“CSS-in-JavaScript”的自定義語法，導致大量混合了不同語法型別。

• 這種分離的性質——一個可以努力追求的理想，而不是絕對的。

• 漸進增強的概念。

注意:

漸進增強通常被認為不重要，因為如今瀏覽器對新功能的相容性越來越好，而且人們的網路連線速度也越來越快。然而，您應該考慮與現代相關的例子——減少裝飾以使移動體驗更流暢並節省資料，或者為仍在按兆位元組支付家庭網際網路費用的發展中國家的使用者提供更簡單、低頻寬的體驗。

這延伸到響應式設計，稍後將進行更深入的介紹。

資源

• Web 開發基礎入門，Scrimba 課程合作伙伴

• Web 和 Web 標準

• Web 標準模型，explainers.dev

• 什麼是漸進增強，為什麼它很重要

學習成果

• 標準機構如何運作——例如 W3C、WHATWG、TC39 和 Khronos Group。

• 標準建立過程。

注意:

• Web 的基本原則——可互操作、可訪問、協作，並且不被任何單一公司擁有。
• 這個基礎意味著 Web 是一個獨特且令人興奮的行業，值得參與。
• 完整的 W3C 標準過程是深入和學術的。目前，您應該瞭解不同個人和公司如何參與標準過程，以及不同成熟階段如何旨在消除問題（例如，互操作性問題、專利問題）。

• Web 標準功能的生命週期

  • 實驗性：通常只在一個瀏覽器引擎中可用，因為它正在開發中，有時甚至還沒有規範。太早無法在生產環境中使用。

  • 穩定：開發完成，已規範，可在各種瀏覽器引擎中使用。

  • 已棄用：不再使用，可能仍在瀏覽器中，但已標記為刪除。

• Web 標準構建的關鍵原則

  • 開放貢獻和使用。

  • 無專利障礙或被任何單一私人實體控制。

  • 可訪問和可互操作。

  • 它們不會破壞 Web。

資源

• Web 和 Web 標準

• 關於 W3C Web 標準，W3C

• W3C 推薦跟蹤，W3C (2021)

• WHATWG 常見問題解答，WHATWG

• Web 平臺設計原則，W3C (2023)

學習成果

• HTTP 請求-響應模型。

• HTTP 響應中返回的不同型別的資源。

注意:

需要理解的不同型別的下載資源有

• HTML 檔案。
• CSS 檔案。
• JavaScript 檔案。
• 媒體資源，如圖片、影片、音訊檔案、PDF 和 SVG。
• 瀏覽器無法原生處理的其他檔案型別，會將其交給裝置上的相關應用程式，例如 Word 文件和 PowerPoint 幻燈片。

• 靜態檔案與動態檔案：一些下載的程式碼檔案將是靜態的（它們在伺服器上的形式與下載時相同），而一些將是動態的（由伺服器根據可變資料生成）。

• 這些檔案如何組合起來建立一個 Web 文件，然後由瀏覽器顯示。

注意:

渲染網頁的不同階段

• 請求一個網頁（例如，透過點選連結）。
• 執行 DNS 查詢，以查詢網頁所需的所有資源的伺服器位置。
• 開始獲取資源。這包括 TCP 握手、TLS 協商以及 HTTP 請求和響應。
• 從下載的 HTML 中組裝 DOM 樹。
• 從 CSS 規則構建 CSSOM。
• 解析、解釋、編譯和執行 JavaScript。
• 構建輔助技術（例如螢幕閱讀器）可以使用的可訪問性樹。
• 從 DOM 和 CSSOM 建立渲染樹，以確定應用於每個 DOM 節點的視覺樣式。
• 計算頁面佈局。
• 透過繪製和複合，將樣式化、佈局好的節點按正確的順序繪製到螢幕上。

• 為什麼瀏覽器有時被視為一個不友好的程式設計環境

  • 與其他程式設計環境不同，很難保證您的程式碼將在什麼環境下執行。

  • 您無法保證使用者的作業系統、瀏覽器、語言、位置、網路連線、CPU、GPU、記憶體等。

  • 您需要擁抱不確定性，並學會防禦性程式設計。這會回溯並擴充套件我們在 1.2 HTML、CSS 和 JavaScript 三角 中研究的概念。此處也是一個檢視相關概念（如錯誤處理、功能檢測和響應式設計）的好地方。

• 另一方面——為什麼 Web 是一個很棒的程式設計環境

  • 它的基本狀態是可訪問和可連結的。其中一些基本功能在其他環境中難以實現。

  • 透過 Web 進行應用程式交付簡單而強大。

  • 更新很容易——在很多情況下，您只需重新載入瀏覽器標籤頁即可。您不必擔心不斷下載和安裝大型軟體包。

  • 社群充滿活力且樂於助人，並且有很多很棒的學習資源。

資源

• 填充頁面：瀏覽器如何工作

• 處理檔案

• 瀏覽器如何工作，freeCodeCamp (2018)