網路如何運作- 學習該如何開發Web | MDN

連接到網路的電腦稱為用戶端（client）與伺服器端（server）。

彼此的連結原理如圖所示：. 用戶端是網路用戶的典型上網設備（像是連到Wi-Fi 的電腦、或 ... SkiptomaincontentSkiptosearchSkiptoselectlanguage學習該如何開發WebWeb入門網路如何運作ArticleActions正體中文(繁體)ThispagewastranslatedfromEnglishbythecommunity.LearnmoreandjointheMDNWebDocscommunity.用戶與伺服器百寶箱的其他魔法所以我說到底發生了啥？講講DNS再講講封包參見製作群在模塊裡面RelatedTopics 全新手請從這開始！ Web入門 Web概述 安裝基本軟體 自己的網站會是什麼樣子？ 處理檔案 HTML基礎概念 CSS基礎概念 JavaScript基礎概念 發佈自己的網站 Web運作的方式 HTML—架構Web HTML介紹 HTML概述 HTML入門 標題裡是什麼？HTML中的後設資料(Metadata) HTML文字基礎概念 建立超連結 進階文字格式 文件與網站架構 HTML除錯 親和度：設個字母 親和度：架構出具備內容的網頁 多媒體與嵌入 多媒體與嵌入的概述 HTML中的圖片 視訊與音訊內容 從物件到iframe—其他嵌入技巧 為Web新增向量圖 適應性圖片 親和度：Mozilla形象頁面 HTML表格 HTML表格概述 HTML表格基礎 HTMLtableadvancedfeaturesandaccessibility Assessment:Structuringplanetdata CSS—設計Web的風格 初探CSS 初探CSS（概述） CSS是什麼？ CSS入門 HowCSSisstructured CSS怎麼運作 Assessment:Stylingabiographypage CSS組件 CSSbuildingblocksoverview Cascadeandinheritance CSSselectors Theboxmodel Backgroundsandborders Handlingdifferenttextdirections Overflowingcontent CSSvaluesandunits SizingitemsinCSS Images,media,andformelements Stylingtables DebuggingCSS OrganizingyourCSS Assessment:FundamentalCSScomprehension Assessment:Creatingfancyletterheadedpaper Assessment:Acool-lookingbox 樣式化文字 樣式化文字概述 基礎的文字與字型樣式化 樣式化列表 樣式化連結 Web字型 親合度：設定社區大學首頁的版面 CSS版面配置 CSS版面配置概述 IntroductiontoCSSlayout NormalFlow 彈性區塊 格線 浮動 定位 Multiple-columnlayout Responsivedesign Beginner'sguidetomediaqueries Legacylayoutmethods Supportingolderbrowsers Assessment:Fundamentallayoutcomprehension JavaScript—動態的用戶端指令 JavaScript第一步 JavaScript第一步概述 什麼是JavaScript？ 初次接觸JavaScript 出了什麼問題？JavaScript疑難排解 儲存你所需的資訊—變數 JavaScript基礎概念—數字與運算子 處理文字—JavaScript中的字串 有用的字串函式 陣列 親合度：傻瓜故事產生器 JavaScript基礎要件 JavaScript基礎要件概述 於程式碼中決策—條件 程式碼迴圈 函式—可重複使用的程式碼區塊 建立自己的函式 函式回傳值 事件介紹 親合度：圖庫 JavaScript物件介紹 JavaScript物件概述 物件基礎概念 物件原型 Object-orientedprogrammingconcepts ClassesinJavaScript 使用JSON資料 物件建構實作 親合度：為彈跳球展示新增功能 非同步的JavaScript AsynchronousJavaScriptoverview IntroducingasynchronousJavaScript Howtousepromises Implementingapromise-basedAPI Introducingworkers Assessment:sequencinganimations 客戶端webAPIs 客戶端webAPIs IntroductiontowebAPIs 文件操作 Fetchingdatafromtheserver ThirdpartyAPIs Drawinggraphics VideoandaudioAPIs Client-sidestorage 網頁表單-與使用者資料合作 核心的表單學習途徑 網頁表單概述 Yourfirstform 如何建構網頁表單 Basicnativeformcontrols TheHTML5inputtypes Otherformcontrols Stylingwebforms Advancedformstyling UIpseudo-classes Client-sideformvalidation Sendingformdata 深入網頁表單 Howtobuildcustomformcontrols SendingformsthroughJavaScript CSSpropertycompatibilitytableforformcontrols 無障礙網頁—每個人都可以使用的網頁 無障礙網頁指南 無障礙網頁概述 何謂無障礙網頁？ HTML:Agoodbasisforaccessibility CSSandJavaScriptaccessibilitybestpractices WAI-ARIA基礎 Accessiblemultimedia 行動裝置上的無障礙 無障礙網頁評估 Assessment:Accessibilitytroubleshooting 工具與測試 Client-sidewebdevelopmenttools Client-sidewebdevelopmenttoolsindex Client-sidetoolingoverview Commandlinecrashcourse Packagemanagementbasics Introducingacompletetoolchain Deployingourapp 介紹前端框架 前端框架簡介 Frameworkmainfeatures React GettingstartedwithReact BeginningourReacttodolist ComponentizingourReactapp Reactinteractivity:Eventsandstate Reactinteractivity:Editing,filtering,conditionalrendering AccessibilityinReact Reactresources Ember GettingstartedwithEmber Emberappstructureandcomponentization Emberinteractivity:Events,classesandstate EmberInteractivity:Footerfunctionality,conditionalrendering RoutinginEmber Emberresourcesandtroubleshooting Vue 開始學Vue CreatingourfirstVuecomponent RenderingalistofVuecomponents Addinganewtodoform:Vueevents,methods,andmodels StylingVuecomponentswithCSS UsingVuecomputedproperties Vueconditionalrendering:editingexistingtodos FocusmanagementwithVuerefs Vueresources Svelte Svelte入門 StartingourSvelteTodolistapp DynamicbehaviorinSvelte:workingwithvariablesandprops ComponentizingourSvelteapp AdvancedSvelte:Reactivity,lifecycle,accessibility WorkingwithSveltestores TypeScriptsupportinSvelte Deploymentandnextsteps Angular Angular新手入門 開始開發我們的Angular待辦事項應用程式 使用樣式點綴我們的Angular應用程式 建立一個item元件 篩選我們的待辦事項項目 建構Angular應用程式與更多資源 GitandGitHub GitandGitHub概述 HelloWorld GitHandbook ForkingProjects Aboutpullrequests MasteringIssues 跨瀏覽器測試 跨瀏覽器測試概述 跨瀏覽器測試介紹 測試執行策略 處理常見的HTML與CSS問題 處理常見的JavaScript問題 處理常見的親合度問題 建置功能偵測 自動化測試介紹 設定自己的自動化測試環境 伺服端網站程式設計 第一步 第一步概述 伺服端介紹 用戶端概述 伺服端網路框架 網站安全 Django網站框架(Python) Django網站框架(Python)概述 介紹 設定開發環境 線上教學：本地圖書館網站 線上教學2：建立網站骨架 線上教學3：使用模型 線上教學4：Django管理網站 線上教學5：建立我們的首頁 線上教學6：泛型清單與細節檢視 線上教學7：會話(Sessions)框架 線上教學8：使用者授權與許可 線上教學9：搭配表單 線上教學10：測試Django的WebApp 線上教學11：佈署Django至產品 WebApp安全性 親合度：DIY迷你部落格 Express網站框架(node.js/JavaScript) Express網站框架(Node.js/JavaScript)概述 Express/Node介紹 設定Node(Express)的開發環境 Express教學1:本地圖書館網站 Express教學2:建立骨架網站 Express教學3:使用資料庫(Mongoose) Express教學4:路由與控制器 Express教程5:呈現圖書館的資料 Express教學6:使用表單 Express教學7:佈署到正式環境 更多資源 常見問題 HTML問題 CSS問題 JavaScriptquestions Web的運作方式 工具與設定 設計與親合度 用戶與伺服器百寶箱的其他魔法所以我說到底發生了啥？講講DNS再講講封包參見製作群在模塊裡面網路如何運作 前頁 Overview:Gettingstartedwiththeweb 〈網路如何運作〉將簡單介紹，當你透過電腦或手機瀏覽器瀏覽網頁時，究竟發生什麼事。

