可视化演示 · 四个概念
这四个演示对应课程里的四个关键概念。每一个都可以暂停、重播，也可以只看静态结果——动画只是解释过程，不是理解的前提。
所有演示都是本地 SVG 与 CSS 动画，不请求任何接口；开启「减少动态效果」时不会自动播放。
从一句大白话到能打开的网页，中间到底发生了什么。
← 左右滑动查看完整流程 →
模型是逐段预测下一个词，而不是先想好整段再一次性写出来。
看一段话怎样被拆成可以运行的网页代码
帮我做一个番茄钟
等待生成...原理：模型更像一个速度很快的“文字接龙”工具：它根据你给的描述，逐个预测接下来可能出现的 token（通常是词或标点），直到代码写完。 描述越具体，生成结果通常越容易修改，也越接近你真正想做的东西。
浏览器把标签和嵌套关系解析成一棵树，再据此决定每个元素的样子。
浏览器如何把代码变成树状结构
<!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 树）。每个标签是一个节点，嵌套关系变成父子关系。 树叶是文字内容，树枝是标签。浏览器根据这棵树来决定每个元素的颜色、大小和位置。
每个元素都是一个盒子：内容、内边距、边框、外边距，一层套一层。
每个 HTML 元素都是一个“盒子”
margin: 20px;
border: 2px solid #253B39;
padding: 16px;
width: 200px;