網路和網路標準

我們只簡要介紹，因為有很多（更詳細的）關於 Web 歷史的資料，我們將在稍後提供連結（如果你想了解更多詳細資訊，也可以嘗試在你喜歡的搜尋引擎中搜索“Web 歷史”，看看你能找到什麼）。

在 1960 年代後期，美國軍方開發了一個名為 ARPANET 的通訊網路。這可以看作是 Web 的前身，因為它執行在 分組交換 上，並首次實現了 TCP/IP 協議套件。這兩種技術構成了網際網路基礎設施的基礎。

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

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

到 1990 年底，TimBL 已建立了執行 Web 的第一個版本所需的一切——HTTP，HTML，第一個 Web 瀏覽器，稱為 WorldWideWeb，一個 HTTP 伺服器，以及一些網頁可供檢視。

在隨後的幾年裡，Web 迅速發展，釋出了多個瀏覽器，建立了數千個 Web 伺服器，並建立了數百萬個網頁。好吧，這是一個關於發生的事情的非常簡單的總結，但我們確實承諾你一個簡短的總結。

最後一個要分享的重要資料點是，1994 年，TimBL 成立了 全球資訊網聯盟 (W3C)，這是一個組織，它彙集了來自許多不同科技公司的代表，共同制定 Web 技術規範。在那之後，其他技術相繼出現，例如 CSS 和 JavaScript，Web 開始變得越來越像我們今天所知道的 Web。

**Web 標準** 是我們用來構建網站的技術。這些標準存在於稱為規範的長篇技術文件中，這些文件詳細描述了技術的具體工作方式。這些文件對於學習如何使用它們描述的技術不是很有用（這就是我們擁有像 MDN Web Docs 這樣的網站的原因），而是旨在供軟體工程師使用這些技術（通常在 Web 瀏覽器中）。

例如，HTML Living Standard 精確描述了 HTML（所有 HTML 元素、以及它們相關的 API 和其他周邊技術）應該如何實現。

Web 標準由標準機構建立——這些機構邀請來自不同科技公司的群體聚在一起，就技術的最佳工作方式達成一致，以滿足所有用例。W3C 是最知名的 Web 標準機構，但還有其他機構，例如 WHATWG（維護 HTML 語言的活動標準），ECMA（釋出 ECMAScript 的標準，JavaScript 基於此），Khronos（釋出 3D 圖形的技術，例如 WebGL），以及其他機構。

Web 標準的一個關鍵方面是，TimBL 和 W3C 從一開始就同意 Web（和 Web 技術）應該對貢獻和使用都是免費的，並且不受專利/許可的約束。因此，任何人都可以免費編寫程式碼來構建網站，任何人都可以參與標準建立過程，在該過程中編寫規範。

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

這使得 Web 能夠保持一個免費提供的公共資源。

你還會聽到關於開放 Web 標準的另一個短語是“不要破壞 Web”——這個理念是，任何引入的新 Web 技術都應該向後相容之前的版本（即舊網站將繼續正常工作），並且向前相容（未來的技術反過來將與我們目前擁有的技術相容）。當你學習這裡提供的學習材料時，你將開始瞭解如何透過一些非常巧妙的設計和實施工作來實現這一點。

如果你正在尋找工作，Web 行業是一個非常有吸引力的市場。最近公佈的數字顯示，目前全球大約有 1900 萬名 Web 開發人員，而且這個數字將在未來十年翻一番以上。同時，該行業存在技能短缺——那麼還有什麼比現在學習 Web 開發更好的時機呢？

然而，並非所有都是輕鬆愉快的——構建網站比以前複雜得多，你必須花一些時間學習你需要使用的所有不同技術，你需要了解的所有技術和最佳實踐，以及你需要實現的所有典型模式。你需要幾個月的時間才能真正開始上手，然後你需要不斷學習，以便你的知識能夠跟上 Web 平臺上出現的所有新工具和功能，並不斷練習和完善你的技藝。

唯一不變的是變化。

這聽起來很難嗎？別擔心——我們的目標是為你提供入門所需的一切，而且事情會變得更容易。一旦你接受了 Web 的不斷變化和不確定性，你就會開始享受其中。作為 Web 社群的一部分，你將擁有一個完整的聯絡人網路和有用的資料來幫助你，你將開始享受它帶來的創造性可能性。

你現在是一位數字創意人。享受這種體驗，以及謀生的潛力。

如果你想成為一名前端 Web 開發人員，需要學習一些技術。在本節中，我們將簡要介紹它們。有關它們如何協同工作的更詳細說明，請閱讀我們的文章 Web 如何工作。

你可能現在正使用 Web 瀏覽器閱讀這些文字（除非你打印出來，或者使用輔助技術，例如螢幕閱讀器來朗讀給你聽）。Web 瀏覽器是人們用來瀏覽 Web 的軟體程式，包括 Firefox，Chrome，Opera，Safari 和 Edge。

超文字傳輸協議，或 HTTP，是一種訊息協議，允許 Web 瀏覽器與 Web 伺服器（儲存網站的位置）通訊。典型的對話類似於

"Hello web server. Can you give me the files I need to render bbc.co.uk"?

"Sure thing web browser — here you go"

[Downloads files and renders web page]

HTTP 訊息（稱為請求和響應）的實際語法不是那麼人性化，但這讓你瞭解了基本思路。

HTML，CSS 和 JavaScript 是構建網站的主要三種技術