短期來看，在撰寫網站程式碼時，這些理論並不是非懂不可，但在之後，了解這些背後原理，對你會很有幫助。

用戶與伺服器連接到網路的電腦稱為用戶端（client）與伺服器端（server）。

彼此的連結原理如圖所示： 用戶端是網路用戶的典型上網設備（像是連到Wi-Fi的電腦、或是連到手機網路的手機），這些設備通常有能夠上網的軟體（通常是Firefox或Chrome之類的瀏覽器）。

伺服器端是放著網頁、網站、或者  app的電腦。

當用戶端設備要訪問網頁時，網頁的副本會從伺服器下載到用戶端，以便顯示在用戶的瀏覽器。

百寶箱的其他魔法剛剛描述的用戶/伺服器端還不是一切，我們還要講述其他部份，才能說完整個故事。

現在把網路想像成一條大道。

大道的一端是用戶端，就像你家一樣；另一端則是伺服器，就像是你要去血拼的商店。

除了用戶與伺服器之外，我們還需要和這些朋友們打招呼： 網路連線：讓你可以在網路傳送與接收資料。

基本上就像是家裡到商店一樣。

TCP/IP：傳輸控制協定和網際網路協定（TransmissionControlProtocolandInternetProtocol）是定義資料如何在網路通行的通訊協定。

