Web 標準模型

Web 的簡史

在 20 世紀 60 年代後期，美國軍方開發了一個名為 ARPANET 的通訊網路。這可以被認為是網際網路的先驅，因為它採用分組交換，並首次實現了 TCP/IP 協議套件。這兩項技術構成了網際網路基礎設施的基礎。

1980 年，蒂姆·伯納斯-李（通常被稱為 TimBL）編寫了一個名為 ENQUIRE 的筆記本程式，其中包含不同節點之間連結的概念。聽起來熟悉嗎？

快進到 1989 年，TimBL 撰寫了 資訊管理：一項提議 和 CERN 的超文字；這兩份出版物共同為 Web 的工作方式提供了背景。它們引起了相當大的興趣，足以說服 TimBL 的上司允許他繼續建立一個全球超文本系統。

到 1990-91 年，TimBL 已經建立了執行第一個版本全球資訊網（通常稱為 Web）所需的所有東西——HTTP、HTML、第一個 Web 瀏覽器（名為 WorldWideWeb）、一個 Web 伺服器和一些可供瀏覽的網頁。

1994 年，TimBL 創立了全球資訊網聯盟（W3C），這是一個彙集了來自眾多不同公司的代表，共同致力於建立 Web 技術的組織。W3C 致力於標準化和改進現有的 Web 技術，如 HTML 和 HTTP，並建立了 CSS 和 JavaScript 等新技術。CSS 和 JavaScript 對於賦予 Web 樣式和互動性尤其重要，使其看起來更像我們今天所知的 Web。

在接下來的幾年裡，Web 爆炸式發展，釋出了多個瀏覽器，建立了數千個 Web 伺服器，並建立了數百萬個網頁。其他標準組織也出現，以幫助標準化 Web 技術的不同方面。

Web 標準

Web 標準是我們用來構建網站的技術。這些標準以冗長的技術文件形式存在，稱為規範，它們詳細說明了技術應該如何工作。這些文件對於學習如何使用它們所描述的技術用處不大（這就是為什麼我們有像 MDN Web Docs 這樣的網站）。相反，它們旨在供軟體工程師實現這些技術（通常在 Web 瀏覽器中）。

標準機構和流程

Web 標準由標準機構建立——這些機構邀請來自不同技術公司的團體齊聚一堂，就技術應如何以最佳方式滿足其所有用例達成一致。

W3C 是最著名的 Web 標準機構，但還有其他機構。例如

• WHATWG 維護 HTML Living Standard，它精確描述了 HTML（所有 HTML 元素及其相關的 API 以及其他周邊技術）應如何實現。
• TC39 和 ECMA 規定併發布了 ECMAScript 標準，現代 JavaScript 就是基於此標準。
• Khronos 釋出 3D 圖形技術，例如 WebGL。

標準建立的完整過程可能深奧複雜。然而，除非您想建立自己的 Web 技術功能，否則您不需要理解其中的大部分。如果您想為新技術的討論做出貢獻並提供反饋，通常只需加入相關的郵件列表或其他討論機制。標準討論是公開進行的，因此稱為“開放”標準。

現在，我們將向您提供一個關於標準流程如何運作的通用、高階理解

1. 有人注意到需要一個新的 Web 標準功能，這將使開發人員的工作更輕鬆。例如，可能存在一種在 Web 使用者介面中普遍使用的常見模式，但實現起來很麻煩。一個專門的 CSS 功能將使其變得容易得多。這個“某人”可以是任何人——一個獨立的開發人員，或者一個為大型科技公司工作的工程師。

2. 該人與其他開發人員、瀏覽器工程師等討論此功能，並開始引起人們對實現該功能的興趣。通常他們會撰寫一份說明文件，解釋對該功能的需求以及它將如何工作，並提供一個程式碼演示，展示該功能在實際應用中的樣子。

