如何查看HTML文档的源代码

本教程将向您介绍一个基本的 HTML 文档，并教您如何在浏览器中查看 HTML 文档的源代码。

HTML 用于标记文档，其中包含指示浏览器如何显示和解释文档内容的说明。 例如，HTML 可以告诉浏览器哪些文本内容应该被解释为标题，哪些文本内容应该被解释为段落。 HTML 还用于添加图像并为文本和图像分配链接。 这些指令通过 HTML 标签进行通信，这些标签的写法如下：<tagname>。 许多（尽管不是全部）标签使用开始标签和结束标签来环绕它们用于修改的内容。

为了了解这些标签的使用方式，让我们检查一段 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="digitalocean.com/community">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"/>

此 HTML 代码在浏览器中呈现如下：

您现在应该了解 HTML 示例代码是如何在浏览器中呈现的。 接下来，我们将学习如何使用浏览器工具查看任何网页的源代码。

查看网页源代码

您遇到的几乎每个网页都使用 HTML 来构建和显示 HTML 页面。 您可以使用 Firefox 或 Chrome 等网络浏览器检查任何网页的源代码。 在 Firefox 上，导航到顶部菜单中的“工具”菜单项，然后单击“Web Developer/Page Source”，如下所示：

在 Firefox 上，您还可以使用键盘快捷键 Command-U 来查看网页的源代码。

在 Chrome 上，这个过程非常相似。 导航到顶部菜单项“查看”，然后单击“开发人员/查看源代码”。 您也可以使用键盘快捷键 Option-Command-U。

尝试检查我们将在本教程系列中构建 的 演示网站的源代码。 您应该会收到一个包含比我们上面的示例更多的 HTML 标记的页面。 如果它看起来势不可挡，请不要惊慌。 在本教程系列结束时，您应该对如何解释 HTML 源代码以及如何使用 HTML 构建和自定义您自己的网站有了更好的理解。

注意：如上所述，您可以使用 Firefox 或 Chrome Web 浏览器中的工具检查任何网页的源代码。 尝试检查一些您最喜欢的网站的代码，以了解构建 Web 文档的底层代码。 尽管这些网站的源代码可能包含比 HTML 更多的语言，但首先学习 HTML 将有助于您准备学习其他语言和框架，以便以后创建网站（如果您愿意）。

您现在应该对 HTML 文档的格式有一个大致的了解，并且知道如何使用浏览器工具检查 HTML 源代码。 为了更好地理解 HTML 的工作原理，让我们检查一下它的关键组件。 在下一个教程中，我们将学习更多关于 HTML elements，用于创建 HTML 文档的构建块。