练习 - 创建 HTML 页面

  • 5 分钟

在本练习中，你将开始为简历创建网页。 首先添加一些高级信息，例如你的姓名和章节标题。 你还添加一些注释，我们将其用作在后面的练习中添加信息的位置的标记。

本练习使用 vscode.dev - 基于 Web 的 Visual Studio Code 和 CodeSwing 版本。 这些工具有助于简化开发过程。 无需本地安装即可完成以下练习。

使用 CodeSwing 创建 HTML 页面

首先，您需要在 vscode.dev 中创建一个文件夹，设置您的工具，然后使用 CodeSwing 创建一个代码样例。 Swing 可自动显示你在 vscode.dev 中创作的代码的结果。 这使你可以快速进行修改，并实时进行更新。

以下视频演示如何在 Visual Studio Code 中安装 CodeSwing。 这些步骤还包含在练习步骤中。

  1. 在桌面上创建名为“简历”的文件夹。
  2. 打开 vscode.dev。
  3. 选择“打开文件夹”。
  4. 导航到之前创建的“简历”文件夹，然后选择“选择文件夹”。
  5. 当系统提示“允许网站查看文件”时，选择“查看文件”。
  6. 选择“扩展”按钮。

    “扩展”图标的屏幕截图。

  7. 在“在市场中搜索扩展”文本框中，键入“CodeSwing”。
  8. 选择“安装”以安装 CodeSwing。
  9. 在 Mac 上选择 Ctl-Shift-P 或 Cmd-Shift-P ，打开命令面板。
  10. 在命令面板中键入 CodeSwing，然后选择 CodeSwing: 在目录中新建 Swing...。
  11. 选择“选择文件夹”以使用当前目录（这是你在上一步中创建的目录）。
  12. 选择 “基本：仅限 HTML”。
  13. 当系统提示 保存更改以恢复 时，请选择“ 保存更改”。

Visual Studio Code 创建了两个并排的窗口。 左侧是编辑器，可在其中输入 HTML。 右侧的行为类似于浏览器，用于显示 HTML 代码的结果。

添加 HTML 以创建页面的结构

接下来，添加 HTML 以创建页面的结构。 创建三个主要 html元素， head以及 body。 在body中，添加一个部分，包含有关你的姓名和社交媒体的一般信息。 然后，你应添加列出你的教育和经历的部分。

以下视频演示如何在 Visual Studio Code 中创作 HTML 并在 CodeSwing 中呈现代码。 这些步骤还包含在练习步骤中。

不妨将 你的姓名 替换为你自己的姓名。 在其他练习中，你将创建包含电子邮件地址、社交媒体账号，以及教育背景和工作经历的列表和链接。

添加代码后，你将查看已添加的代码。

  1. 在 index.html中添加以下 HTML：
<html>
<head>
  <title>Your Name resume</title>
</head>
<body>
  <h1>My Name</h1>
  <!-- email address -->
  <h2>Social Media</h2>
  <!-- social media -->
  <h2>Education</h2>
  <!-- education -->
  <h2>Experience</h2>
  <!-- experience -->
</body>
</html>

HTML 中的每个元素都执行特定作。 下表介绍了 HTML 中使用的标记，以及浏览器如何理解它们。

标记 DESCRIPTION
<html> 整个 HTML 文档的“容器”标记。 所有其他标记都在 HTML 元素内编写。
<head> 标头容器。 标头通常包括对页面或网站所需的其他文件的引用。 它还可能包括搜索引擎和社交媒体网站用来更好地查找网站的数据。
<body> 此标记为网页创建正文容器。 大多数显示元素都位于主体元素中。
<div> 分区标记在 HTML 中创建一个节。 各个部分通常包含相似或彼此相关的内容。
<h1> - <h6> 这些是标头标记。 它们为 HTML 文档提供一些结构。 他们告诉浏览器以特定方式设置它们之间的文本格式，以显示该层次结构。
<!-- comment text --> 这些标记是 HTML 中的注释。 它们不会创建呈现的输出。 开发人员使用它们使代码更易于查找、共享和理解。
/* CSS comment */ 这些注释标签用于CSS层叠样式表。
  1. 键入时，页面会自动更新;最终结果如下图所示：

简历结构的屏幕截图。

查看代码

每个 HTML 页面都 html 作为根核心元素，其中包含所有内容。 html 通常有两个直接子级， head 其中包含元数据，以及 body 包含要显示的信息。

请注意，你只需对你的名称使用一个 h1 元素，而对每个节的标题使用 h2 元素。 这有助于突出显示页面最重要的部分。 你的姓名是页面上最重要的信息，因此，它会被放在最显眼的位置 h1。

最后，有电子邮件地址、社交媒体、教育和体验的评论。 这些用作占位符，并在本模块的后续练习中被替换。