从零开始:用Cursor写你的第一个网页

站长
2026年3月26日 · 阅读 1345 · 点赞 14

从零开始:用Cursor写你的第一个网页

如果你从来没写过代码,Cursor是最好的入门工具。它有图形界面,能实时预览,而且AI就在旁边随时帮你。

什么是Cursor?

Cursor是一个代码编辑器(类似Word,但专门写代码用的),内置了AI助手。你可以:

  • 用中文告诉AI你想做什么

  • AI帮你写代码

  • 右边实时预览效果

  • 不满意就让AI修改
  • 第一步:下载安装

  • 去 cursor.com 下载(免费)

  • 安装,打开

  • 选择一个文件夹作为你的项目目录
  • 第二步:创建第一个文件

  • 新建一个文件,命名为 index.html

  • 按 Ctrl+K(Mac是Cmd+K)唤出AI

  • 输入:
  • 帮我做一个个人介绍网页,包括:
  • 我的名字(居中显示,大字)

  • 一段自我介绍

  • 我的爱好列表

  • 一个联系邮箱

  • 用好看的样式,颜色搭配要舒服

  • AI会在几秒内生成完整的HTML代码
  • 第三步:预览效果

    右键点击文件 → "Open with Live Server"
    或者直接双击 index.html 文件在浏览器中打开。

    你会看到一个漂亮的个人页面出现在浏览器里!

    第四步:修改和调整

    不满意?继续跟AI说:

  • "把背景色改成浅蓝色"

  • "名字下面加一条横线"

  • "加一个暗黑模式切换按钮"

  • "加上我的照片"(把照片放到同一个文件夹)
  • 每次AI修改后,浏览器会自动刷新预览。

    第五步:加点交互

    试试让AI加一些互动效果:

  • "鼠标放上去的时候名字变色"

  • "点击邮箱自动打开邮件客户端"

  • "加一个'返回顶部'的按钮"
  • Cursor vs 直接用ChatGPT

    | 对比 | Cursor | 直接聊天 |
    |------|--------|----------|
    | 代码管理 | 自动保存文件 | 需要手动复制 |
    | 实时预览 | 内置 | 需要自己操作 |
    | 修改代码 | AI直接改文件 | 要说清楚改哪里 |
    | 多文件项目 | 方便 | 容易乱 |

    常见问题

    Q:Cursor收费吗?
    A:基础版免费,每月有一定量的AI对话额度。新手够用。

    Q:需要学HTML吗?
    A:不需要。但用着用着你会自然理解一些基础概念,这就够了。

    Q:做好的网页怎么给别人看?
    A:可以部署到GitHub Pages或Vercel(都免费),具体方法让AI教你。

    小结

    Cursor让"写代码"变成了"跟AI聊天"。你不需要记任何语法,只需要知道自己想要什么。今天就下载试试,30分钟后你就有自己的第一个网页了。

    站长
    人人都是程序员,站长