Web 的建置模組 5

如果您正在開始 Web 開發之旅，那麼掌握 Web 的「方式」和「原因」與學習 HTML、CSS 或 JavaScript 一樣重要。

您將獲得開始 Web 開發所需的所有基本知識。

互聯網如何運作？

網際網路是萬維網的支柱，是使萬維網成為可能的技術基礎設施。從最基本的角度來看，互聯網是一個由所有計算機組成的大型網絡，這些計算機相互通信。

「網路如何運作」的詳細影片

Web 基礎：2024 年 Web 建置模組指南

網路已經發生了巨大的發展，但其核心原則對於任何想要理解或建立數位世界的人來說仍然至關重要。本指南詳細介紹了網路的基本概念，從基本定義到支援現代線上體驗的技術。

1.萬維網（WWW）：一個互連的資訊系統

萬維網，通常簡稱為網絡，是一個由相互連接的文檔和資源組成的龐大系統，這些文檔和資源鏈接在一起並通過互聯網（底層網路基礎設施）。將其視為一個巨大的圖書館，資訊在全球範圍內共享和存取。

• 關鍵組件：
  • 資源： 這些是網路的建構塊 - 網頁、文件、圖像、影片和其他數位內容。
  • URL（統一資源定位符）： 標識每個資源的唯一位址，例如網頁的街道位址（例如，https://www.example.com/about）。
  • HTTP/HTTPS（超文本傳輸協定）： 控制 Web 瀏覽器和伺服器如何交換資訊的通訊規則（協定）。 HTTPS 透過加密增加了一層安全性。
  • 網路伺服器： 儲存並提供網路資源的電腦。
  • 網頁瀏覽器： 允許使用者存取網路資源並與之互動的軟體應用程式（例如 Chrome、Firefox 或 Edge）。

2. 網頁、網站和 Web 應用程式：了解差異

• 網頁： 單一文檔，通常以 HTML 編寫，可以顯示文字、圖像、影片和其他媒體。
• 網址： 相關網頁的集合，通常在單一網域下連結在一起。將其視為一本包含多個章節的書。
• Web 應用程式（Web 應用程式）： 一種更具互動性和動態性的網站類型，提供類似於桌面或行動應用程式的功能。例如 Gmail、Google Docs 和許多現代社交媒體平台。 Web 應用程式通常利用 JavaScript 框架和 API 等先進技術來提供豐富的使用者體驗。

3. 建立網頁：HTML、CSS 和 JavaScript 的三重奏

建立網頁涉及三項核心技術：

• HTML（超文本標記語言）： 基礎。 HTML 提供網頁的結構和內容，定義標題、段落、圖片和連結等元素。就像建築物的骨架。
• CSS（層疊樣式表）： 造型師。 CSS 控制網頁的呈現和視覺外觀，處理顏色、字體、佈局和響應能力（頁面如何適應不同的螢幕尺寸）等方面。就像建築物的室內設計和裝飾。
• JavaScript： 大腦。 JavaScript 為網頁加入了互動性和動態行為。它支援表單驗證、動畫、互動式地圖等功能。它就像建築物的電線和智慧家庭功能一樣，使其具有功能性和動態性。

4. 網路瀏覽器：您的網頁視窗

網頁瀏覽器是重要的軟體應用程序，可讓您存取萬維網並與之互動。 2024 年流行的瀏覽器包括：

• 谷歌瀏覽器
• Mozilla 火狐
• 微軟邊緣
• 野生動物園
• 勇敢
• 歌劇

瀏覽器工作原理：當您輸入 URL 時，瀏覽器會向託管該資源的 Web 伺服器發送請求。伺服器發回必要的檔案（HTML、CSS、JavaScript、圖像等），瀏覽器會解釋這些檔案以在您的裝置上呈現（顯示）網頁。

5. 伺服器：Web 的動力來源

伺服器是專門的計算機，用於儲存、處理網路資源並將其傳遞給客戶端（例如您的網頁瀏覽器）。伺服器有多種類型，每種都有特定的角色：

• 網頁伺服器： 設計用於提供網頁和其他網路內容。受歡迎的 Web 伺服器軟體包括 Apache、Nginx 和 Microsoft IIS。它們透過 HTTP/HTTPS 處理請求，與資料庫交互，並交付請求的資源。
• 郵件伺服器： 處理電子郵件發送、接收和路由。他們使用 SMTP（簡單郵件傳輸協定）、POP3（郵局協定版本 3）和 IMAP（網際網路訊息存取協定）等協定。
• 檔案伺服器： 允許使用者透過網路儲存、存取和管理檔案。他們經常使用 FTP（文件傳輸協定）或 SFTP（安全文件傳輸協定）。

6. 資料庫：組織網路訊息

資料庫是有組織的資料集合，可以輕鬆儲存、檢索、管理和更新資訊。它們對於大多數動態網站和 Web 應用程式至關重要。

• 關聯式資料庫（SQL）： 將資料儲存在具有行和列的表中，建立表格之間的關係。它們非常適合結構化數據，並使用 SQL（結構化查詢語言）進行資料操作。範例：MySQL、PostgreSQL、Oracle、SQL Server。
• 非關聯式資料庫 (NoSQL)： 以更靈活的格式儲存數據，例如文件、鍵值對或圖形。它們非常適合大量非結構化或半結構化資料。例：MongoDB、Cassandra、Redis、Couchbase。

7. 客戶端-伺服器架構：Web 互動的基礎

網路從根本上運行在客戶端-伺服器架構。

• 客戶端： 您的網頁瀏覽器，正在要求資源。
• 伺服器： 儲存和交付資源的電腦。

瀏覽器使用以下方式解釋接收到的資料：

• DOM（文件物件模型）解釋器： 解析 HTML 結構。
• CSS 解釋器： 套用 CSS 中定義的樣式。
• JavaScript 引擎： 執行 JavaScript 程式碼以新增互動性。

8. Web 開發的類型：前端、後端和全端

Web 開發通常分為三個主要領域：

• 前端開發： 專注於使用者介面 (UI) 和使用者體驗 (UX) – 使用者直接在瀏覽器中看到並與之互動的所有內容。前端開發人員使用 HTML、CSS 和 JavaScript，通常使用 React、Angular 或 Vue.js 等框架。
• 後端開發： 處理為前端提供支援的伺服器端邏輯、資料庫和 API。後端開發人員使用 Python、Java、Node.js、PHP 或 Ruby 等伺服器端語言以及資料庫技術。
• 全端開發： 涵蓋前端和後端開發。全端開發人員精通一系列技術，使他們能夠處理 Web 應用程式的各個方面。流行的全端組合包括 MERN（MongoDB、Express.js、React、Node.js）、MEAN（MongoDB、Express.js、Angular、Node.js）等。

9. 虛擬主機：讓您的網站易於存取

網站寄存 是一項讓網路上的使用者可以存取您的網站或 Web 應用程式的服務。網站寄存提供者在其伺服器（資料中心）上提供空間來儲存您網站的檔案並使其 24/7 可用。流行的託管選項包括共享託管、VPS 託管、專用伺服器和雲端託管。

感謝您的寶貴時間。

以上是Web 的建置模組 5的詳細內容。更多資訊請關注PHP中文網其他相關文章！