这是一篇面向零基础用户的网站发布教程：你将完成 Cursor 的下载、安装、首次配置，并用 HTML、CSS 和少量 JavaScript 写出第一个可访问的网页项目。
写在前面：Cursor 是什么？
Cursor 是一款 AI 驱动的代码编辑器，官方文档将它描述为能理解代码库、支持自然语言生成与修改代码的编辑器。它的界面与 VS Code 接近，因此对新手比较友好：你可以像使用普通编辑器一样创建文件，也可以在需要时让 AI 帮你补全、解释、改写或排错。
适合谁学习
- 完全没写过网页，但想快速做出一个个人主页、作品页或活动页的人。
- 用过 VS Code，想尝试 AI 编程工具提升效率的人。
- 需要把想法快速变成网页原型的运营、设计、产品或自媒体创作者。
你最终会做出什么
最终项目是一个单页网站，包含标题区、内容卡片、按钮和简单交互。它不依赖复杂框架，文件结构清晰，适合作为继续学习 React、Vue 或网站发布平台的起点。
准备工作：下载安装到首次启动
下载 Cursor
打开官方站点 cursor.com，点击 Download；如果需要选择特定系统版本，可以进入 cursor.com/downloads。官方安装页给出的基础流程是：访问官网、运行安装包、安装完成后打开 Cursor。
| 系统 | 建议操作 | 新手提醒 |
| Windows | 下载 Windows 安装包并按提示安装 | 若系统拦截安装，请确认来源为 cursor.com |
| macOS | 下载对应芯片版本后拖入 Applications | Apple Silicon 与 Intel 机型要选对版本 |
| Linux | 按下载页提供的 AppImage 或 deb 包安装 | 初学者优先按官方下载页说明操作 |
首次配置
- 选择键盘快捷键：如果你熟悉 VS Code，可选择接近 VS Code 的快捷键。
- 选择主题：深色主题适合长时间编码，浅色主题适合写文档和截图。
- 设置终端偏好：后续运行网页预览或安装依赖时会用到。
- 如果想重新进入引导，可按 Ctrl+Shift+P，搜索 Cursor: Start Onboarding。
认识 Cursor 的三类核心 AI 能力
Tab 自动补全
Tab 适合在你已经知道要写什么时加速输入。比如输入一个函数名、一个 CSS 类名或一段 HTML 结构开头，Cursor 会给出多行建议，确认无误后按 Tab 接受。新手要记住：补全是建议，不是答案，接受前要读一遍。
Inline Edit：选中后局部修改
当你只想改一小段代码时，选中目标代码，按 Ctrl+K，输入「把这个按钮改成蓝色并加 hover 效果」一类的指令。它适合局部优化，不适合一次性重写整个项目。
Agent：让 AI 执行一组任务
Agent 适合更完整的任务，例如「创建一个个人主页项目，包含 index.html、style.css 和 script.js，并加入响应式布局」。官方快速开始文档也建议通过 Chat 面板使用 Agent 来创建测试、运行命令或修改项目。
创建第一个网页项目
新建项目文件夹
在电脑中创建一个文件夹，例如 my-first-webpage。打开 Cursor，选择 File > Open Folder，打开这个文件夹。对新手来说，项目文件夹就像一个独立的工作台：网页、样式、脚本和图片都放在里面，后续发布时也更清楚。
推荐文件结构
| 文件 | 作用 | 可以让 Cursor 帮你做什么 |
| index.html | 网页结构与文字内容 | 生成页面骨架、补充语义标签 |
| style.css | 颜色、布局、字体、响应式样式 | 优化视觉层级、适配手机端 |
| script.js | 按钮点击、主题切换、简单交互 | 添加事件监听、排查报错 |
让 Cursor 生成基础代码
在项目文件夹中新建 index.html、style.css、script.js。打开 Chat 或 Agent，输入下面的提示词：
请帮我创建一个适合新手学习的单页个人作品网站。要求：使用 index.html、style.css、script.js 三个文件；页面包含顶部标题区、关于我、作品列表、联系按钮；视觉风格简洁现代；移动端也能正常显示；代码加少量注释。
复制或让 Agent 直接写入文件后，先不要急着发布。你需要逐段阅读代码，确认每个文件都存在、HTML 正确引用 CSS 和 JS。
本地预览网页
- 最简单方式：在文件管理器中双击 index.html，用浏览器打开。
- 更接近真实网站的方式：安装 Live Server 类扩展，右键 index.html 启动本地服务器。
- 检查页面时重点看三件事：文字是否完整、按钮是否能点、手机宽度下是否拥挤。
用 AI 修改和排错
高质量提问模板
新手使用 Cursor 最大的误区，是只说
- 目标：把页面做得更像个人作品集。
- 约束：不要引入框架，只使用原生 HTML/CSS/JS。
- 验收：手机端一列显示，桌面端两列卡片，按钮有 hover 效果。
常见报错处理
| 现象 | 可能原因 | 处理方式 |
| CSS 没生效 | link 路径写错或文件名不一致 | 检查 href 是否为 style.css |
| 按钮没反应 | script.js 未引用或选择器写错 | 打开浏览器控制台看报错 |
| 中文乱码 | 缺少 UTF-8 声明 | 在 head 中加入 meta charset=’UTF-8′ |
| 手机端横向滚动 | 元素宽度超出屏幕 | 让 Cursor 检查固定宽度和响应式样式 |
发布你的第一个网站
发布前检查清单
- 文件名使用英文小写，首页保持 index.html。
- 图片路径不要引用本机绝对路径，例如 C:\Users\…。
- 用浏览器测试桌面端和手机端宽度。
- 让 Cursor 帮你做一次代码审查：检查无用代码、拼写错误、移动端问题。
适合新手的发布方式
| 方式 | 优点 | 适合场景 |
| GitHub Pages | 免费、适合静态网页和学习 Git | 个人主页、作品集 |
| Netlify | 拖拽文件夹即可发布，体验简单 | 快速展示网页原型 |
| Vercel | 适合后续学习前端框架 | React、Next.js 项目 |
如果你只是发布静态网页，Netlify 的拖拽部署通常最快；如果你想顺便学习版本管理，GitHub Pages 更值得长期使用。发布后，把网址发给朋友测试，收集不同设备上的反馈。
GitHub Pages 发布步骤
- 注册或登录 GitHub，新建一个公开仓库，例如 my-first-webpage。
- 把 index.html、style.css、script.js 上传到仓库根目录，确认首页文件名为 index.html。
- 进入 Settings > Pages，在 Source 中选择 main 分支和根目录，保存后等待部署完成。
- 部署成功后复制 Pages 提供的网址，用电脑和手机各打开一次。
Netlify 拖拽发布步骤
- 打开 Netlify 并登录账号，进入 Add new site 或 Sites 页面。
- 把包含 index.html 的项目文件夹拖到部署区域，等待系统上传并生成临时域名。
- 打开生成的网址检查页面，如果路径、图片或样式有问题，回到本地修正后重新拖拽部署。
Vercel 发布步骤
- 如果项目已经放到 GitHub，可以在 Vercel 中导入仓库。
- 纯静态项目通常不需要额外构建命令，保持默认配置即可。
- 部署完成后进入 Domains 或 Deployment 页面查看线上地址。
上线后检查清单
| 检查项 | 合格标准 | 可让 Cursor 协助的提示词 |
| 首屏加载 | 3 秒内能看到主要内容 | 请检查我的静态网页是否有过大的图片或阻塞资源 |
| 移动端显示 | 文字不溢出，按钮可点击 | 请帮我优化这个页面的移动端布局 |
| 链接与按钮 | 所有链接都能打开，按钮有反馈 | 请检查页面中所有链接、按钮和事件监听 |
| SEO 基础 | 标题、描述、图片 alt 文本完整 | 请为这个网页补充基础 SEO meta 标签 |
建议加入的基础 SEO 代码
在 index.html 的 head 中补充 title、description 和 viewport，是静态网页最基础的发布准备。可以让 Cursor 根据你的页面主题生成：网页标题不超过 30 个中文字符，description 控制在 80 到 120 个中文字符，并为主要图片补充 alt 文本。
维护与迭代
第一次发布不是结束，而是项目开始进入真实反馈阶段。建议每次只改一个方向，例如先优化移动端，再补充作品内容，最后增加表单或统计工具。每次修改前都保存一个可回退版本，这样遇到问题时不会手忙脚乱。
进阶建议：把 Cursor 用成学习伙伴
建立自己的提示词库
把好用的提示词保存下来，例如「帮我把这段 CSS 改成响应式布局」「请解释这段 JS 的执行顺序」「请用新手能懂的话指出代码问题」。随着项目变多，你会越来越知道该如何给 AI 明确上下文。
不要跳过基础概念
Cursor 能帮你写得更快，但 HTML 的结构、CSS 的盒模型、JavaScript 的事件机制仍然要学。建议每次让 AI 生成代码后，挑 3 行自己解释；解释不出来，就继续问
FAQ：新手常见问题
Cursor 是免费的吗？
Cursor 通常提供可试用或免费额度，也有付费方案。由于价格和额度会调整，正式使用前建议以官网 Pricing 页面为准。
不会英语可以用 Cursor 吗？
可以。你可以直接用中文提问，例如
Cursor 会不会替代我学习代码？
不会。它更像一个随时在线的助教，可以帮你生成草稿、解释错误、给出修改方案；但你仍然需要判断页面是否符合目标、代码是否可维护。
第一个网页要学框架吗？
不建议一开始就学框架。先用 HTML、CSS、JavaScript 完成一个静态页面，理解文件关系和浏览器运行方式，再学习 React 或 Vue 会更稳。
发布后还能继续修改吗？
可以。修改本地文件后重新部署即可。如果使用 GitHub Pages、Netlify 或 Vercel，后续还可以把代码仓库连接到平台，实现提交代码后自动更新网站。
参考来源
- Cursor 官方文档：Welcome，说明 Cursor 是 AI-powered code editor。
- Cursor 官方文档：Installation，说明下载、安装和首次设置流程。
- Cursor 官方文档：Quickstart，说明 Tab、Inline Edit、Agent 等入门功能。
