本教程将向您介绍一个基本的 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 开发人员/页面源”，如下所示：

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

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

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

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

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