Make it a real 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
A real web page
- So far you wrote pieces of HTML. A full page wraps them in a frame.
- That frame is almost the same on every web page in the world.
- Let's meet it once — then it becomes a habit.
中文
一个真正的页面
- 到现在你写的是 HTML 的零件。一个完整的页面会把它们装进一个框架里。
- 这个框架,几乎在世界上每个网页里都一样。
- 我们认识它一次 —— 之后它就变成习惯了。
English
The four parts
<!DOCTYPE html>— the first line. It says: this is modern HTML.<html>— wraps the whole page.<head>— hidden information about the page (like its<title>).<body>— everything you see on the page.
中文
四个部分
<!DOCTYPE html>—— 第一行。它说:这是现代 HTML。<html>—— 把整个页面包起来。<head>—— 关于页面的隐藏信息(比如它的<title>)。<body>—— 页面上你看得到的一切。
Explore · 探索
The page skeleton as a tree · 页面骨架是一棵树
Every page is a tree: <html> holds · 持有 <head> (setup) and <body> (what you see). · 每个页面都是一棵树:<html> 包含 <head>(设置)和 <body>(你看到的内容)。
<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>Hello!</h1>
<p>This is a real web page.</p>
</body>
</html>
English
The title shows in the tab
- The
<title>does not appear on the page itself. - It is the name shown on the browser tab and in search results.
- Every page should have one.
中文
标题显示在标签页上
<title>不会出现在页面本身上。- 它是显示在浏览器标签页上、以及搜索结果里的名字。
- 每个页面都应该有一个。
English
Common mistakes
- A page needs
<html>, a<head>and a<body>. - The tab title comes from
<title>inside<head>.
中文
常见错误
- 一个页面需要
<html>、一个<head>和一个<body>。 - 标签页标题来自
<head>里的<title>。
English
Now you try
- Notice how
<head>and<body>sit inside<html>. - Add a title, then give a page its doctype line.
中文
现在你来试试
- 注意
<head>和<body>是放在<html>里面的。 - 加一个标题,再给一个页面补上 doctype 那一行。
Give the page a title. Add <title>My Page</title> inside the <head>. · 给页面起个标题。在 <head> 里加上 <title>My Page</title>。
Start this page properly. Add <!DOCTYPE html> as the very first line. · 给这个页面一个正确的开头。把 <!DOCTYPE html> 加在最前面一行。