你的第一段代码，让 AI 来写

上一篇我们知道了网页是"结构 + 样式 + 交互"三层拼出来的。现在，我们来干一件真正的事：亲手让 AI 帮你写出一个网页。

整个过程你不需写一行代码，只要会"提需求"。读完这篇，你会真切体会到——编程的门槛，已经被 AI 拉到地面了。

准备：一个能运行网页的工具

最简单的方式：你的电脑上肯定有"记事本"和"浏览器"。我们就用这两个。

找一个文本编辑器（记事本、VS Code、任何能写纯文本的工具都行）
找一个浏览器（Chrome、Edge、Safari 都可以）

就这么简单，不需要装任何开发环境。后面章节我们会搭正式的开发环境，这里先用最朴素的方式让你看到效果。

第一步：告诉 AI 你要什么

打开任意一个 AI 工具（ChatGPT、Claude、豆包、通义、文心……任何一个都行），把下面这段话发给它：

我想做一个简单的个人名片网页，要求：

居中显示我的名字"张三"，大字号

名字下面是一句自我介绍"全栈开发学习者"

再下面放一个按钮"联系我"

背景用浅蓝色，整体看起来清爽

把 HTML、CSS 全部写在一个 .html 文件里，我可以直接双击打开

这就是一个需求描述。注意它的特点——讲清了"要什么"，没讲"怎么写"。

第二步：AI 会给你一段代码

AI 会返回类似下面这样的内容（不同 AI 写的会略有差异，但都能用）：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>我的名片</title>
  <style>
    body {
      background: #e0f2fe;
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }
    h1 { font-size: 48px; color: #1e3a8a; }
    p { color: #475569; font-size: 18px; }
    button {
      margin-top: 20px;
      padding: 10px 24px;
      background: #2563eb;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>张三</h1>
  <p>全栈开发学习者</p>
  <button onclick="alert('感谢联系！')">联系我</button>
</body>
</html>

看不懂？完全没关系，你不需要看懂。 这就是 AI 替你干的活。

第三步：保存成文件，双击打开

把上面这段代码完整复制
在文本编辑器里新建一个文件，粘贴进去
保存为 index.html（注意后缀是 .html，不是 .txt）
双击这个文件

你的浏览器会打开，展示出一个清爽的浅蓝色名片页：大字号的名字、自我介绍、一个能点的按钮。

恭喜你——你刚刚完成了人生第一个网页。 而你全程没有写一行代码。

这说明什么

把这个过程和"传统学编程"对比一下：

	传统方式	AI 辅助方式（本课所用）
学习重点	背语法、记 API	描述需求、看懂结果
出第一个网页	学几天甚至几周后	现在、立刻
改动	自己查文档改代码	告诉 AI "把背景换成绿色"

这不是说语法完全没用（后面你多少要能看懂代码），而是入门的门槛被彻底打破了。你不需要先苦学三个月才能做出东西，第一天就能看到成果。

试着改改看

现在你已经有了一个能跑的网页。试着跟 AI 说：

"把背景换成渐变的紫色到蓝色"
"名字下面加一张我的头像图片"
"点'联系我'按钮时，跳转到我的微信二维码"

AI 会给你更新后的代码，你替换掉文件内容、刷新浏览器，就能看到变化。这就是以后开发的基本节奏：提需求 → AI 改代码 → 看效果 → 再调整。

一个重要提醒

虽然 AI 帮你写代码，但你要能看懂代码大致在做什么。比如上面的例子里，你至少应该能对应上：

<h1>张三</h1> → 那个大标题
background: #e0f2fe → 那个浅蓝背景
onclick="alert(...)" → 点按钮弹出的提示

不需要会写，但要看得懂哪段对应哪个效果。这样 AI 写错了，你才知道哪里不对、怎么让它改。

后面章节我们会教你如何更系统地"读懂"代码，而不是"默写"代码。

本篇小结

你可以用"描述需求 → AI 生成代码 → 浏览器查看"的方式做网页，全程不写代码
关键能力是把要做的效果说清楚，而不是记语法
你要能"看懂"代码大致对应什么效果，方便验收和纠错

你已经迈出了最重要的一步。但很快你会发现：这个名片页只能你自己看，存不了数据，别人也访问不了。 下一篇我们就来聊聊，从一个"网页"到一个真正的"应用"，中间到底差了什么。