课程/第三章：动手实践

创建一个网页

●入门约 15 分钟实践

这节课你会...

打开右侧的 Playground，亲自体验从一句话到一个网页的全过程。

选一个题目开始

三个题目，选一个最有感觉的：

A. 个人名片页 做一个展示自己的页面：名字、简介、联系方式、一张头像。

B. 倒计时页面 显示距离某个日期还剩多少天/时/分/秒，比如"距离 2026 年春节还有 XX 天"。

C. 颜色展示板 展示 6 个你喜欢的颜色，每个显示色值和名字，点击可以复制色值到剪贴板。

没有"一次成功"这回事

打开 Playground，输入你选好的题目描述。等你收到第一版代码，大概率是这种感觉：

"emmm...跟我想的不太一样"

太正常了。所有人第一版都是这样。这不是你的问题，也不是 AI 的问题。是描述和实现之间天然存在的距离。

迭代清单

不满意的话，按这个清单逐条改：

每条只说一个改动。每改完一条，看效果，满意了再改下一条。

浏览器如何理解 HTML

代码怎么变成网页结构

HTML → DOM 树

浏览器如何把代码变成树状结构

HTML 代码

<!DOCTYPE html>
<html>
<head>
  <title>我的主页</title>
  <style>
    body { font-family: sans-serif; }
    h1 { color: #e85d3a; }
  </style>
</head>
<body>
  <h1>你好！</h1>
  <p>欢迎来到我的网站</p>
</body>
</html>

原理：浏览器读入 HTML 后，会把它解析成一棵"树"（DOM 树）。每个标签是一个节点，嵌套关系变成父子关系。树叶是文字内容，树枝是标签。浏览器根据这棵树来决定每个元素的颜色、大小和位置。

动手练习

修改代码，完成练习目标

修改标题颜色

把网页的主标题颜色改成你喜欢的颜色

目标：修改 h1 的 color 属性，改成任意不同于 #333 的颜色

动手实践

描述你想要的效果，AI 帮你生成代码

Prompt Playground动手试试

提示：描述越具体，生成效果越好