如果您正在開始 Web 開發(fā)之旅，那么掌握 Web 的“方式”和“原因”與學(xué)習(xí) HTML、CSS 或 JavaScript 一樣重要。

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

互聯(lián)網(wǎng)如何運作？

互聯(lián)網(wǎng)是萬維網(wǎng)的支柱，是使萬維網(wǎng)成為可能的技術(shù)基礎(chǔ)設(shè)施。從最基本的角度來看，互聯(lián)網(wǎng)是一個由所有計算機組成的大型網(wǎng)絡(luò)，這些計算機相互通信。

“互聯(lián)網(wǎng)如何運作”的詳細視頻

Web 基礎(chǔ)知識：2024 年 Web 構(gòu)建模塊指南

網(wǎng)絡(luò)已經(jīng)發(fā)生了巨大的發(fā)展，但其核心原則對于任何想要理解或構(gòu)建數(shù)字世界的人來說仍然至關(guān)重要。本指南詳細介紹了網(wǎng)絡(luò)的基本概念，從基本定義到支持現(xiàn)代在線體驗的技術(shù)。

1.萬維網(wǎng)（WWW）：一個互連的信息系統(tǒng)

萬維網(wǎng)，通常簡稱為網(wǎng)絡(luò)，是一個由相互連接的文檔和資源組成的龐大系統(tǒng)，這些文檔和資源鏈接在一起并通過互聯(lián)網(wǎng)（底層網(wǎng)絡(luò)基礎(chǔ)設(shè)施）。將其視為一個巨大的圖書館，信息在全球范圍內(nèi)共享和訪問。

• 關(guān)鍵組件：
  • 資源： 這些是網(wǎng)絡(luò)的構(gòu)建塊 - 網(wǎng)頁、文檔、圖像、視頻和其他數(shù)字內(nèi)容。
  • URL（統(tǒng)一資源定位符）： 標識每個資源的唯一地址，例如網(wǎng)頁的街道地址（例如，https://www.example.com/about）。
  • HTTP/HTTPS（超文本傳輸??協(xié)議）： 控制 Web 瀏覽器和服務(wù)器如何交換信息的通信規(guī)則（協(xié)議）。 HTTPS 通過加密增加了一層安全性。
  • 網(wǎng)絡(luò)服務(wù)器： 存儲和提供網(wǎng)絡(luò)資源的計算機。
  • 網(wǎng)絡(luò)瀏覽器： 允許用戶訪問網(wǎng)絡(luò)資源并與之交互的軟件應(yīng)用程序（例如 Chrome、Firefox 或 Edge）。

2. 網(wǎng)頁、網(wǎng)站和 Web 應(yīng)用程序：了解差異

• 網(wǎng)頁： 單個文檔，通常用 HTML 編寫，可以顯示文本、圖像、視頻和其他媒體。
• 網(wǎng)站： 相關(guān)網(wǎng)頁的集合，通常在單個域名下鏈接在一起。將其視為一本包含多個章節(jié)的書。
• Web 應(yīng)用程序（Web 應(yīng)用程序）： 一種更具交互性和動態(tài)性的網(wǎng)站類型，提供類似于桌面或移動應(yīng)用程序的功能。示例包括 Gmail、Google Docs 和許多現(xiàn)代社交媒體平臺。 Web 應(yīng)用程序通常利用 JavaScript 框架和 API 等先進技術(shù)來提供豐富的用戶體驗。

3. 構(gòu)建網(wǎng)頁：HTML、CSS 和 JavaScript 的三重奏

創(chuàng)建網(wǎng)頁涉及三項核心技術(shù)：

• HTML（超文本標記語言）： 基礎(chǔ)。 HTML 提供網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，定義標題、段落、圖像和鏈接等元素。就像建筑物的骨架。
• CSS（層疊樣式表）： 造型師。 CSS 控制網(wǎng)頁的呈現(xiàn)和視覺外觀，處理顏色、字體、布局和響應(yīng)能力（頁面如何適應(yīng)不同的屏幕尺寸）等方面。就像建筑物的室內(nèi)設(shè)計和裝飾。
• JavaScript： 大腦。 JavaScript 為網(wǎng)頁添加了交互性和動態(tài)行為。它支持表單驗證、動畫、交互式地圖等功能。它就像建筑物的電線和智能家居功能一樣，使其具有功能性和動態(tài)性。

4. 網(wǎng)絡(luò)瀏覽器：您的網(wǎng)絡(luò)窗口

網(wǎng)絡(luò)瀏覽器是重要的軟件應(yīng)用程序，可讓您訪問萬維網(wǎng)并與之交互。 2024 年流行的瀏覽器包括：

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

瀏覽器工作原理：當您輸入 URL 時，瀏覽器會向托管該資源的 Web 服務(wù)器發(fā)送請求。服務(wù)器發(fā)回必要的文件（HTML、CSS、JavaScript、圖像等），瀏覽器解釋這些文件以在您的設(shè)備上呈現(xiàn)（顯示）網(wǎng)頁。

