在 WebIDE 中创建你的第一个 HTML 页面

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

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

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/BasicStructureGroup -.-> html/viewport("`Viewport Declaration`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") subgraph Lab Skills html/basic_elems -.-> lab-451041{{"`在 WebIDE 中创建你的第一个 HTML 页面`"}} html/head_elems -.-> lab-451041{{"`在 WebIDE 中创建你的第一个 HTML 页面`"}} html/lang_decl -.-> lab-451041{{"`在 WebIDE 中创建你的第一个 HTML 页面`"}} html/viewport -.-> lab-451041{{"`在 WebIDE 中创建你的第一个 HTML 页面`"}} html/text_head -.-> lab-451041{{"`在 WebIDE 中创建你的第一个 HTML 页面`"}} html/lists_desc -.-> lab-451041{{"`在 WebIDE 中创建你的第一个 HTML 页面`"}} html/nav_links -.-> lab-451041{{"`在 WebIDE 中创建你的第一个 HTML 页面`"}} html/doc_flow -.-> lab-451041{{"`在 WebIDE 中创建你的第一个 HTML 页面`"}} end

创建新的 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 文件:

  1. 点击 "File" 菜单
  2. 选择 "New File"
  3. 将文件保存为 index.html
在 WebIDE 中创建新的 HTML 文件

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

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

  • 使用小写字母
  • 使用 .html 文件扩展名
  • 避免在文件名中使用空格
  • 使用描述性名称,例如 index.htmlabout.html

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

ls ~/project

示例输出:

index.html

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

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

touch ~/project/index2.html

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

生成 HTML5 样板模板

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

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

  1. 打开你的 index.html 文件
  2. 输入 !(感叹号)
  3. 按下 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 元素:

  • <h1><h2> 是标题标签(h1 是主标题,h2 是副标题)
  • <p> 用于文本段落
  • <ul> 创建一个无序(带项目符号的)列表
  • <li> 表示列表项
  • <a> 创建一个指向另一个网页的超链接

这些基本元素帮助你结构和呈现网页上的内容。尝试使用不同的标签,看看它们如何改变内容的外观和布局。

一些给初学者的额外提示:

  • 始终关闭你的 HTML 标签
  • 使用有意义和描述性的内容
  • 缩进你的代码以提高可读性

在浏览器中预览和渲染 HTML

在这一步中,你将学习如何在 Web 浏览器中预览和渲染你的 HTML 页面。LabEx VM 在 WebIDE 中提供了内置的浏览器预览功能。

要预览你的 HTML 文件:

  1. 在 WebIDE 中,点击右下角的 "Go Live" 按钮。
    WebIDE 中的 Go Live 按钮
  2. 一个新的浏览器标签页将打开,并渲染你的 HTML 页面。
    在浏览器标签页中渲染的 HTML 页面
  3. 或者,你可以点击 "Web 8080" 标签页来打开预览。
    WebIDE Web 8080 标签页预览

这将自动完成以下操作:

  • 启动一个 Web 服务器
  • 在预览窗口中打开你的 HTML 页面
  • 在你修改代码时提供实时更新

提示:LabEx VM 在 8080 端口上托管预览。你可以与他人分享预览链接以展示你的工作。当你的实验 VM 停止后,预览链接将不再有效。

需要观察的关键点:

  • 页面以不同的标题大小渲染
  • 列表显示为项目符号
  • 链接是可点击的
  • 页面标题显示在浏览器标签页中

总结

本实验引导学习者完成了 HTML 开发的初始步骤,重点在于创建新的 HTML 文件并理解网页创建的基本结构。通过遵循逐步说明,参与者获得了使用 WebIDE 作为开发工具的实践经验,并学习了使用 HTML5 开始构建网页所需的基本技能。

您可能感兴趣的其他 HTML 教程