如何在 Chrome 中查看 HTML 代碼

設備鏈接

• 安卓
• iPhone
• Chromebook
• 蘋果
• 視窗
• 設備丟失？

您對網頁的構成感到好奇嗎？想知道如何更改您網站上的字體大小或顏色嗎？通過查看網頁的 HTML 代碼，您可以執行所有這些操作以及更多操作。

在本教程中，我們將向您展示如何在 Chrome 中查看網頁的 HTML 代碼。

在 Chrome 中查看 HTML 代碼

當用 HTML 編寫時，源代碼是用於定義網頁結構和內容的一系列標記和屬性。

源代碼由網絡瀏覽器讀取並翻譯成您在屏幕上看到的圖形網頁。除了定義網頁的外觀和感覺外，源代碼還可用於添加交互性，例如彈出窗口、表單和下拉菜單。

雖然普通互聯網用戶可能永遠不需要查看網頁的 HTML 源代碼，但出於多種原因，有些人可能想要這樣做。

對於開發人員而言，查看源代碼有助於了解頁面的結構以及確定使用了哪些樣式和腳本元素。對於設計人員來說，了解其他設計人員如何使用 HTML 創建有效的佈局可能會有所幫助。

在某些情況下，用戶可能還希望查看源代碼以解決錯誤或了解有關特定網站或 Web 應用程序如何工作的更多信息。不管是什麼原因，在 Chrome 中查看 HTML 源代碼都是一個相對簡單的過程。

如何在 Windows PC 上的 Chrome 中查看網頁的 HTML 代碼

Windows 操作系統是 Chrome 最兼容的系統之一。Chrome 建立在開源 Chromium 項目之上，微軟是該項目的主要貢獻者。這種兼容性擴展到 HTML 領域，流行的瀏覽器允許用戶查看任何網站的 HTML 代碼。

您可以通過兩種方式查看 HTML 代碼。

使用查看頁面源代碼

這個方法很簡單：

1. 打開 Chrome 並導航到要查看 HTML 源代碼的頁面。
   
2. 右鍵單擊該頁面並選擇查看頁面源代碼，或按鍵盤上的 Ctrl + U 在新選項卡中打開源代碼。
   

源代碼將出現在新選項卡中，您可以滾動查看該頁面的 HTML 標記。

使用開發者工具

要使用 Google Chrome 中的開發人員工具檢查網頁的源代碼，請按照以下步驟操作。

1. 打開谷歌瀏覽器並導航到您要檢查的網頁。
   
2. 按鍵盤上的 Ctrl + Shift + I。開發人員工具窗格將在您正在查看的網頁旁邊的停靠欄中打開。
   
3. 單擊窗格頂部的“元素”選項卡。這將顯示網頁的 HTML 源代碼。
   
4. 您現在可以查看頁面的源代碼。要折疊元素，請單擊其標籤名稱旁邊的三角形。要查看有關組件的更多信息，請右鍵單擊它並選擇“檢查”。
   

請記住，此方法最適合 HTML 頁面；可以查看其他類型網頁的源代碼，但格式可能更難閱讀。

如何在 Mac 上的 Chrome 中查看網頁的 HTML 代碼

如果您是 Web 開發人員，那麼能夠查看網頁的 HTML 代碼非常重要。這使您可以查看頁面的結構並解決可能出現的任何問題。幸運的是，這在 Mac 上的 Chrome 中很容易做到。只需按照以下步驟操作：

1. 打開 Chrome 並導航到要查看 HTML 代碼的網頁。
   
2. 右鍵單擊頁面並選擇“檢查”。
   
3. 屏幕底部將打開一個新窗格，顯示 HTML 代碼。
   
4. 您還可以單擊 HTML 代碼中的特定元素以查看它們在頁面上的樣式。例如，您可以通過選擇元素然後單擊打開的窗格中的“樣式”選項卡來查看將哪些 CSS 樣式應用於元素。
   
5. 要關閉窗格，請單擊右上角的“X”。
   

或者，您可以使用 Chrome 開發者工具查看源代碼。

1. 打開 Google Chrome 並導航到您要檢查的網頁。
   
