介绍
在本实验中,你将学习如何使用 WebIDE(类似 VS Code 的强大且流行的代码编辑器)创建你的第一个 HTML 页面。
本教程涵盖了关键内容,例如配置 WebIDE、生成 HTML5 样板模板、向网页添加基本内容以及在 Web 浏览器中预览结果。通过遵循这些逐步说明,你将获得 Web 开发基础的实际经验,并为创建交互式和结构化的网页打下坚实的基础。
在本实验中,你将学习如何使用 WebIDE(类似 VS Code 的强大且流行的代码编辑器)创建你的第一个 HTML 页面。
本教程涵盖了关键内容,例如配置 WebIDE、生成 HTML5 样板模板、向网页添加基本内容以及在 Web 浏览器中预览结果。通过遵循这些逐步说明,你将获得 Web 开发基础的实际经验,并为创建交互式和结构化的网页打下坚实的基础。
LabEx WebIDE 提供了一个现代化的、类似 VS Code 的开发环境,适用于编码任务。WebIDE 非常适合 Web 开发项目,包括 HTML、CSS 和 JavaScript。
首先,点击 LabEx 界面中的 "WebIDE" 标签页以打开 WebIDE。WebIDE 左侧显示文件资源管理器,右侧显示代码编辑器。底部还有终端和其他一些工具。
~/project
。~/project
。在这一步中,你将学习如何在 WebIDE 中创建一个新的 HTML 文件。HTML(超文本标记语言)是用于创建网页的标准标记语言。每个网页都从一个 HTML 文件开始。
在 WebIDE 中,按照以下步骤创建一个新的 HTML 文件:
index.html
或者,你可以使用键盘快捷键 Ctrl+N
创建一个新文件,然后将其保存为 index.html
。
在命名 HTML 文件时,请记住以下重要规则:
.html
文件扩展名index.html
、about.html
等让我们通过终端验证文件是否已创建:
ls ~/project
示例输出:
index.html
现在,文件已准备好供你在接下来的步骤中添加 HTML 内容。.html
扩展名告诉 Web 浏览器这是一个 HTML 文档。
如果你熟悉终端,也可以使用以下命令创建文件:
touch ~/project/index2.html
了解更多关于 Linux 命令 的内容,以提升你的终端技能。
在这一步中,你将学习如何在 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>
提示:如果快捷方式不起作用,你可以将模板代码复制粘贴到
index.html
文件中。
让我们分解一下这个 HTML5 模板的关键组件:
<!DOCTYPE html>
声明这是一个 HTML5 文档<html lang="en">
是带有语言声明的根元素<head>
包含文档的元数据<meta charset="UTF-8">
指定字符编码<meta name="viewport">
确保在移动设备上正确渲染<title>
设置浏览器标签页中显示的页面标题<body>
是你添加页面内容的地方你可以修改 <title>
为你的页面设置一个有意义的名称。
在这一步中,你将学习如何使用不同的 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>
创建一个指向另一个网页的超链接这些基本元素帮助你结构和呈现网页上的内容。尝试使用不同的标签,看看它们如何改变内容的外观和布局。
一些给初学者的额外提示:
在这一步中,你将学习如何在 Web 浏览器中预览和渲染你的 HTML 页面。LabEx VM 在 WebIDE 中提供了内置的浏览器预览功能。
要预览你的 HTML 文件:
这将自动完成以下操作:
提示:LabEx VM 在 8080 端口上托管预览。你可以与他人分享预览链接以展示你的工作。当你的实验 VM 停止后,预览链接将不再有效。
需要观察的关键点:
本实验引导学习者完成了 HTML 开发的初始步骤,重点在于创建新的 HTML 文件并理解网页创建的基本结构。通过遵循逐步说明,参与者获得了使用 WebIDE 作为开发工具的实践经验,并学习了使用 HTML5 开始构建网页所需的基本技能。