Win11 下从 0 到 1：安装 Cursor 并创建你的第一个 Hello World 网站

想不想体验一下用 AI 辅助编程的感觉？Cursor 就是一款集成了强大 AI 功能的代码编辑器，能帮你更快、更智能地写代码。这篇教程将手把手带你从零开始，在 Windows 11 系统上安装 Cursor，并用它创建一个简单的 “Hello World” 网页。

准备工作

一台运行 Windows 11 的电脑。
网络连接（用于下载 Cursor）。

第一步：下载 Cursor 安装程序

首先，我们需要从 Cursor 官网下载最新的 Windows 安装包。

打开你的浏览器（比如 Edge、Chrome 或 Firefox）。
访问 Cursor 官方网站：https://cursor.sh/
网站通常会自动检测你的操作系统，并显示 Windows 版本的下载按钮。点击那个大大的 “Download for Windows” 按钮。
浏览器会开始下载一个 .exe 安装文件。耐心等待下载完成。

第二步：安装 Cursor

下载完成后，找到你保存安装文件的文件夹（通常是“下载”文件夹），然后开始安装。

双击下载好的 .exe 文件（文件名类似 Cursor.Setup.xxx.exe）。
Windows 可能会弹出用户账户控制（UAC）提示，询问你是否允许此应用对你的设备进行更改。点击“是”。
接下来会看到 Cursor 的安装向导。通常情况下，你只需要接受许可协议，然后一路点击 “Next” 或 “Install” 即可。你可以选择安装路径，但保持默认通常是最好的选择。
安装过程可能需要几分钟时间。
安装完成后，安装向导会提示你。你可以选择“完成”并让它立即启动 Cursor。

第三步：初识 Cursor

第一次启动 Cursor 时，它可能会引导你进行一些初始设置，比如登录账号（用于同步设置和使用更高级的 AI 功能，但基础功能不登录也能用）、选择主题颜色等。你可以根据自己的喜好进行设置，或者暂时跳过。

你会看到一个和 VS Code 非常相似的界面，这是因为 Cursor 就是基于 VS Code 构建的，但它内置了强大的 AI 聊天和代码编辑功能。

第四步：创建项目文件夹

现在，我们要为我们的第一个网站创建一个专门的文件夹。

在你的电脑上找一个合适的位置，比如桌面或者“文档”文件夹。
右键点击空白处，选择“新建” -> “文件夹”。
给这个文件夹命名，比如 MyFirstWebsite。

第五步：在 Cursor 中打开项目文件夹

回到 Cursor 编辑器。
点击左上角的“文件”（File）菜单。
选择“打开文件夹…”（Open Folder…）。
在弹出的窗口中，找到并选中你刚刚创建的 MyFirstWebsite 文件夹，然后点击“选择文件夹”。
现在，Cursor 的侧边栏（资源管理器）会显示你的项目文件夹。

第六步：创建 HTML 文件

网站的核心是 HTML 文件。我们来创建它。

在 Cursor 左侧的资源管理器中，鼠标悬停在 MyFirstWebsite 文件夹名称上，会看到几个小图标出现。
点击那个看起来像一张纸加个加号的“新建文件”（New File）图标。
输入文件名 index.html，然后按 Enter 键。
编辑器会自动打开这个空白的 index.html 文件。

第七步：编写 HTML 代码

现在，在 index.html 文件中输入（或复制粘贴）以下代码。这是构成一个最基本网页的骨架：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <link rel="stylesheet" href="style.css"> <!-- 稍后我们会创建这个 CSS 文件 -->
</head>
<body>

    <h1>Hello, World!</h1>
    <p>这是我用 Cursor 创建的第一个网站！</p>

</body>
</html>

代码解释：

<!DOCTYPE html>: 声明文档类型为 HTML5。
<html>: HTML 页面的根元素。
<head>: 包含页面的元信息，比如字符集、标题、引用的样式表等。
<meta charset="UTF-8">: 指定页面使用 UTF-8 字符编码，以正确显示中文等字符。
<title>: 显示在浏览器标签页上的标题。
<link rel="stylesheet" href="style.css">: 链接外部 CSS 文件（我们马上创建）。
<body>: 包含页面的所有可见内容。
<h1>: 一级标题。
<p>: 段落。

小提示：在 Cursor 中，你可以尝试使用 AI 功能。比如选中一段代码，按 Ctrl+K (或者点击聊天图标)，然后让 AI 解释这段代码，或者帮你修改它。

第八步：创建 CSS 文件（可选，但推荐）

为了让我们的网站好看一点，我们来添加一点样式。CSS (层叠样式表) 就是用来控制网页外观的。

像创建 index.html 一样，在 MyFirstWebsite 文件夹下新建一个文件。
命名为 style.css。

第九步：编写 CSS 代码

在 style.css 文件中输入以下代码：

body {
    font-family: sans-serif; /* 使用无衬线字体 */
    background-color: #f0f0f0; /* 设置浅灰色背景 */
    color: #333; /* 设置深灰色文字 */
    text-align: center; /* 文字居中显示 */
    padding-top: 50px; /* 顶部留出一些空间 */
}

h1 {
    color: #007bff; /* 设置标题为蓝色 */
}

这段 CSS 代码会让页面背景变灰，文字居中，标题变成蓝色。

第十步：在浏览器中查看你的网站

激动人心的时刻到了！

在 Cursor 的资源管理器中，找到你的 index.html 文件。
右键点击 index.html 文件。
在弹出的菜单中，选择“在文件资源管理器中显示”（Reveal in File Explorer）或类似选项。
这会打开 Windows 文件资源管理器，并定位到你的 index.html 文件。
双击 index.html 文件。
你的默认浏览器会自动打开，并显示你的 “Hello World” 网站！你应该能看到居中的蓝色标题和段落文字。

结语

恭喜你！你已经成功在 Windows 11 上安装了 Cursor，并创建了你的第一个简单网站。这只是一个开始，Cursor 的强大之处在于它的 AI 能力，你可以继续探索如何使用 AI 聊天来提问、生成代码、调试 Bug 等等。祝你编程愉快！

Post Views: 6