3. 如果該功能引起了足夠的興趣，它將在相關標準機構工作組內正式討論。例如，CSS 功能通常由 CSS 工作組 (WG) 討論（另請參閱 CSS 工作組維基百科頁面 以獲取更多描述和歷史記錄）。在接受一項新的 Web 技術之前，必須對其進行嚴格評估，以確保它對 Web 有利——例如，它不會引入任何安全問題，它具有可訪問性和相容性，並且不依賴於專利。

4. 為了證明該功能，會發生幾件事。這些點都可能與第 3 點同時發生，甚至更早（瀏覽器供應商有時會實現專有/非標準功能，然後嘗試在之後將其標準化）

   1. 一個或多個瀏覽器廠商將實現新功能的實驗版本，通常預設停用，但那些希望測試並提供反饋的人可以啟用它。
   2. 工作組成員還會將其新增到技術規範中，以便瀏覽器廠商能夠一致地實現它。
   3. 他們還會徵求其他瀏覽器廠商的反饋，以瞭解他們對提案有什麼問題，以及他們實現該提案的可能性。這些被稱為標準立場。例如，請參閱 Mozilla 標準立場。
   4. 相關人員還將編寫一套全面的測試，以證明該功能按所述工作。

5. 最終，如果一切順利，該功能將在所有瀏覽器中實現，並可在建立網站時開始使用。

您可以在特定標準機構流程中找到更多資訊。例如：

• W3C 流程文件
• WHATWG — 工作模式
• TC39 流程

Web 標準關鍵原則

Web 的關鍵原則，也正是這些原則使得 Web 成為一個獨特而令人興奮的行業，如下所示：

• 開放貢獻和使用，因此不受專利限制或單一私人實體控制。
• 易於訪問和互操作。
• 它們不會破壞網路。

讓我們更詳細地瞭解這些內容。

“開放”標準

Web 標準的一個關鍵方面，也是 TimBL 和 W3C 從一開始就達成一致的，就是 Web（和 Web 技術）應該開放。這意味著它們可以自由貢獻和使用，不受專利/許可的限制。這很重要——如果一項 Web 技術依賴於專利/許可技術才能執行，那麼專利/所有者可能會向實現該技術的瀏覽器廠商收取鉅額費用，而這些成本最終會轉嫁給瀏覽器使用者。

此外，由於 Web 技術是開放的，由許多不同公司協作建立的，這意味著沒有任何一家公司可以控制它們，這是一件非常好的事情。您不會希望一家公司突然決定將整個 Web 放在付費牆後面，或者釋出一個每個人都必須購買才能繼續製作網站的新版本 HTML，或者更糟糕的是，決定他們不再感興趣並將其關閉。

開放標準使網路能夠保持一個免費的公共資源，任何人都可以免費編寫程式碼來構建網站，任何人都可以為標準建立過程做出貢獻。

可訪問性和互操作性

Web 和 Web 瀏覽器從根本上設計為使 Web 內容對殘障人士可訪問。它最初被設想為一個偉大的平衡器，使人們能夠不受環境限制地獲取資訊。這意味著，例如：

• 無法使用滑鼠或指向裝置的人可以使用鍵盤來瀏覽網頁。
• 視障人士可以放大內容，或者使用一種稱為螢幕閱讀器的程式來為他們朗讀內容，並以易於理解的方式描述控制元件。

此外，Web 技術旨在實現互操作性。由於 Web 技術是按照已釋出的標準實現的，因此瀏覽器應為給定輸入（例如，HTML、CSS 或 JS 程式碼）提供相同的渲染輸出——換句話說，網站應在多個瀏覽器中一致地工作。

不要破壞網路

您還會聽到關於開放網路標準的另一個短語是“不要破壞網路”。其背後的思想是，任何新的網路技術都應該與之前的東西向後相容，這樣現有的網站將繼續以與以前相同的方式執行。

Web 瀏覽器廠商應該能夠實現新的 Web 技術，而不會導致渲染或功能上的差異，從而導致他們的使用者認為網站已損壞並因此嘗試其他瀏覽器。

現代 Web 技術概述

