中文

欧洲

亚洲

← 第 1 关 – 建造者

第 1/12 课 ⏱ 20 分钟

网站是怎么工作的，以及你的第一页

了解在浏览器里输入地址后会发生什么，并搭建你网站的基础。

打开网站时会发生什么

当你在浏览器里输入像 www.myschool.com 这样的地址时：

  1. 浏览器通过互联网向 服务器 发消息——网站所在的那台电脑：“嘿，把页面发给我！”
  2. 服务器回复并送回 文件——文字、图片、代码。
  3. 浏览器用这些文件在屏幕上 画出页面。

服务器发来的文件用一种叫 HTML 的语言写成。这正是你要学的。现在你的网站还不放在服务器上——它在你的电脑上，最后一课我们会把它放到网上。

选择你的项目

写第一行代码之前，先决定 你要做什么。整个这一级你会做一个项目：

选好了？很好。每课的任务都涵盖四个项目——找到属于你的那个就行。

跟我看：地球上每个页面都从这里开始

每个网页——从你自己的到 YouTube——都从完全相同的骨架开始：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page name</title>
  </head>
  <body>
    <h1>A big heading</h1>
    <p>Some text.</p>
  </body>
</html>

用大白话解释：

代码告诉浏览器什么
<!doctype html>”注意，HTML 页面要开始了！“
<html lang="en">”里面的内容是一整页，语言是英语。“
<head> … </head>”这里是 关于 页面的信息。” 访客看不到。
<meta charset="UTF-8">”可能有特殊字符，准备好。“
<title> … </title>页面名字——显示在浏览器标签上。
<body> … </body>”访客真正看到的内容从这里开始。” 你的所有内容放这里。

注意标签怎么工作：<h1> 打开，</h1>（带斜杠）关闭。中间的内容属于这个标签。就像括号一样。

轮到你了 💪

  1. 在 VS Code 里打开你的 my-website 文件夹（来自预备级），打开里面的 index.html。删掉现有内容，输入上面例子里的页面骨架。

  2. 把 <title> 和 <h1> 改成符合你项目的，在标题下面加一个 <p> 段落，写一句介绍你的网站。

  3. 保存（Ctrl+S），在浏览器打开 index.html（或按 F5 刷新）。

不确定怎么做？每个项目的参考答案：

🏫 参考答案：我的学校网站 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <h1>Riverside Elementary School</h1>
    <p>Welcome to our school's website. You'll find the schedule, lunch menu, and photos from events here.</p>
  </body>
</html>
🙋 参考答案：我的个人网站 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <h1>Hi, I'm Jake</h1>
    <p>This is my website. I love soccer, Minecraft, and building websites.</p>
  </body>
</html>
🌍 参考答案：旅行日记 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <h1>Where We've Been 🌍</h1>
    <p>A journal of our trips and adventures. A new story gets added every holiday.</p>
  </body>
</html>
⚽ 参考答案：俱乐部网站 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Riverside Eagles FC</h1>
    <p>The official website of our soccer club. Results, roster, and training schedule.</p>
  </body>
</html>
✅

检查一下： 浏览器标签显示你的网站名字，页面上有你的标题和那句话。如果是——基石已经铺好了！

这堂课你要记住

© 2026 Ing. Martin Polak / AlgoRhino · 内容使用条款