2. 單擊瀏覽器右上角的菜單圖標（三個點），然後從下拉菜單中選擇更多工具和開發人員工具。
   
3. 開發人員工具面板將在屏幕底部打開。選擇窗格頂部的“元素”。
   
4. 您現在將在元素面板中看到當前頁面的 HTML 代碼。您可以根據需要使用面板中的不同選項來檢查和調試代碼。
   

只需點擊幾下，您就可以在 Mac 上的 Chrome 中輕鬆查看任何網頁的 HTML 代碼。當您嘗試解決 Web 開發問題或想要仔細查看特定網站的構建方式時，這會很有幫助。

如何在 iPhone App 的 Chrome 中查看網頁的 HTML 代碼

如果您使用的是 iPhone，則可以通過兩種方式在 Chrome 中查看任何頁面的 HTML 代碼：

調整網址

您可以通過對 URL 進行小幅調整來輕鬆查看任何頁面的 HTML 代碼：

1. 打開 Chrome 並導航到您要查看其 HTML 代碼的網頁。
   
2. 在地址欄中點擊一次以啟動編輯模式。
   
3. 將光標移動到 URL 的前面。
   
4. 輸入“View-source”然後點擊“Go”按鈕。網頁的 HTML 代碼將顯示在 Chrome 中。
   

使用開發者工具

Chrome 開發者工具也可在 iOS 上使用，但與 PC 相比，啟動它需要一組不同的步驟。

1. 點擊屏幕右上角的三個點，然後選擇“設置”。
2. 向下滾動並點擊“高級”，然後啟用“開發人員工具”旁邊的開關。
3. 點擊並按住頁面的空白區域，然後選擇“檢查元素”。這將打開一個側面板，其中包含該頁面的 HTML 代碼。

如何在 Android App 的 Chrome 中查看網頁的 HTML 代碼

在 Android 手機上使用 Chrome 應用程序時，您可能希望查看網頁的 HTML 代碼。如果您正在嘗試解決頁面問題或想查看頁面的結構，這會很有幫助。要在 Android 手機上的 Chrome 中查看網頁的 HTML 代碼，請執行以下步驟：

1. 打開 Android 上的 Chrome。
   
2. 鍵入“view-source:”，然後輸入要查看源代碼的頁面的 URL。例如，如果您想查看 www.google.com 的源代碼，您可以在 Chrome 的地址欄中輸入“view-source:www.google.com”。
   

這將在 Chrome 的內置開發者工具界面中打開該頁面的 HTML 代碼。從那裡，您可以根據需要查看和編輯代碼。請記住，此方法僅在您嘗試查看的網站允許訪問其源代碼時才有效。如果沒有，您將無法看到除錯誤消息以外的任何內容。

如何在 iPad 上的 Chrome 中查看網頁的 HTML 代碼

iPad 應用程序上的 Chrome 可以輕鬆查看任何網頁的 HTML 代碼。只需按照以下步驟操作：

1. 打開 Chrome 並輸入“view-source:”，然後輸入您要查看的頁面的 URL。例如，如果您想查看 www.alphr.com 的源代碼，您需要在 Chrome 的地址欄中輸入“view-source:www.alphr.com”。
   
2. 點擊“開始”按鈕。
   

這應該會在 Chrome 的新選項卡中加載頁面的源代碼。從那裡，您可以根據需要保存或共享代碼。

源代碼是將頁面粘合在一起的粘合劑

HTML 是任何網站的基礎。它提供訪問者在瀏覽器中加載頁面時看到的結構和內容。

雖然頁面的最終外觀可能由 CSS 或其他樣式語言決定，但 HTML 代碼決定了頁面的基本結構和內容。某些更改可能會破壞頁面。因此，在查看或更改源代碼時充分理解 HTML 非常重要。

另外請記住，雖然在某些情況下查看 HTML 代碼會有所幫助，但對代碼所做的更改不會反映在實時網頁上。訪問者只能看到站點管理員發布的更改。

您是否嘗試過使用本教程中討論的任何方法查看任何網頁的 HTML 代碼？進展如何？

請在評價部分留下您的意見。