AI 编程 · 第三章：动手实践

创建一个网页

先跑起来，再谈好不好看

进阶约 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: #59AAA5; }
  </style>
</head>
<body>
  <h1>你好！</h1>
  <p>欢迎来到我的网站</p>
</body>
</html>

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

动手练习

改代码，完成练习目标。检查在你本机完成，不联网。

修改标题颜色

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

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

学习助手（可选）

需要时可以提问；没配 AI 也不影响课程、练习和测验。

学习助手需要时再用

你好，我是课程里的可选学习助手。正文、练习和进度都在这里，不需要我也能继续。卡住时，把具体的一段代码或一句话贴过来就好。我们可以一起拆概念、改描述，或者把一个小想法拆成几步来做。

网页小工坊

描述想法后可以选用模型生成代码；也可以直接编辑和预览。

网页小工坊把想法做出来

说清楚页面要做什么，结果会更接近你的想法

AI 编程 · 同轨道下一节修改和优化