瀏覽網頁
在本模組的這個階段，你應該已經在你的計算機或其他可用裝置上安裝了多個現代 Web 瀏覽器。本文將更深入地探討瀏覽器的使用，介紹 Web 瀏覽器的工作原理、你將與之互動的一些日常事物的區別，以及如何搜尋資訊。
注意： 如果你除了裝置自帶的預設瀏覽器外沒有安裝任何其他瀏覽器，請安裝一些。更多資訊請參閱現代 Web 瀏覽器。
與任何知識領域一樣，Web 也有大量的行話和技術術語。別擔心：我們不會一開始就讓你不知所措（如果你好奇，可以查閱術語表）。然而，有一些基本術語你需要從一開始就理解，因為你會經常聽到這些表達。下面我們介紹一些重要術語。
| 預備知識 | 基本熟悉你的計算機作業系統。 |
|---|---|
| 學習成果 |
|
網頁、網站、Web 伺服器和搜尋引擎的區別
我們將從描述各種與 Web 相關的概念開始：網頁、網站、Web 伺服器和搜尋引擎。這些術語經常被 Web 新手混淆或錯誤使用。讓我們確保你瞭解它們各自的含義！讓我們從一些定義開始
- 網頁
-
可以在 Web 瀏覽器中顯示的文件。這些通常也被簡稱為“頁面”。此類文件是用 HTML 語言編寫的（我們稍後會更詳細地介紹）。
- 網站
-
一組網頁集合在一起成為一個單一的資源，它們之間透過連結相互連線。通常被稱為“站點”。
- Web 伺服器
-
一臺在網際網路上託管網站的計算機。
- Web 服務
-
一種透過網際網路響應請求以執行功能或提供資料的軟體。Web 服務通常由 Web 伺服器支援，並可能提供網頁供使用者互動。許多網站也是 Web 服務，儘管一些網站（如 MDN）僅包含靜態內容。Web 服務的例子包括調整圖片大小、提供天氣預報或處理使用者登入等。
- 搜尋引擎
-
一種幫助你查詢其他網頁的 Web 服務，如 Google、Bing、Yahoo 或 DuckDuckGo。搜尋引擎通常透過 Web 瀏覽器訪問（例如，你可以直接在 Firefox、Chrome 等的位址列中進行搜尋引擎搜尋）或透過網頁訪問（例如，bing.com 或 duckduckgo.com）。
讓我們看一個類比——一個公共圖書館。這是你在訪問圖書館時通常會做的事情
- 找到一個檢索目錄，查詢你想要的書名。
- 記下這本書的目錄號。
- 去到包含這本書的特定區域，找到正確的目錄號，然後拿到書。
讓我們將公共圖書館與 Web 進行比較
- 圖書館就像一個 Web 伺服器。它有幾個區域，這類似於一個託管多個網站的 Web 伺服器。
- 圖書館中的不同區域（科學、數學、歷史等）就像網站。每個區域就像一個獨特的網站（兩個區域不會包含相同的書籍）。
- 每個區域中的書籍就像網頁。一個網站可能包含多個網頁，例如，科學區（網站）將有關於熱、聲、熱力學、人體生物學等方面的書籍。
- 檢索目錄就像搜尋引擎。每本書在圖書館中都有其獨特的存放位置（兩本書不能放在同一個地方），該位置由目錄號指定。
現在讓我們花點時間更詳細地看一下每個術語。
網頁
網頁是一個可由瀏覽器顯示的簡單文件。網頁可以嵌入各種不同型別的資源，例如
- 樣式資訊——控制頁面的外觀和感覺。
- 指令碼——為頁面增加互動性。
- 媒體——圖片、聲音和影片。
注意： 瀏覽器也可以顯示其他文件，如 PDF 檔案以及其他資源，如圖片或影片，但網頁這個術語特指 HTML 文件。
所有網頁都可以在一個唯一的位置找到（網址，也稱為 URL）。要訪問一個頁面，只需在瀏覽器位址列中輸入其地址
現在，請記住我們上面所說的，嘗試在瀏覽器中載入一個你最喜歡的網站。你是自己輸入網址，還是透過搜尋引擎找到的？
網站
網站是共享一個唯一域名的連結網頁（及其相關資源）的集合。一個給定網站的每個網頁都提供明確的連結——大多數時候以可點選的文字部分的形式——允許使用者從網站的一個頁面移動到另一個頁面。
當你在瀏覽器中載入你喜歡的網站時，它通常首先顯示網站的主網頁，或主頁（通俗地稱為“home”）
嘗試點選一些選單項或連結，檢視你最喜歡的網站上的一些不同頁面。注意當你切換頁面時，顯示的網址是如何變化的。
注意： 也有可能是單頁應用：一個由單個網頁組成的網站，需要時會動態更新新內容。如果是這種情況，當檢視不同頁面時，網址可能不會改變。
Web 伺服器
Web 伺服器是一臺託管一個或多個網站的計算機。“託管”意味著所有的網頁及其相關檔案都可以在那臺計算機上找到。當用戶嘗試載入它託管的網頁檔案時，Web 伺服器會將其傳送到使用者的瀏覽器。
不要混淆網站和 Web 伺服器。例如，如果你聽到有人說，“我的網站沒有響應”，這可能意味著 Web 伺服器沒有響應，因此網站不可用。
更重要的是，由於一個 Web 伺服器可以託管多個網站，Web 伺服器這個術語不再用來指代一個網站，因為它可能會引起混淆。如果有人說“我的 Web 伺服器沒有響應”，這可能意味著該 Web 伺服器上託管的多個網站或應用程式都不可用。
搜尋引擎
人們常常把搜尋引擎和網站混淆。搜尋引擎是一種特殊的 Web 服務，幫助使用者找到他們感興趣的網頁，以及特定型別的內容，如圖片、影片或新聞文章。
搜尋引擎通常都有自己的網站，可以用來訪問底層的 Web 服務。有很多這樣的搜尋引擎：Google、Bing、Yandex、DuckDuckGo 等等。有些是通用的，有些則專注於特定主題。
許多 Web 新手會混淆搜尋引擎和瀏覽器。讓我們明確一下
- 瀏覽器是一個檢索和顯示網頁的軟體。
- 搜尋引擎是一個幫助人們找到其他網站上的網頁的 Web 服務（通常也是一個網站）。
這種混淆的產生是因為，當某人第一次啟動瀏覽器時，瀏覽器通常會顯示一個搜尋引擎的網站主頁或一個搜尋框，允許他們使用該搜尋引擎搜尋一個詞條。大多數瀏覽器也允許使用者透過直接在瀏覽器位址列輸入搜尋詞條來使用搜索引擎。
這一切都很有道理，因為人們通常想用瀏覽器做的第一件事就是找到一個要顯示的網頁。不要把軟體（瀏覽器）和其服務（搜尋引擎）混淆了。
這裡是 Firefox 將 Google 搜尋框作為其預設啟動頁面的一個例項
嘗試使用搜索引擎查詢你感興趣的主題的資訊，方法是
- 訪問一個搜尋引擎主頁並輸入一個搜尋詞條。
- 在瀏覽器位址列中輸入一個搜尋詞條。
Web 是如何工作的：基礎知識
在世界許多地方，Web 已經成為我們日常生活中像餐具、腳踏車和汽車或牙刷一樣必不可少的工具。如果這聽起來不現實，就想想你每天使用網站或手機應用的頻率吧！即使你沒有在 Web 瀏覽器中輸入網址來訪問內容或服務，你正在使用的應用很可能在幕後使用 Web 技術來獲取資料並呈現給你。
當你訪問 Web 時，從你的第一次互動（例如，在瀏覽器中輸入網址（URL）並按 Enter/Return）到你的操作結果呈現給你（例如，網站出現在你的 Web 瀏覽器中）之間，發生了很多事情。
- Web 瀏覽器從儲存資源的 Web 伺服器請求你想要訪問的資源（例如，網頁、一些資料或圖片或影片）。這類請求（以及由此產生的響應）是使用一種名為 HTTP（超文字傳輸協議）的技術進行的，它使用一種動詞語言（如 GET）來描述應該發生什麼。
- 如果請求成功，Web 伺服器會向 Web 瀏覽器傳送一個包含所請求資源的 HTTP 響應。
- 在某些情況下，被請求的資源會觸發更多的 HTTP 請求，從而產生更多的響應。例如
- 當一個網站被載入時，首先請求的是該網站主頁的主索引 HTML 檔案。
- 當瀏覽器接收到該檔案時，它會開始解析它，並且很可能會發現更多請求的指令。如上所述，這些可能是要嵌入的檔案，如圖片、樣式資訊、指令碼等。
- 當所有資源都被請求後，Web 瀏覽器會根據需要解析和渲染它們，然後將結果顯示給使用者。
這個關於 Web 工作原理的描述被大大簡化了，但這是你在現階段需要知道的全部。你將在我們的Web 標準模組中稍後找到關於 Web 瀏覽器如何請求和渲染網頁的更詳細的說明。
搜尋資訊
作為一名 Web 開發人員，你將花費大量時間搜尋資訊，從你記不住的語法到特定問題的解決方案。因此，學習如何有效地搜尋 Web 是一個好主意。
如果你知道一個專門針對你正在學習的主題的網站，從那裡開始通常是個好主意。
例如，如果你正在尋找關於某個特定 Web 技術特性的一般資訊，你應該在 MDN 搜尋框中輸入該特性的名稱。例如，嘗試在搜尋框中輸入 box model、fetch() 或 video element，看看會出現什麼。如果你沒有找到你需要的資訊，就擴大你的搜尋範圍——在搜尋引擎中嘗試你的搜尋詞條。
如果你正在尋找特定問題的解決方案，例如如何用 JavaScript 列印斐波那契數列或如何用 JavaScript 計算一個數是否是質數，最好在像 StackOverflow 這樣的網站上搜索，這是一個致力於回答程式設計問題的社群。同樣，如果一個特定的網站沒有給你一個有用的答案，就嘗試使用一個通用的搜尋引擎。
在你繼續之前，嘗試搜尋一些你自己想學習的主題。嘗試使用更具體和更寬泛的搜尋以及不同的相關術語，看看哪種效果最好。請參閱我們的搜尋技巧瞭解更多可以嘗試的方法。
使用 AI
AI 生成的搜尋結果是一種非常流行的獲取資訊的方式。它們基本上提供了一種超級搜尋：它們在後臺進行大量搜尋，然後將結果編譯成一個單一的、易於理解的答案。常見的選擇有 ChatGPT、Google Gemini 和 Microsoft Copilot，可以透過聊天格式直接訪問，也可以透過 AI 驅動的應用內幫助或自動化系統訪問。
在學習程式設計時，AI 聊天提示在多種方面都很有用
- 進行常規搜尋，就像上面的例子一樣。
- 找出一塊程式碼中的錯誤。如果你因為程式碼不工作而感到沮喪，你可以將你的程式碼貼上到 AI 聊天提示中，並在前面加上一個問題，比如
這段程式碼的錯誤在哪裡？ - 生成特定程式碼塊的最佳化版本。當你寫了一段可以工作的程式碼，但想知道如何能更高效地完成，或者用更健壯的方式解決更多用例時，這很有用。
- 提供關於如何做某事的建議。例如，如果你不僅想知道一段程式碼中的錯誤在哪裡，還想知道應該使用什麼策略來除錯它。
嘗試使用一些 AI 工具進行一些搜尋。
一個警示故事
AI 能做的事情太多了，你可能會開始懷疑為什麼你還需要學習程式設計。
但是等等！以下內容很重要：你仍然需要從高層次理解你想要做什麼，程式碼在做什麼，以及每一段程式碼需要用在哪裡。如果你不這樣做，在嘗試解決現實世界問題時，你將不會很有用。這意味著你仍然需要學習程式設計。AI 可以是一個非常有用的工具，幫助你更快地找到答案，但如果你只是把你被問到的每個問題都輸入到 AI 提示中，你將不會理解任何東西是如何工作的。
此外
- AI 工具以一種自信、權威的語氣呈現它們的答案，但它們常常會誤導人或者乾脆就是錯的。它們犯的一些錯誤可能非常微妙。它們沒有任何天生的智慧——它們基本上是先進的模式匹配工具。AI 工具從其他來源編譯它們的答案，所以它們會吸收錯誤的資訊和正確的資訊。即使是兩個正確的來源也可能被組合成一個不正確的答案。
- 較新的資訊可能無法獲得，或者答案可能偏向於更舊、更普遍的文件，所以“如何用 JS 做 X”可能會給你過時的指導。
因此，你需要仔細檢查它們給出的答案，而不僅僅是毫無疑問地相信一切。
在學習時，花時間自己嘗試解決問題，然後再去尋找答案，無論你是使用 AI 還是傳統的搜尋引擎。這會讓你成為一個更好的開發者。
搜尋技巧
-
你應該在搜尋詞中包含你正在使用的語言，如上面的例子所示。如果你只輸入
如何列印斐波那契數列，你很可能會得到 Python、C++、Java、Ruby 或其他語言的幾種解決方案——當你想學習 JavaScript 時，這並沒有多大幫助！ -
當你找到一個有用的答案時，把它收藏起來或者複製到某個地方，以便以後再次找到。你會驚訝地發現你多次遇到同樣的問題。
-
如果你的程式碼返回一個特定的錯誤訊息，嘗試將該錯誤輸入搜尋引擎或 AI 提示。其他人可能過去已經處理過同樣的錯誤，並在某個地方公開記錄瞭解決方案。
-
如果可能的話，堅持使用推薦的網站，如 MDN 和 StackOverflow。
-
在搜尋引擎中，你可以使用許多高階搜尋技巧，它們會比只輸入一個普通搜尋詞條得到更好的結果。輸入一個像
ant fish cheese這樣的普通搜尋詞條會返回包含這些詞任何組合的結果。然而，大多數搜尋引擎都支援以下語法模式的變體- 輸入
"ant fish cheese"（帶引號）將只返回包含該確切短語的結果。 ant cheese -fish將返回包含ant和/或cheese但不包含fish的結果。ant OR cheese將只返回包含其中一個詞條而不是兩個都包含的結果。根據我們的測試，這一個似乎只在 Google 中有效。intitle:cheese將只返回頁面主標題中含有“cheese”的結果。
注意： 你可以在各種不同的搜尋引擎中使用許多其他技巧。嘗試看看你還能找到哪些——一些有用的資源是最佳化 Google 搜尋、如何在 DuckDuckGo 搜尋中使用高階語法和Microsoft：高階搜尋選項。
- 輸入