如果您想成為一名前端 Web 開發人員，需要學習一些技術。在本節中，我們將簡要介紹它們。

HTML、CSS 和 JavaScript

HTML、CSS 和 JavaScript 是您用來構建網站的三個主要技術。您在上一模組中已經見過它們，但為了回顧：

• 超文字標記語言，或稱 HTML，是一種標記語言，由您可以包裝（標記）內容的各種元素組成，以賦予其含義（語義）和結構。如果我們採用房屋建造的類比，HTML 就像房屋的地基和牆壁，它們賦予房屋結構並將其連線在一起。
• 層疊樣式表 (CSS) 是一種基於規則的語言，用於為您的 HTML 應用樣式——例如，設定文字和背景顏色、新增邊框、動畫化事物或以某種方式佈局頁面。在房屋類比中，CSS 就像您用來美化房屋的油漆、牆紙、地毯和畫作。
• JavaScript 是我們用來為網站新增互動性的程式語言，從動態樣式切換到從伺服器獲取更新，再到複雜的 3D 圖形。
  • 您還會聽到 API 這個術語與 JavaScript 一起使用，它代表 應用程式程式設計介面。JavaScript API 是構建在 JavaScript 之上的功能，它允許您以可管理的方式控制其他更復雜的程式碼片段或計算機上的其他功能（例如您的網路攝像頭或麥克風等硬體裝置）。
  • 在房屋類比中，JavaScript 就像炊具、電視、微波爐或吹風機——賦予您房屋有用功能的東西。

其他網路技術

網路上還有其他技術，例如

• 如前所述，用於客戶端和伺服器之間通訊的 HTTP。
• 用於建立和操作向量圖形的 SVG。
• 用於描述數學公式的 MathML。

然而，HTML、CSS 和 JavaScript 是迄今為止最重要的學習技術，因此我們將在學習路徑中主要關注這些技術。

工具

一旦您瞭解了用於構建網頁的標準基礎技術（如 HTML、CSS 和 JavaScript），您很快就會接觸到各種可以使您的工作更輕鬆或更高效的工具。示例包括：

• 現代瀏覽器中的開發者工具，可用於除錯您的程式碼。
• 測試工具，可用於執行測試以顯示您的程式碼是否按預期執行。
• 基於 JavaScript 構建的框架和庫，可讓您更快速高效地構建某些型別的網站。
• 所謂的 Linters 和 格式化程式，它們採用一組編碼風格規則，檢查您的程式碼，並更新您的程式碼以遵循這些規則。Prettier，您在課程早期遇到過，就是格式化程式的一個例子。

伺服器端語言和框架

HTML、CSS 和 JavaScript 是前端（或客戶端）語言，這意味著它們由瀏覽器執行，以生成使用者可以使用的網站前端。

還有另一類語言稱為後端（或伺服器端）語言，這意味著它們在伺服器上執行，然後將結果傳送到瀏覽器顯示。伺服器端語言的一個典型用途是從資料庫中獲取一些資料，生成一些包含資料的 HTML，然後將 HTML 傳送到瀏覽器以顯示給使用者。

