如何查看网页的HTML源代码？

借助互联网浏览器，我们可以查看HTML源代码。要访问各种浏览器中的源代码，请参阅以下内容。

谷歌浏览器

要在 Chrome 浏览器中打开和查看特定网页的源代码，您可以遵循以下任何程序。

仅查看源代码

方法 1

使用 Ctrl + U 键盘快捷键查看源代码。

方法 2

将光标移到网页的空白部分并右键单击。选择“查看页面源代码”选项。然后会出现一个菜单列表。

查看页面源代码，包括元素

1. 打开 Google Chrome 浏览器并移动到您希望了解源代码的部分。
2. 在浏览器窗口中，将光标移到右上角并选择“自定义和控制 Google Chrome”图标。
3. 现在将显示一个下拉菜单。从中选择“更多工具”并单击“开发者工具”。
   
4. 然后，浏览器窗口右侧将出现一个新窗口。从中选择位于选项卡左上角的“元素”选项，如下图所示。
   
   使用向下滚动条，我们可以查看网页所选部分的整个源代码。

小费

在 Google Chrome 中按下 F12 键或 Ctrl + Shift + I 键盘快捷键可以获取交互式开发者工具。交互式开发者工具将提供更好的源代码和 CSS 设置交互，从而使人们能够了解代码修改如何动态影响网页。

Mozilla Firefox

要在 Mozilla Firefox 浏览器中打开和查看特定网页的源代码，您可以遵循以下任何程序。

仅查看源代码

方法 1：按住 Ctrl 键，直到按下 U 键，组成 Ctrl + U 快捷键，这有助于查看源代码。

方法 2：将光标移到网页的空白部分并右键单击。选择“查看页面源代码”选项。然后会出现一个菜单列表。

查看页面源代码，包括元素

1. 打开 Mozilla Firefox 浏览器并移动到您希望了解源代码的部分。
2. 在浏览器窗口中，将光标移到右上角并选择“菜单”图标。
3. 现在将显示一个下拉菜单。从中选择“更多工具”并单击“网页开发者工具”。
4. 然后，窗口底部将显示一个新部分。然后选择左上角的“检查器”选项卡。

小费

在 Mozilla Firefox 中按下 F12 键或 Ctrl + Shift + I 键盘快捷键可以获取交互式开发者工具。交互式开发者工具将提供更好的源代码和 CSS 设置交互，从而使人们能够了解代码修改如何动态影响网页。

查看页面源代码的一部分

• 选择您想了解源代码的网页部分。
• 右键单击突出显示的部分并选择“查看选区源代码”。

小费

您也可以使用 Firebug 附加组件来查看和修改网页源代码。使用 Firebug 附加组件，您可以使用浏览器立即了解所做的更改。

Microsoft Edge

在 Microsoft Edge 中，要查看网页的源代码，您可以遵循以下任何给定程序。

仅查看源代码

方法 1

按住 Ctrl 键，直到按下 U 键，组成 Ctrl + U 快捷键，这有助于查看源代码。

方法 2

将光标移到网页的空白部分并右键单击。选择“查看页面源代码”选项。然后会出现一个菜单列表。

查看页面源代码，包括元素

1. 打开 Microsoft Edge 浏览器并移动到您希望了解源代码的部分。
2. 在浏览器窗口中，将光标移到右上角并选择“设置及更多”图标。
3. 现在将显示一个下拉菜单。从中选择“更多工具”并单击“网页开发者工具”。
4. 然后，窗口右侧将出现一个新部分。然后选择右上角的“元素”选项卡。

小费

在 Microsoft Edge 中按下 F12 键或 Ctrl + Shift + I 键盘快捷键可以获取交互式开发者工具。交互式开发者工具将提供更好的源代码和 CSS 设置交互，从而使人们能够了解代码修改如何动态影响网页。

Microsoft Internet Explorer

要在 Microsoft Internet Explorer 浏览器中打开和查看特定网页的源代码，您可以遵循以下任何程序。

方法 1

按住 Ctrl 键，直到按下 U 键，组成 Ctrl + U 快捷键，这有助于查看源代码。

方法 2

将光标移到网页的空白部分并右键单击。选择“查看源代码”选项。然后会出现一个菜单列表。

查看页面源代码，包括元素

1. 打开 Microsoft Internet Explorer 浏览器并移动到您希望了解源代码的部分。
2. 在浏览器窗口中，将光标移到右上角并选择“工具”图标。
3. 现在将显示一个下拉菜单。从中选择“F12 开发者工具”。
4. 然后将出现开发者工具菜单。在该菜单左上方，选择“DOM Explorer”选项卡。

小费

如果在 Internet Explorer 中按下 F12 键，它会获取 DOM 工具。DOM 工具将提供更好的源代码和 CSS 设置交互，从而使人们能够了解代码修改如何动态影响网页。

Safari

首先，您应该启用开发者选项才能查看网页的源代码，请按照以下过程了解启用开发者选项的方法。

在 Safari 中访问开发者选项

1. 单击 Safari 浏览器以打开它。
2. 从窗口左上角的菜单栏中选择“Safari”选项。
3. 然后会弹出一个下拉菜单；选择“偏好设置”。
   
4. 选择“高级”选项卡并勾选“在菜单栏中显示‘开发’菜单”旁边的复选框。
   
5. 在屏幕的上方，找到 Apple 菜单栏中存在的“开发”选择器。
   