5. 服務(wù)器：Web 的動力源

服務(wù)器是專門的計算機，用于存儲、處理網(wǎng)絡(luò)資源并將其傳遞給客戶端（例如您的網(wǎng)絡(luò)瀏覽器）。服務(wù)器有多種類型，每種都有特定的角色：

• 網(wǎng)絡(luò)服務(wù)器： 設(shè)計用于提供網(wǎng)頁和其他網(wǎng)絡(luò)內(nèi)容。流行的 Web 服務(wù)器軟件包括 Apache、Nginx 和 Microsoft IIS。它們通過 HTTP/HTTPS 處理請求，與數(shù)據(jù)庫交互，并交付請求的資源。
• 郵件服務(wù)器： 處理電子郵件發(fā)送、接收和路由。他們使用 SMTP（簡單郵件傳輸協(xié)議）、POP3（郵局協(xié)議版本 3）和 IMAP（互聯(lián)網(wǎng)消息訪問協(xié)議）等協(xié)議。
• 文件服務(wù)器： 允許用戶通過網(wǎng)絡(luò)存儲、訪問和管理文件。他們經(jīng)常使用 FTP（文件傳輸協(xié)議）或 SFTP（安全文件傳輸協(xié)議）。

6. 數(shù)據(jù)庫：組織網(wǎng)絡(luò)信息

數(shù)據(jù)庫是有組織的數(shù)據(jù)集合，可以輕松存儲、檢索、管理和更新信息。它們對于大多數(shù)動態(tài)網(wǎng)站和 Web 應(yīng)用程序至關(guān)重要。

• 關(guān)系數(shù)據(jù)庫（SQL）： 將數(shù)據(jù)存儲在具有行和列的表中，建立表之間的關(guān)系。它們非常適合結(jié)構(gòu)化數(shù)據(jù)，并使用 SQL（結(jié)構(gòu)化查詢語言）進行數(shù)據(jù)操作。示例：MySQL、PostgreSQL、Oracle、SQL Server。
• 非關(guān)系數(shù)據(jù)庫 (NoSQL)： 以更靈活的格式存儲數(shù)據(jù)，例如文檔、鍵值對或圖形。它們非常適合大量非結(jié)構(gòu)化或半結(jié)構(gòu)化數(shù)據(jù)。示例：MongoDB、Cassandra、Redis、Couchbase。

7. 客戶端-服務(wù)器架構(gòu)：Web 交互的基礎(chǔ)

網(wǎng)絡(luò)從根本上運行在客戶端-服務(wù)器架構(gòu)。

• 客戶端： 您的網(wǎng)絡(luò)瀏覽器，正在請求資源。
• 服務(wù)器： 存儲和交付資源的計算機。

瀏覽器使用以下方式解釋接收到的數(shù)據(jù)：

• DOM（文檔對象模型）解釋器： 解析 HTML 結(jié)構(gòu)。
• CSS 解釋器： 應(yīng)用 CSS 中定義的樣式。
• JavaScript 引擎： 執(zhí)行 JavaScript 代碼以添加交互性。

8. Web 開發(fā)的類型：前端、后端和全棧

Web 開發(fā)通常分為三個主要領(lǐng)域：

• 前端開發(fā)： 專注于用戶界面 (UI) 和用戶體驗 (UX) – 用戶直接在瀏覽器中看到并與之交互的所有內(nèi)容。前端開發(fā)人員使用 HTML、CSS 和 JavaScript，通常使用 React、Angular 或 Vue.js 等框架。
• 后端開發(fā)： 處理為前端提供支持的服務(wù)器端邏輯、數(shù)據(jù)庫和 API。后端開發(fā)人員使用 Python、Java、Node.js、PHP 或 Ruby 等服務(wù)器端語言以及數(shù)據(jù)庫技術(shù)。
• 全棧開發(fā)： 涵蓋前端和后端開發(fā)。全棧開發(fā)人員精通一系列技術(shù)，使他們能夠處理 Web 應(yīng)用程序的各個方面。流行的全棧組合包括 MERN（MongoDB、Express.js、React、Node.js）、MEAN（MongoDB、Express.js、Angular、Node.js）等。

9. 虛擬主機：讓您的網(wǎng)站易于訪問

網(wǎng)絡(luò)托管 是一項使互聯(lián)網(wǎng)上的用戶可以訪問您的網(wǎng)站或 Web 應(yīng)用程序的服務(wù)。網(wǎng)絡(luò)托管提供商在其服務(wù)器（數(shù)據(jù)中心）上提供空間來存儲您網(wǎng)站的文件并使其 24/7 可用。流行的托管選項包括共享托管、VPS 托管、專用服務(wù)器和云托管。

感謝您的寶貴時間。

以上是Web 的構(gòu)建模塊 5的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！