← 代码俱乐部 · 工匠层 01 / 8
什么是网页？为什么打开浏览器能看见东西？孩子写下第一行代码，按保存，看见自己写的字出现在浏览器里。神奇感从这一刻开始。
code.visualstudio.com，一路下一步）。my-page。index.html，粘贴：
<!DOCTYPE html> <html>
<!DOCTYPE html> 告诉浏览器"我是一个 HTML5 文件"。<html> 是最外面的大盒子——整个网页都装在它里面。
👉 试改：删掉 <!DOCTYPE html>，看浏览器是否还能打开。（答案：大多时候还能，但不规范。）
<head><title>我的第一个网页</title></head>
<head> 里放的是"配置信息" —— 浏览器看得到，用户看不到。<title> 是网页的标题，会显示在浏览器标签页上。
💡 想象：如果网页是一个人，<head> 是他的"身份证和准许证"，<body> 是他真正的身体。
👉 试改：改 title 里的字（比如改成"小王的网页"），保存刷新，看浏览器标签页变了没。
<body> <h1>你好，世界</h1> <p>这是我自己做的网页。</p> </body>
<body> 里放的是用户能看到的内容。<h1> 是大标题，<p> 是段落（paragraph）。浏览器一行行显示它们。
💡 标签的含义：<h1> = "这是最重要的标题"（不是因为字大，而是语义重要）。
👉 试改：在 <p> 下面再加一行 <p>我叫___。</p>，看网页变成什么样。
</html>
</html> 就是关闭最开始的 <html>。所有标签都要配对：打开一个 <xxx>，最后要关闭 </xxx>。
💡 配对的规则：就像括号，(( 要配 ))。HTML 里所有标签都要正确配对。
<!DOCTYPE html> <html> <head><title>我的第一个网页</title></head> <body> <h1>你好，世界</h1> <p>这是我自己做的网页。</p> </body> </html>
index.html。它在浏览器里打开了！<h1> 里的字，刷新。改 <p> 里的字，刷新。网页就是一个文件，浏览器知道怎么读它。没有什么是魔法。
下面是一个现成的 HTML 网页。试试改改它 —— 比如改改标题、改改文字内容。按"运行"就能看到效果。
这题没有唯一的"对"答案。下面是一个尝试，给你看看可以怎么扩展：
<!DOCTYPE html> <html> <head> <title>小王的网页</title> </head> <body> <h1>嗨，我叫小王</h1> <p>我喜欢编程。</p> <p>我还喜欢玩游戏。</p> <p>这是我写的第一个网页！</p> </body> </html>
关键点：你可以加很多 <p> 标签，也可以改 <title> 和 <h1>。浏览器会一行行把它们显示出来。
现在让你自己从零开始写 HTML。这次我只告诉你要求，你来决定怎么组织。
一个完整的例子：
<!DOCTYPE html> <html> <head> <title>小红的自我介绍</title> </head> <body> <h1>小红</h1> <p>我叫小红，今年 10 岁。</p> <p>我喜欢画画，每周末都会画一张新的画。</p> <p>现在我正在学编程，希望能做一个属于自己的网页！</p> </body> </html>
关键：整个网页是"骨架"（DOCTYPE、html、head、body）+ 内容。你把自己的真实想法填进去就行。
这次我故意给你一个"坏"的网页。它在浏览器里会出错。你的任务是找出问题，改好它。
有两处错误需要修正：
<!DOCTYPE html> <html> <head> <title>我的好网页</title> </head> <body> <h1>这是标题</h1> <p>这是第一段，现在我关闭了这个标签。</p> <p>第二段。</p> </body> </html>
关键点：① <title> 需要 </title> 来闭合；② 第一个 <p> 需要 </p> 来闭合。HTML 里的每个开标签都要有一个对应的关闭标签。浏览器有时候会自动"猜"，但不靠谱 —— 最好自己写对。