如何查看网站的 HTML 代码

网站的 HTML 源代码中包含指示浏览器如何显示和解释文档内容的说明。例如，HTML 可以告诉浏览器哪些文本内容应该被解释为标题，哪些文本内容应该被解释为段落。HTML 还用于添加图像，并为文本和图像分配链接。这些指令是通过 HTML 标记实现的，多数标签包含一个开始标签和一个结束标签来环绕其中的内容。

为了了解这些标签的使用方式，让我们看下面这段 HTML 代码。下面的 HTML 代码显示了如何使用 HTML 标记来构造文本以及添加链接和图像。

<h1>Sammy's Sample HTML</h1>

<p>This code is an example of how HTML is written.</p>

<p>It uses HTML tags to structure the text.</p>

<p>It uses HTML to add a <a href="niuqi.com">link</a>.</p>

<p>And it also uses HTML to add an image:</p>

<img src="https://html.sammy-codes.com/images/small-profile.jpeg"/>

在浏览器中查看源代码

对于 Firefox、Chrome、Safari、Opera 和 Internet Explorer 这些主流浏览器，查看网站 HTML 代码的步骤基本相同。右键单击网页中仅包含文本的部分，然后从弹出菜单中选择“查看源代码”或“查看页面源代码”选项。根据浏览器设置的不同，HTML 代码会在新的浏览器选项卡中打开源代码页面。

将源代码保存到磁盘

如果想要以后需要检查或编辑网站的代码，可以将页面保存到硬盘中。当在 Firefox 或 Safari 中右键单击网页时，会看到一个“将页面另存为”的选项。Chrome 和 Opera 也有“另存为”选项。要使用 Internet Explorer 保存网页，请单击“工具”、“文件”，然后单击“另存为”。除了 Web 页面本身，浏览器还会保存页面使用的所有图像、CSS 文件和 JavaScript，它们本地存储在其 Web 服务器上。

浏览器内置的开发者工具

Firefox、Chrome、Opera 和 Internet Explorer 均提供开发人员模式，使用户能够同时查看呈现的网页及其 HTML、CSS 和 JavaScript 代码。如果单击 Web 上的元素，其代码将出现在开发人员显示面板中。可以通过选项或配置工具访问开发者面板。虽然 Safari 没有原生开发者工具，但可以通过安装扩展来实现。

Web 开发人员应用程序

Dreamweaver、Kompozer 和 Microsoft Expressions 等网站设计工具使用户能够使用其 URL 打开在线网页。用户可以在仅源代码视图或拆分、预览和源代码视图中查看 HTML 代码。此外，还可以编辑代码并实时查看更改。而存储在网站服务器上的实际代码却不会更改。

网站阻止查看源代码

有一些网站会阻止用户查看网站 HTML 代码。例如，一些网站使用 JavaScript 代码阻止右键单击。但仍然可以通过将页面下载到磁盘或在浏览器中禁用 JavaScript 来查看源代码。其他网站使用 HTML 框架或 iframe，阻止用户直接访问网站源代码。Firefox、Chrome、Safari 和 Opera 会检测基于框架的网站并自动为您提供查看框架源代码的选项。如果网页使用存储在另一个域中的 JavaScript 或 CSS 文件，可以直接查看该文件的代码，方法是复制其 URL，然后将其粘贴到新浏览器选项卡的地址栏中。