可视化演示

用动画理解编程概念，比死记硬背直观 10 倍

Vibe Coding 完整流程

当前步骤已完成待执行

AI 如何生成代码

看 AI 如何把你的一句话变成完整网页

用户输入

帮我做一个番茄钟

就绪

index.html

等待生成...

已生成 0 / 229 tokens0%

原理：AI 就像一个超级快速的"文字接龙"机器。它根据你给的提示词，一个字一个字地预测接下来最可能是什么。每次预测一个 token（通常是一个词或标点），直到完成整个代码。这就是为什么你描述得越清楚，AI 生成得越准。

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 树）。每个标签是一个节点，嵌套关系变成父子关系。树叶是文字内容，树枝是标签。浏览器根据这棵树来决定每个元素的颜色、大小和位置。

CSS 盒模型

每个 HTML 元素都是一个"盒子"

对应的 CSS 代码

margin: 20px;
border: 2px solid #333;
padding: 16px;
width: 200px;