Your first web page · 你的第一个网页
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · 此页面需较新浏览器（支持 SharedArrayBuffer）。请升级 Chrome、Edge、Firefox 或 Safari 至最新版本。
English
Welcome to the web
- A web page is made with HTML.
- HTML is just text with tags around it.
- You write HTML here and watch it appear — nothing to install.
中文
欢迎来到网页世界
- 网页是用 HTML 做出来的。
- HTML 其实就是文字,外面套上标签。
- 你在这里写 HTML,就能马上看到它出现 —— 不用安装任何东西。
English
How this page works
- Type in the box, then press ▶ to see your page.
- Press ✓ Check to see if your task is correct.
- Stuck? Press 💡 for a hint. Press ↻ to start over.
- Read each step, then press Continue.
中文
这个页面怎么用
- 在框里打字,然后按 ▶ 看你的网页。
- 按 ✓ 检查 看你的任务对不对。
- 卡住了?按 💡 看提示。按 ↻ 重新开始。
- 读完每一步,然后按 继续。
English
Tags wrap your words
- A tag is a word inside angle brackets, like
<p>. - Most tags come as a pair: an opening
<p>and a closing</p>. - A
<p>makes a paragraph — a block of text.
中文
标签把文字包起来
- 标签是尖括号里的一个词,比如
<p>。 - 大多数标签是一对:开始的
<p>和结束的</p>。 <p>做出一个段落 —— 一块文字。
<p>Hello! This is my first web page.</p>
English
More than one paragraph
- Put each paragraph in its own pair of
<p>tags. - The browser shows them one after another, top to bottom.
中文
不止一个段落
- 每个段落都放进自己的一对
<p>标签里。 - 浏览器会从上到下,一个接一个地显示它们。
<p>I am learning HTML.</p>
<p>This is fun.</p>
English
Common mistakes
- Tags go in angle brackets; the text you see goes between them.
- Most tags come in pairs, like
<p>...</p>.
中文
常见错误
- 标签写在尖括号里;你看到的文字写在标签之间。
- 大多数标签成对出现,如
<p>...</p>。
English
Now you try
- Below are two small tasks. Type your HTML and press ▶ to see it.
- Press ✓ Check when you think it is right. You can try as many times as you like.
中文
现在你来试试
- 下面有两个小任务。打好你的 HTML,按 ▶ 看效果。
- 觉得对了就按 ✓ 检查。想试多少次都可以。
Explore · 探索
HTML is a tree of nodes · HTML 是节点构成的树
Tags nest inside tags — the browser builds a tree (the DOM). · 标签嵌套在标签里——浏览器构建一棵树(DOM)。
Write a paragraph that says Hello, world! — type your text between the <p> and </p> tags. · 写一个段落,内容是 Hello, world! —— 把文字写在 <p> 和 </p> 之间。
Add a second paragraph below the first one. Make it say I made this. (Use a new pair of <p> … </p> tags.) · 在第一个段落下面再加第二个段落,内容是 I made this.(用一对新的 <p> … </p> 标签。)