在 WebIDE 中创建你的第一个 HTML 页面 | 初学者教程

介绍

在本实验中，你将学习如何使用 WebIDE（类似 VS Code 的强大且流行的代码编辑器）创建你的第一个 HTML 页面。

本教程涵盖了关键内容，例如配置 WebIDE、生成 HTML5 样板模板、向网页添加基本内容以及在 Web 浏览器中预览结果。通过遵循这些逐步说明，你将获得 Web 开发基础的实际经验，并为创建交互式和结构化的网页打下坚实的基础。

创建新的 HTML 文件

LabEx WebIDE 提供了一个现代化的、类似 VS Code 的开发环境，适用于编码任务。WebIDE 非常适合 Web 开发项目，包括 HTML、CSS 和 JavaScript。

首先，点击 LabEx 界面中的 "WebIDE" 标签页以打开 WebIDE。WebIDE 左侧显示文件资源管理器，右侧显示代码编辑器。底部还有终端和其他一些工具。

LabEx WebIDE 界面概览

文件资源管理器：显示项目目录结构，你可以在这里创建、编辑和管理文件。默认工作目录是 ~/project。
代码编辑器：提供一个文本编辑器，用于编写和编辑代码。你可以创建新文件、打开现有文件并查看代码更改。
终端：提供一个命令行界面，用于运行 shell 命令、安装包和管理文件。你可以直接在终端中执行命令。默认工作目录是 ~/project。

在这一步中，你将学习如何在 WebIDE 中创建一个新的 HTML 文件。HTML（超文本标记语言）是用于创建网页的标准标记语言。每个网页都从一个 HTML 文件开始。

在 WebIDE 中，按照以下步骤创建一个新的 HTML 文件：

点击 "File" 菜单
选择 "New File"
将文件保存为 index.html

在 WebIDE 中创建新的 HTML 文件

或者，你可以使用键盘快捷键 Ctrl+N 创建一个新文件，然后将其保存为 index.html。

在命名 HTML 文件时，请记住以下重要规则：

使用小写字母
使用 .html 文件扩展名
避免在文件名中使用空格
使用描述性名称，例如 index.html、about.html 等

让我们通过终端验证文件是否已创建：

ls ~/project

示例输出：

index.html

现在，文件已准备好供你在接下来的步骤中添加 HTML 内容。.html 扩展名告诉 Web 浏览器这是一个 HTML 文档。

如果你熟悉终端，也可以使用以下命令创建文件：

touch ~/project/index2.html

了解更多关于 Linux 命令的内容，以提升你的终端技能。

生成 HTML5 样板模板

在这一步中，你将学习如何在 WebIDE 中生成一个标准的 HTML5 样板模板。样板是一个标准模板，提供了 HTML 文档的基本结构。

在 WebIDE 中，你可以使用内置快捷方式快速生成 HTML5 模板。按照以下步骤操作：

打开你的 index.html 文件
输入 !（感叹号）
按下 Tab 键

这将自动生成一个包含所有基本元素的完整 HTML5 模板：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

HTML5 模板生成演示

提示：如果快捷方式不起作用，你可以将模板代码复制粘贴到 index.html 文件中。

让我们分解一下这个 HTML5 模板的关键组件：

<!DOCTYPE html> 声明这是一个 HTML5 文档
<html lang="en"> 是带有语言声明的根元素
<head> 包含文档的元数据
<meta charset="UTF-8"> 指定字符编码
<meta name="viewport"> 确保在移动设备上正确渲染
<title> 设置浏览器标签页中显示的页面标题
<body> 是你添加页面内容的地方

你可以修改 <title> 为你的页面设置一个有意义的名称。

向 HTML 页面添加基本内容

在这一步中，你将学习如何使用不同的 HTML 元素向你的 HTML 页面添加基本内容。HTML 使用标签来结构和显示网页上的内容。

在 WebIDE 中打开你的 index.html 文件，并将空的 <body> 部分替换为以下内容：

提示：将代码片段复制粘贴到你的 index.html 文件中以添加内容。替换现有的 <body></body> 内容。我们将在接下来的实验中了解更多关于 HTML 元素的内容。

<body>
  <h1>欢迎来到我的第一个网页</h1>
  <p>这是一个文本段落。HTML 让你可以轻松创建不同类型的内容。</p>

  <h2>我最喜欢的爱好</h2>
  <ul>
    <li>编程</li>
    <li>阅读</li>
    <li>旅行</li>
  </ul>

  <h2>快速链接</h2>
  <a href="https://www.example.com">访问示例网站</a>
</body>

让我们分解一下使用的 HTML 元素：