伺服器端框架和語言示例包括 ASP.NET (C#)、Django (Python)、Laravel (PHP) 和 Next.js (JavaScript)。

這些技術不被認為是“Web 標準”——它們是由W3C和WHATWG等Web標準組織之外的組織開發的——儘管其中一些可能擁有類似開放的流程。

靜態與動態

客戶端和伺服器端語言通常還有另一種描述方式，即靜態和動態。

• 一個普通的 HTML 檔案儲存在伺服器上。當被請求時，它原封不動地交付給客戶端，並由瀏覽器渲染。因為它不會改變，所以被稱為“靜態”。
• 當伺服器端程式碼（例如，Python 指令碼或 ASP.NET 頁面）生成一些包含資料的 HTML 並將該 HTML 返回給客戶端時，HTML 的內容會根據伺服器端程式碼所做的操作而變化。因此，它被稱為“動態”。

靜態程式碼和動態程式碼的概念往往有些重疊。伺服器端語言通常在模板檔案中定義 HTML 結構，這些結構大多是靜態 HTML，其中包含一些特殊的動態部分，這些部分根據需要插入的資料而變化。

Web 最佳實踐

我們簡要介紹了您將用於構建網站的技術。現在讓我們討論 Web 開發人員通常採用的最佳實踐，以確保他們的網站儘可能多的人使用。

在進行 Web 開發時，不確定性的主要原因在於您不知道每個使用者將使用何種技術組合來檢視您的網站。

• 使用者 1 可能正在 iPhone 上檢視，螢幕小而窄。
• 使用者 2 可能正在帶有寬屏顯示器的 Windows 筆記型電腦上檢視。
• 使用者 3 可能視力受損，並使用螢幕閱讀器閱讀和與網頁互動。
• 使用者 4 可能正在使用一臺無法執行現代瀏覽器的非常舊的桌上型電腦。

由於您不確切知道使用者將使用什麼，因此您需要採取防禦性設計——讓您的網站儘可能靈活，以便所有上述使用者都能使用它，即使他們可能無法獲得相同的體驗。

您將在學習過程中遇到以下概念，它們代表了您的網站應理想遵循的最佳實踐。現在不必過於擔心這些。在課程的大部分內容中，我們試圖隱式地教授這些知識，這意味著當我們教您 HTML、CSS 和 JavaScript 時，我們的示例將盡可能遵循最佳實踐。在您學習旅程的後期，您可能會探索這些領域的顯式教學。

漸進增強

建立一個最小化的體驗，為所有使用者提供基本功能，並在支援它們的瀏覽器中疊加更好的體驗和其他增強功能。漸進增強通常被認為不重要，因為現在瀏覽器往往更一致地支援新功能，而且人們往往擁有更快的網際網路連線和更高的資料使用限制。但是，考慮一些示例，例如減少裝飾以使移動體驗更流暢並節省資料，或者為按兆位元組付費或有計量連線的使用者提供更輕、低頻寬的體驗。

跨瀏覽器相容性

努力確保您的網頁在儘可能多的裝置上執行。這包括使用所有瀏覽器都支援的技術，為能夠處理這些技術的瀏覽器提供更好的體驗（漸進增強），以及/或編寫程式碼，使其在舊版瀏覽器中回退到更簡單但仍可用的體驗（稱為優雅降級）。它還需要進行測試，以檢視是否有任何在特定瀏覽器中失敗，然後進行更多工作來修復這些故障。

分層

將您的內容（HTML）、樣式（CSS）和行為（JavaScript）放在不同的程式碼檔案中，而不是將它們混雜在同一個地方。這樣做有很多好處，包括程式碼管理和理解，以及團隊協作/職責分離。實際上，這種分離並非總是清晰的。它是一個儘可能追求的理想，而不是一個絕對的要求。

響應式網頁設計

使您的功能和佈局靈活，以便它們可以自動適應不同的瀏覽器。一個明顯的例子是，一個網站在桌面上寬屏瀏覽器中以一種方式佈局，但在手機瀏覽器上顯示為更緊湊的單列布局。現在嘗試調整瀏覽器視窗的寬度，看看網站佈局發生了什麼變化。

效能

讓網站儘可能快地載入，同時使其直觀易用，這樣使用者就不會感到沮喪並轉到其他地方。

國際化

使網站能夠被來自不同文化、講不同語言的人使用。這裡既有技術方面的考慮（例如調整佈局，使其仍然適用於從右到左或從上到下的語言），也有人文方面的考慮（例如使用簡單、非俚語的語言，以便不同文化更有可能理解您的文字）。

隱私和安全

這兩個概念相互關聯但有所不同。隱私是指允許人們私下處理自己的事務，而不是監視他們或收集超出絕對必要的資料。安全是指以安全的方式構建您的網站，以便惡意使用者無法從您或您的使用者那裡竊取其中包含的資訊。

• 上一頁
• 概述：Web 標準
• 下一頁