這就像是方便你去商店買東西的交通工具。

在這裡本例中，這就像是車子、腳踏車、或其他你想得到的交通工具。

DNS：網域名稱系統（DomainNameServers）就像是網站的電話簿。

當你在瀏覽器輸入網址時，瀏覽器會在取得網站前，先去看DNS以查到網站的真實地址。

瀏覽器需要找到哪個伺服器在託管指定的網站、這樣才能把HTTP訊息傳送到對的地方（可以參考下文）。

這就像你在去商店前會先翻開電話簿，才好去商店一般。

HTTP超文本傳輸協定（HypertextTransferProtocol）是定義用戶端語言，和伺服器如何對話的應用協議。

可以想成你買東西時會用來溝通的語言。

Componentfiles：網站由許多不同的文件組成，如同商店內許多不同的商品。

這些檔案分為以下類型： 程式檔：網站主要是由HTML、CSS、JavaScript建立，雖然你知會看到其他工具或技術。

Asset：這是構成網站其他內容的集體名稱，裡面可能包含圖像、音樂、影片、Word、PDF……之類的。

所以我說到底發生了啥？當你在瀏覽器輸入網址時（你可以想像說自己要走去商店時）： 瀏覽器會先去DNS伺服器尋找託管網站的伺服器，其真實位置所在（如同你去尋找商店的地址） 瀏覽器向伺服器傳送HTTP訊息，請求伺服器向用戶端傳送網站的複本（如同去商店下訂單）。

在用戶端及伺服器的之間，請求訊息與其他資訊，會使用TCP/IP在網路連線之間傳送。

伺服器如果允許用戶端請求，伺服器就會傳送「200OK」訊息，意味著「好，你可以閱覽這個網站，那我給你網站資料囉～」並開始對瀏覽器以一小串稱作「資料封包」的組合形式，傳送網站的檔案。

這就像是商店給你商品，你接著把它們都帶回家一樣 瀏覽器把一小塊一小塊的東西，組合成完整的網站，並把它呈現起來－－商品送到家門口後，閃亮亮的新貨在你眼前，超棒的啦！ 講講DNS真正的網址，並不是在瀏覽器的網址列上，輸入好記好讀的字串，就能找到你最愛的網站。

它們其實是一串特殊的數字，看起來就像是這樣：63.245.215.20 這叫做IP地址，網路上它擁有獨一無二的位置。

不過，記數字果然不簡單吧？這就是要發明域名伺服器的原因。

他們會把你在瀏覽器輸入的網址（例如mozilla.org）和網站的真實位置（IP）相匹配 網站能直接透過其IP位置訪問之：在瀏覽器的網址列輸入63.245.215.20的話，可以走到Mozilla的網站。

再講講封包稍早我們用了「封包」來描述從伺服器傳到用戶端的資料格式。

這裡的「封包」是什麼意思呢？通常資料在網路傳送時，會傳送上千個小資料，這樣在同一時間和同一網站，才能有很多用戶下載內容。

如果網站只傳送一個大傢伙過去，那在同一時間就只能有一個用戶能下載，網路會變得很慢、很無聊...參見 HowtheInternetworks(en-US) HTTP—anApplication-LevelProtocol HTTP:Let’sGETItOn! HTTP:ResponseCodes 製作群街頭的照片：Streetcomposing、作者是KevinD。

前頁 Overview:Gettingstartedwiththeweb 在模塊裡面 安裝基本軟體 你的網站看起來會是什麼樣子？ 與各式各樣檔案打交道 HTML基礎 CSS基本 JavaScript基礎 將你的網站發佈上線 網路如何做動 Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:2022年5月28日,byMDNcontributors