练习 - 将基本 HTML 添加到 Web 应用

10 分钟

目前，你的网站中有一个空的 HTML 文件。接下来添加一些代码！目标是使用超文本标记语言 (HTML) 来描述客户的浏览器应显示的 Web 页面。拥有一个初始模板不是很好吗？使用编辑器方便填写一些典型样板文件或 HTML 结构。

在本单元中，你将添加基本的 HTML 内容，在浏览器中打开 HTML 页面，并第一次看到开发人员工具。

添加一些 HTML 代码

Visual Studio Code 为即学即会的 HTML 编程提供基本支持。其中包括语法突出显示、IntelliSense 的智能完成功能以及可自定义的格式设置。

在 Visual Studio Code 中打开你的网站文件夹，然后在“资源管理器”中选择 index.html 文件以将其打开。
在 index.html 页中键入 html:5，然后选择 Enter。 HTML5 模板代码将添加到文件中。

注意

如果未将 HTML5 模板代码添加到 index.html 文件，请尝试关闭并重新打开该文件。

按如下所示修改模板代码。在 Windows 上选择 Control+S，或在 macOS 上选择 Command+S 来保存文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

HTML 有各种版本。 doctype <!DOCTYPE html> 指示此 HTML 文档包含 HTML5 代码。

虽然我们不打算深入探讨所有 HTML 元素的含义，但我们想要指出一些重要的事项。 meta 标记指示通常不会对查看者显示的元数据信息，除非他们在其浏览器中查看源代码。元元素或标记提供关于网页的描述性信息。例如，它们可帮助搜索引擎处理网页中要在搜索结果中返回的信息。

UTF-8 字符集 (charset) 可能看似无关紧要，但对于确定计算机如何解释字符至关重要。如果缺少字符集的元数据，可能会导致安全受到影响。字符集属性背后存在很多历史记录和技术信息，但本练习重要的一点是，Visual Studio Code 样板提供一些合理的默认值。

编辑标头

HTML 代码中的 <head> 元素包含浏览器标签页中不可见的网站相关信息。

元数据定义有关 HTML 文档的数据，例如字符集、脚本以及在其中打开网页的浏览器。

网页的标题显示在浏览器窗口的顶部，在某些方面具有重要意义。例如，标题用于搜索引擎并在其中显示。我们来添加标题。

重要

从现在开始，省略号 (…) 表示之前声明的代码居前或居后。应该提供足够的代码作为上下文，以便对工作进行必要的更改或更新，但不应将省略号复制并粘贴到代码中。

在编辑器中，修改 <title> 元素，使其类似于以下示例。

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

若要向网页上的 HTML 元素应用样式，可以直接在网页标头中编写 CSS 代码。在 HTML 页面中编写 CSS 称为“内部 CSS”。但是，最好将 HTML 结构与 CSS 样式分离。获得一个称为“外部 CSS”的单独 CSS 页面。代码简洁且已划分时，往往更易于阅读。可以使用一个或多个外部样式表为多个 Web 页面提供服务。无需使用重复的 CSS 代码更新每个 HTML 页面，可以对单个 CSS 文件进行更改，并将这些更新应用到所有相关网页。我们来链接到外部样式表。

在 Visual Studio Code 编辑器中，在 <title> 元素后面添加一个空白行，键入 link，然后选择 Enter。 Visual Studio Code 应将以下行添加到 index.html 文件中。
```
<link rel="stylesheet" href="">
```

将 href= 更新为 href="main.css"，并选择 Control+S (Windows) 或 Command+S (macOS) 保存文件。

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
  <link rel="stylesheet" href="main.css">
</head>
...

编辑正文

接下来立即开始填写 <body> 元素。

<body> 元素包含客户在其浏览器中可见的网站内容。

在 <body> 元素内部添加一个标题 <h1> 元素，后跟一个段落 <p> 元素，然后创建包含多个列表项 <li> 元素的无序列表 <ul>。

编辑代码或复制并粘贴，以便其外观类似于以下示例。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

可将 ID 属性（在 <p> 元素中使用）用于样式化单个元素，而类属性（在 <li> 元素中使用）用于样式化同一类的所有元素。

在继续下一步之前，请确保选择 Control+S 或 Command+S 保存文件。

用浏览器打开

可以通过在浏览器中打开 HTML 文件在本地预览网页。你的浏览器指向的不是以 https:// 开头的网站地址，而是指向与 C:/dev/simple-website/index.html 类似的本地文件路径。

若要使用 Visual Studio Code 进行预览，请右键单击 index.html 并选择“使用默认浏览器打开”，或选择 index.html 文件并使用键盘快捷方式 Alt+B。

重要

如果遇到问题，请确保直接右键单击文件名图标或文本。如果出现“Visual Studio Code”对话框，请选择“是，我信任作者”；这是工作区信任功能，可让你决定项目文件夹是否应允许或限制自动执行代码。你刚刚创建了文件，因此它是安全的。

使用默认浏览器打开网页。

使用开发人员工具查看页面

可以通过使用浏览器中的开发人员工具检查网页。一起来试一试。

右键单击网页并选择“检查”以打开开发人员工具，或尝试以下快捷方式：
- 按“开发人员工具”的键盘快捷方式 F12。
- 在 Windows 和 Linux 上按 Ctrl+Shift+I，在 Mac 上按 Option+Command+I。
这些键盘快捷方式适用于 Microsoft Edge、Chrome 和 Firefox。如果你使用的是 Safari，请参阅 Web 开发工具。安装后，选择“Safari”>“偏好设置”，然后选择“高级”。在窗格底部，选择“在菜单栏中显示开发菜单”复选框。选择“开发”>“显示 Web 检查器”。有关详细信息，请查看 Safari Web 检查器文档。

要了解有关打开开发人员工具和主要可用功能的更多信息，请查看 DevTools 工具概述一文。
选择“元素”选项卡。
将鼠标移到“元素”选项卡中显示的 HTML 元素上，然后展开各种元素的内容。

开发人员工具中的“元素”选项卡将显示在浏览器中呈现的文档对象模型 (DOM)。调试时，查看浏览器如何解释你的源代码通常十分重要。