如何使用和理解HTML元素

HTML 文档由 HTML 元素组成。大多数 HTML 元素包含内容（例如文本或图像）以及告诉浏览器如何解释内容（例如标题或段落文本）的 HTML 标记。 HTML 元素可用于向 HTML 文档的不同部分添加结构、语义和格式。 HTML 元素通常是通过打开和关闭 HTML 标记来创建的，但并非总是如此，这些标记环绕一段内容。

下图标注了 HTML 元素的每个部分：

让我们尝试在实践中探索 HTML。尝试将以下行粘贴到您在设置 HTML 项目时创建的“index.html”文件中：

<strong>My strong text</strong>

在此示例中， 标记通过使用一对开始和结束  标记包围文本来添加强格式。请注意，结束标记始终由正斜杠 (/) 表示。

Note：您可能注意到  标签的作用与在文本中添加 bold 样式非常相似。您可以通过使用粗体  标签来实现相同的样式效果，但是  标签添加了粗体样式和语义，表明文本非常重要。如果您使用粗体样式 ，因为 您想注意文本的重要性，请确保使用  标签，这将使屏幕阅读器能够向用户宣布它们的重要性。

类似地，强调标记  添加斜体样式和表示文本被强调的语义含义。斜体标签  仅将斜体样式添加到文本中。如果您使用斜体样式因为要强调文本，请务必使用标签，这将使屏幕阅读器能够向用户宣布他们的重点。<$>

要检查此 HTML 代码的结果，我们可以在浏览器中加载“index.html”文件。尽管您的文件不在线，但浏览器仍然能够解释 HTML 文件 ，就好像 它是一个网页文档。确保在将“index.html”文件加载到浏览器之前保存它，因为只会呈现保存的更新。

如何在浏览器中查看脱机 HTML 文件

您可以通过多种方式在浏览器中查看脱机 HTML 文件：

将文件拖放到浏览器中
CTRL + Left Click（在 Mac 上）或 Right Click（在 Windows 上）用浏览器打开文件
复制文件的完整路径并将文件粘贴到浏览器栏中

如果您使用的是 Visual Studio Code 文本编辑器，您可以使用左侧文件“index.html”上的 CTRL + Left Click（Mac 上）或 Right Click（Windows 上）复制文件路径手面板并选择“复制路径”。然后将路径粘贴到您的网络浏览器中，如下图所示：

<$>[注] 笔记：要在浏览器中加载文件，复制绝对路径 ,（指的是相对于根目录的文件位置），而不是相对路径 ,（指的是相对于当前工作目录的文件）。在 Visual Studio Code 中，“复制路径”是指完整的文件路径。但是请注意，我们将在本教程的其他部分使用文件的相对路径。

在浏览器中加载文件后，您应该会收到一个包含以下内容的页面：

我的强文

让我们尝试使用其他 HTML 元素。在“practice.html”文件的下一行，尝试添加  元素，这会增加重点。

<strong>My strong text</strong>
<em>My emphasized text</em>

保存文件并在浏览器中重新加载文件。您应该会收到如下信息：

我的强文 我强调的文字

第一个短语的样式应采用强格式，第二个短语应采用强调的样式。但是，您可能会对这两个短语的并排放置感到惊讶。如果您在文本编辑器的第二行添加了 My emphasized text，您可能期望 “我的强调文本” 会出现在“我的强文本 ”在网络浏览器中。但是，某些 HTML 元素，例如  和 ，要求您使用其他 HTML 元素指定换行符（如果您需要换行符）。我们将在下一个教程中解释原因。