• 超文字標記語言，或 **HTML**，是一種標記語言，由不同的元素組成，你可以將內容包裝（標記）在其中，以賦予它意義（語義）和結構。簡單的 HTML 如下所示
  html

  <h1>This is a top-level heading</h1>
  
  <p>This is a paragraph of text.</p>
  
  <img src="cat.jpg" alt="A picture of my cat" />
  

  如果我們採用房屋建造的類比，HTML 就相當於房屋的地基和牆壁，它們賦予房屋結構並將其固定在一起。
• 層疊樣式表 (**CSS**) 是一種基於規則的語言，用於將樣式應用於你的 HTML——例如，設定文字和背景顏色，新增邊框，動畫化事物，或者以某種方式佈局頁面。例如，以下程式碼將使我們的 HTML 段落變為紅色
  css

  p {
    color: red;
  }
  

  在房屋類比中，CSS 就相當於油漆、桌布、地毯和繪畫，你用它們來使房屋看起來漂亮。
• **JavaScript** 是我們用來為網站新增互動性的程式語言，從動態樣式切換，到從伺服器獲取更新，一直到複雜的 3D 圖形。以下簡單的 JavaScript 程式碼將在記憶體中儲存對我們段落的引用，並更改其內部的文字
  js

  let pElem = document.querySelector("p");
  pElem.textContent = "We changed the text!";
  

  在房屋類比中，JavaScript 就相當於烹飪爐、電視、微波爐或吹風機——賦予你的房屋有用功能的事物。

一旦你學習了可用來構建網頁的“原始”技術（如 HTML、CSS 和 JavaScript），你很快就會開始遇到各種工具，這些工具可以用來使你的工作更容易或更高效。例如

• 現代瀏覽器中的 開發者工具 可用來除錯程式碼。
• 測試工具 可用來執行測試，以檢視你的程式碼是否按預期執行。
• 構建在 JavaScript 之上的庫和框架，使你能夠更快、更有效地構建某些型別的網站。
• 所謂的“程式碼規範檢查器”，它們會根據一組規則檢視你的程式碼，並突出顯示你不按規則操作的地方。
• 縮小器，它們會刪除程式碼檔案中的所有空白，從而使檔案更小，因此可以更快地從伺服器下載。

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

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

示例伺服器端框架包括 ASP.NET（使用 C#）、Django（使用 Python）、Laravel（使用 PHP）和 Next.js（使用 JavaScript）。

我們簡要介紹了構建網站所需的幾種技術。現在讓我們討論一下你應該採用的最佳實踐，以確保你能夠以最佳方式使用這些技術。

在進行網頁開發時，最大的不確定性來自你無法預知每個使用者會使用什麼技術組合來瀏覽你的網站。

• 使用者 1 可能會用 iPhone 瀏覽，螢幕小而窄。
• 使用者 2 可能會用 Windows 筆記型電腦瀏覽，連線著寬屏顯示器。
• 使用者 3 可能是盲人，使用螢幕閱讀器將網頁內容朗讀出來。
• 使用者 4 可能會使用一臺非常老舊的臺式電腦，無法執行現代瀏覽器。

由於你無法確切知道使用者會使用什麼裝置，因此需要進行防禦性設計——使你的網站儘可能靈活，以便上述所有使用者都能使用它，即使他們可能無法獲得完全相同的體驗。簡而言之，我們努力讓儘可能多的人都能使用網路。

在學習過程中，你將遇到以下概念。

• 跨瀏覽器相容性是指努力確保你的網頁在儘可能多的裝置上都能正常執行。這包括使用所有瀏覽器都支援的技術，為能夠處理這些技術的瀏覽器提供更好的體驗（漸進增強），以及編寫程式碼以使其在舊版瀏覽器中回退到更簡單但仍然可用的體驗（優雅降級）。它還包括大量測試，以檢視某些瀏覽器中是否出現任何錯誤，然後進行更多工作來修復這些錯誤。
• 響應式網頁設計是指使你的功能和佈局靈活，以便它們能夠自動適應不同的瀏覽器。一個明顯的例子是，一個網站在桌面上的寬屏瀏覽器中以一種方式佈局，但在手機瀏覽器中以更緊湊的單列布局顯示。現在嘗試調整瀏覽器視窗的寬度，看看會發生什麼。
• 效能是指使網站載入速度儘可能快，但也使其直觀易用，這樣使用者就不會感到沮喪而轉到其他地方。
• 無障礙性是指使你的網站儘可能多的人都能使用（相關概念是多樣性和包容性，以及包容性設計）。這包括視障人士、聽障人士、認知障礙人士或身體殘疾人士。它還超越了殘疾人士——年輕人或老年人、來自不同文化的人、使用移動裝置的人，或網路連線不可靠或速度慢的人呢？
• 國際化是指使網站適應不同文化的使用者，他們使用不同的語言。這裡有一些技術方面的考慮因素（例如，調整你的佈局，使其仍然適用於從右到左，甚至垂直語言），也有一些人文方面的考慮因素（例如，使用簡單、不含俚語的語言，這樣將你的語言作為第二或第三語言的人更有可能理解你的文字）。
• 隱私和安全。這兩個概念相關但不同。隱私是指讓人們能夠私密地進行活動，而不是監視他們或收集比絕對需要更多的資料。安全是指以安全的方式構建你的網站，以防止惡意使用者從你或你的使用者那裡竊取網站上的資訊。

• 全球資訊網的歷史
• 網際網路是如何工作的？