氛围编程入门
以网页制作为例，介绍氛围编程涉及到的核心概念，帮助新手入门
这是一篇写给完全零基础新手的指南，内容包括：
- 什么是网页背后的“积木块”（HTML、CSS、JS 到底在干什么）
- 什么是 Vibe Coding
- 如何用 Vibe Coding 亲手做出你的第一个网页
第一步：认识网页的三个“演员”
一个网页，无论它看上去多复杂，都只是三种东西在合作演戏：
- HTML —— 这是网页的“骨头和肉”
它负责把内容放在网页上。比如：标题文字、按钮、图片、输入框。你可以把它想象成盖房子的结构：先有墙，才有地方挂画。
- CSS —— 这是网页的“衣服和化妆”
它负责让骨头和肉变得好看。颜色、大小、间距、位置，全归它管。还是那个房子：墙是 HTML，但墙刷成粉色还是蓝色，沙发摆左边还是右边，就是 CSS 说了算。
- JavaScript (简称 JS) —— 这是网页的“大脑和动作”
它负责让网页动起来。你点击按钮弹出“你好”，或者网页自动刷新天气，都是 JS 在干活。房子里的电灯开关：你按下开关（动作），灯亮了（结果）——这个“动”就是 JS。
- 举个例子
你在网页上看到一个红色的“购买”按钮。
“按钮”两个字本身 = HTML
红色、圆角、大尺寸 = CSS
点击按钮后弹出“已加入购物车” = JavaScript
这三个演员，平时就住在一个叫 文件 的“剧本”里。最常见的剧本，就是后缀是 .html 的普通文件。
第二步：HTML文件是什么？怎么打开它？
你不需要安装任何特殊的软件。一个 .html 文件其实就是一本用“网页语言”写好的剧本，一本只有电脑能看懂的剧本。
- 怎么创建一个 .html 文件？
在电脑上新建一个文本文档（Windows 的记事本，或 Mac 的文本编辑都可以），然后把它的名字从新建文本文档.txt 改成 我的网页.html。系统可能会问“改变后缀名可能导致文件不可用”，点是就行。现在，这个文件就变成了一个网页剧本。
- 怎么打开看效果？
直接双击这个 .html 文件，它就会自动用你正在用的浏览器（比如 Chrome、Edge）打开。浏览器就是“演员”，它负责把剧本演出来给你看。
第三步：什么是 Vibe Coding？
传统的写网页，是你自己一行一行去写 HTML、CSS、JS 的剧本。你得记住很多“咒语”，漏一个符号整个页面就白屏了。
Vibe Coding（氛围编程） 换了一种完全不同的思路：
你不需要写代码，你只需要用日常说话的方式，告诉一个 AI（比如 ChatGPT、Claude、DeepSeek 等），你想要什么。然后 AI 直接把完整的 .html 文件剧本写好给你。 你的工作变成了：说想法 → 看效果 → 再提修改意见，就像和一个懂技术的美工朋友聊天。
“Vibe”这个词很贴切，你靠的是感觉和描述：“我要那种深夜小酒馆风格的页面，带一个暗色背景，中间有一句会慢慢浮现的欢迎语”，而不是去想代码。
这就好比你盖房子，以前得自己当木工、泥瓦匠；现在你成了设计师+房主，只管说：“我要一扇落地窗，采光要特别好”，AI 泥瓦匠去帮你实现。
第四步：开始你的第一个 Vibe Coding 项目（全程 5 分钟）
下面跟着做，什么都不用懂。
- 打开你喜欢的任何一个 AI 对话工具
ChatGPT、Claude、Kimi、DeepSeek……哪个顺手用哪个。
- 用最直白的话告诉它你的想法
复制下面这段话，或者自己改一改，发给 AI：
请帮我写一个完整的网页，要求：
· 背景是柔和的深蓝色，像夜空
· 网页正中间用白色大字写着“欢迎来到我的小站”
· 字的下面有一个粉色的按钮，写着“点我一下”
· 点击按钮后，按钮会变成绿色，并且文字变成“你成功啦！”
· 把所有的 HTML、CSS、JS 都写在一个 .html 文件里，代码要完整，能直接保存运行
· 最后告诉我这个文件怎么保存和使用
- AI 会给出一大段代码
它通常会给你一个代码块，类似这样（你不用看懂）：
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
直接全选，然后按 Ctrl+C（Mac 按 Cmd+C）复制，或点击下载按钮保存到电脑中。
- 把它保存成网页文件（若无法直接下载）
- 在桌面上新建一个文本文档（记事本/文本编辑）。
- 把复制的代码粘贴进去。
- 点“文件” → “另存为”。
- 在文件名那里输入：my-first-page.html。重点：一定要把保存类型选为“所有文件”，编码选 UTF-8，然后保存。
- 文件图标会变成浏览器的样子。
- 双击打开，见证奇迹
浏览器打开，你会看到一个深蓝色星空的页面，正中间有你写的字和按钮。点击按钮，颜色变了，文字也变了。 你刚刚做出了一个带交互功能的网页。
第五步：用“Vibe”继续改，越玩越熟
这才是 Vibe Coding 最有趣的地方。页面做出来了，但你可能觉得：“按钮不够圆”“字太小了”“背景要是能有点点星光就更好了”。
你完全不用自己碰代码。继续跟 AI 聊天就行：
“按钮再大一点，圆角一些，鼠标放上去要变小手” “给背景加上一些缓慢移动的星星” “再添一个能输入名字的框，点击按钮后下面显示‘xxx，你好’”
每一次提要求，AI 都会再给你一版完整的代码。你只需： 全选复制 → 粘贴进原来的 .html 文件覆盖全部旧内容 → 保存 → 刷新浏览器
修改、看效果，再修改、再看。这就形成了一个纯粹的 “描述-观看” 循环，完全不需要学编程语法。
你已经学会了
总结一下，你要记住的其实就是这三层关系：
- 网页 = HTML（内容）+ CSS（美化）+ JS（动作）
- 做网页的老方法 = 自己学每一种语言，一行行敲
- Vibe Coding 新方法 = 把你想要的样子说给 AI → AI 写好一个 .html 文件 → 你双击看戏
从今天开始，你已经不是网页的局外人了。去试着做一张给朋友的生日卡片、一张自己的作品展示页、一个小倒计时器……不会的，就问 AI。
你只负责想象，剩下的，都交给 Vibe。
