介绍
🧑💻 刚接触 Linux 或 LabEx?我们建议从 Linux 快速入门 课程开始。
你好,欢迎来到 LabEx!在第一个实验中,你将学习经典的 "Hello, World!" 程序,不过这次是用 CSS 来实现。
点击下方的 继续 按钮开始实验。
🧑💻 刚接触 Linux 或 LabEx?我们建议从 Linux 快速入门 课程开始。
你好,欢迎来到 LabEx!在第一个实验中,你将学习经典的 "Hello, World!" 程序,不过这次是用 CSS 来实现。
点击下方的 继续 按钮开始实验。
我们已经在 WebIDE 中创建了 index.html
文件。让我们打开它并添加一些 HTML 代码。
<!doctype html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello HTML</h1>
</body>
</html>
然后点击右下角的 Go Live 按钮,这将在 8080 端口上运行一个本地 Web 服务器。
现在,你可以切换到 Web 8080 标签页,并点击刷新按钮查看更改。
让我们在 index.html
文件中添加一些 CSS 代码。
<!doctype html>
<html>
<head>
<title>My First Web Page</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello HTML</h1>
</body>
</html>
切换到 Web 8080 标签页,并点击刷新按钮查看更改。
我们已经在 WebIDE 中创建了 style.css
文件。让我们打开它并添加一些 CSS 代码。
h1 {
color: red;
}
p {
color: blue;
}
然后,修改 index.html
文件以使用外部 CSS 文件。
<!doctype html>
<html>
<head>
<title>My First Web Page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
切换到 Web 8080 标签页,并点击刷新按钮查看更改。