查看源代码

注意：您应该启用开发者选项才能完成以下工作。

方法 1

1. 单击 Safari 应用程序并打开它。然后移动到您希望了解源代码的网页部分。
2. 屏幕上方是 Apple 菜单栏。选择“开发”选择器并单击“显示页面源代码”选项。
3. 在屏幕中央的开发者工具区域上方选择“元素”选项卡。

方法 2

将光标移到网页的空白部分并右键单击。然后会出现一个菜单列表。选择“显示页面源代码”选项。

小费

启用开发者选项后，您可以使用 Command + Option + U 键盘快捷键获取源代码。

Opera

在 Opera 中，要查看网页的源代码，您可以遵循以下任何给定程序。

方法 1

按住 Ctrl 键，直到按下 U 键，组成 Ctrl + U 快捷键，这有助于查看源代码。

方法 2

将光标移到网页的空白部分并右键单击。选择“页面源代码”选项。然后会出现一个菜单列表。

查看页面源代码，包括元素

1. 打开 Opera 浏览器并移动到您希望了解源代码的部分。
2. 在浏览器窗口中，将光标移到右上角并选择“Opera”图标。
3. 现在将显示一个下拉菜单，当您单击“开发者”时，然后选择“开发者工具”。

在窗口最上方，选择屏幕右侧显示的“元素”。

小费

如果在 Opera 中按下 Ctrl + Shift + I 键盘快捷键，它会获取交互式开发者工具。交互式开发者工具将提供更好的源代码和 CSS 设置交互，从而使人们能够了解代码修改如何动态影响网页。

使用 Chrome 的 Android 手机或平板电脑

1. 在您的通过 Android 操作系统运行的智能手机上单击 Google Chrome 浏览器。
2. 移动到您想了解源代码的网页部分。
3. 移动到地址栏并将光标移到 URL 之前。
4. 输入文本“view-source:”。选择“Enter”然后“Go”。例如，要获取 Javatpoint 主页的源代码，请输入“view-source:https://tpointtech.cn”。

注意：如果上述步骤不影响您的 Android 智能手机，请通过 Safari 部分使用 iPhone 或 iPad 上的过程。

小费

当您觉得在手机或平板电脑上通过上述过程遍历源代码很困难时，您也可以使用在线工具来完成同样的工作。

使用 Safari 的 iPhone 或 iPad

在 iPhone 或 iPad 上获取网页源代码是可能的，但需要更长时间。整个过程将引导您设计一个书签，为其分配 JavaScript 代码，并通过该书签，您可以在网页上获取源代码。

注意：如果您不使用应用程序来获取网页的源代码，您可以使用 iOS App Store 安装免费的 View Source 应用程序。

设计一个书签以查看源代码。

1. 在您的 iPhone 或 iPad 上，前往 Safari 浏览器并点击它以打开。
2. 访问任何网页，例如www.javatpoint.com。
3. 然后选择“更多”图标，您可以在屏幕底部找到它，如下图所示。
   
   另一种打开菜单的方法是通过屏幕底部的书签图标。按住它直到显示菜单。
4. 然后会打开一个菜单；现在，选择“添加书签”选项。
   
5. 选择书签名称字段。单击右侧圆圈中的叉号 (x) 以擦除当前名称，然后输入新名称为 查看网页源代码。
6. 在最右上方，您可以找到“保存”选项。点击它以保存书签。
7. 然后复制下面提到的 JavaScript 代码。

1. 在 Safari 浏览器中，您可以通过点击书签来访问书签。书签位于屏幕底部。
   
2. 搜索您已生成的书签，然后点击该书签，直到屏幕底部打开一个菜单。
3. 现在从显示的菜单中选择“编辑”选项。
   
4. 在“编辑书签”屏幕页面上，点击 URL 以选择它，然后单击叉号 (“x”) 以擦除 URL 并将 JavaScript 代码片段粘贴到其中。
5. 最后，选择屏幕右下角的“完成”，书签更改将被保存。

使用书签查看源代码。

完成书签创建后，即可查看特定网页的源代码。

1. 在 Safari 浏览器中，进入网页部分以查看源代码。
2. 在屏幕底部，选择书签图标。
   
3. 通过点击您设计的“查看网页源代码”书签来选择它。
   
4. 现在将打开另一个新的 Safari 标签页，显示所选网页的源代码。

小费

当您在手机或平板电脑上通过上述过程遍历源代码时遇到困难时，您也可以使用在线工具。

如何关闭源代码页面或工具？

查看特定网页的源代码后，您希望关闭它。退出方法完全取决于您打开它的过程。

1. 当您使用 Ctrl + U 键盘快捷键（Edge 除外）或通过右键单击过程打开网页的源代码时。然后，新标签页会在浏览器顶部打开。
2. 当您通过名为“开发者”的工具（即通过 F12 或 Ctrl + Shift + I）打开网页的源代码时，请重复使用相同的键盘快捷键。或者您也可以单击或点击工具窗口右上角的叉号图标 (“x”)。

使用在线工具查看源代码。

除了仅通过浏览器查看代码外，您还可以使用在线工具查看网页源代码。在线工具还将提供格式和样式，并突出显示代码部分，使其对用户可读。

此类在线工具的示例包括 Source Code Viewer 和 HTML Viewer。如果您输入或粘贴特定网站的 URL，它会显示与之相关的源代码。