3.1 Web 基础：HTML/CSS/JavaScript(极简版)

这一小节只回答 3 个问题：

页面是由什么拼出来的？
我怎么用 AI 生成一个最简单的网页？
我需要看懂到什么程度才算「合格」?

结论先说: 你不需要会手写一大堆标签和样式，只要能大致看懂结构，知道让 AI 改哪里，就够开始做项目了。

你只需要记住的 3 件事

想象一个网页像一间房子：

技术	像什么	负责什么
HTML	房子的骨架	标题、段落、图片、按钮等「有哪些东西」
CSS	房子的装修	颜色、字体、布局、间距，决定「好不好看」
JavaScript	房子的电路/遥控器	点击按钮会发生什么，数据怎么动

💡

看到一段网页代码时，先问自己：
这行是在描述「有什么」(HTML), 「怎么摆」(CSS), 还是「怎么动」(JS)?
能分清这一点，后面就很好和 AI 沟通。

一个最小可用网页

你可以先不管语法，只看「结构」：上面是头部，下面是内容。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>我的第一个网页</title>
    <style>
      body { font-family: system-ui; text-align: center; padding-top: 80px; }
      h1 { color: #2563eb; }
      button { padding: 8px 16px; border-radius: 999px; border: none; background: #2563eb; color: white; }
    </style>
  </head>
  <body>
    <h1>你好,AI 编程!</h1>
    <p>这是我用 AI 生成的第一个网页。</p>
    <button onclick="alert('你点了我一下')">点我一下</button>
  </body>
</html>

你可以做一个快速体验：

第 1 步：建一个文件

在电脑上新建一个文件，命名为 hello.html，把上面的代码完整复制进去并保存。

第 2 步：用浏览器打开

双击这个文件，用 Chrome 打开。你应该能看到标题、文字和一个按钮。

第 3 步：随便改一改

把 <h1> 里的文字改成你的名字
把 color: #2563eb; 改成别的颜色
再保存刷新，看看有什么变化

做到这里，你已经对 HTML/CSS/JS 有了「手感」。

用 AI 生成自己的第一个网页

接下来的目标是： 让 AI 写，你来改。

复制下面这段需求，发给你常用的 AI(如 ChatGPT、Claude、DeepSeek 都可以):


帮我生成一个 HTML 单文件网页,要求:
- 页面居中显示内容
- 顶部有一个大标题"我的 AI 编程之旅"
- 下面有三条时间线,分别写"入坑 AI 编程"、"完成第一个网站"、"做出第一个赚钱的小工具"
- 使用柔和的配色,适合在电脑和手机上浏览

请只返回完整的 HTML 代码。

拿到代码之后：

全选复制
粘贴到 journey.html
用浏览器打开，看看效果

🎯

这就是你真正需要掌握的流程:

用人话说出你想要的效果
让 AI 生成 HTML/CSS/JS
你负责打开、修改文字/颜色/布局，直到满意

我到底要不要学语法？

建议的标准(做到这些就够用):

看得出哪些是标题、段落、图片、按钮
知道 <style>...</style> 里是控制样式的
看到 onclick="..." 这类，知道是「点了之后会发生什么”
改一改文字/颜色/间距，不会觉得害怕

如果你遇到看不懂的东西，就直接把代码丢给 AI:


请逐段解释这段 HTML/CSS/JS 在做什么,  
我是一名零基础新手,请用我能听懂的话来讲,并告诉我"这一段我能改哪些地方"。

这比自己啃文档快得多，也更符合「让 AI 帮你干活」的思路。

下一节: Next.js 核心概念 – 在这个基础上，用 AI 帮你搭一个真正的多页面网站。