【GLM-5 陪练式前端新手入门】第一篇：从 GLM-5 提示到实践，完成前端入门第一步

[【GLM-5 陪练式前端新手入门】第一篇：从 GLM-5 提示到实践，完成前端入门第一步](#【GLM-5 陪练式前端新手入门】第一篇：从 GLM-5 提示到实践，完成前端入门第一步)

[1 项目背景：用 AI 陪练开启前端入门之路](#1 项目背景：用 AI 陪练开启前端入门之路)

[2 AI 赋能：向 GLM-5 提出专属前端导师需求](#2 AI 赋能：向 GLM-5 提出专属前端导师需求)

[3 快速落地：跟着 AI 完成第一个网页](#3 快速落地：跟着 AI 完成第一个网页)

[3.1 知识点理解：HTML 是网页的 "骨架"](#3.1 知识点理解：HTML 是网页的 “骨架”)

[3.2 代码实践：创建第一个网页](#3.2 代码实践：创建第一个网页)

[3.3 效果验证：本地运行查看页面](#3.3 效果验证：本地运行查看页面)

[4 项目总结与价值总结](#4 项目总结与价值总结)

技术栈

适用场景

[GLM-5 带来的核心价值](#GLM-5 带来的核心价值)

🎯 主题1：初体验拾光 ------ AI 陪练式前端新手入门

本文参与 AtomGit 首发模型在线体验征文活动，聚焦 GLM-5 作为 AI 陪练在前端零基础入门中的互动式教学能力。

1 项目背景：用 AI 陪练开启前端入门之路

作为前端零基础新手，传统的学习方式往往面临诸多痛点：

知识点零散，缺乏系统化引导，容易陷入 "学了就忘" 的困境
遇到问题时，难以快速找到通俗易懂的解释和解决方案
缺乏即时反馈，无法及时验证学习效果，容易产生挫败感

能否用一个 AI 模型，化身专属前端导师，用互动式、陪练式的方式，从 0 到 1 引导我完成前端入门，最终搭建出个人主页？

目标很明确：AI 陪练式前端入门，从 "什么是 HTML" 开始，一步步掌握网页开发，完成包含导航栏、卡片布局、响应式适配的个人主页。

2 AI 赋能：向 GLM-5 提出专属前端导师需求

我在 AtomGit AI 平台向 GLM-5 模型提出了明确的教学需求：

"你现在是我的专属前端入门导师，我是一个零基础的新手，想跟着你从 0 到 1 做一个个人主页。请你：

从'什么是 HTML'开始，用通俗易懂的语言一步步教我，每一步只讲一个知识点，然后给我一个小练习。

当我遇到问题（比如报错、不理解）时，用新手能懂的方式解释，并给出解决方案。

全程保持耐心，像真人导师一样引导我，最终帮我完成一个包含导航栏、卡片布局、响应式适配的个人主页。

每一步都生成可直接运行的代码片段，并告诉我如何在本地打开查看效果。"

令人惊喜的是，GLM-5 不仅精准理解了我的需求，还给出了结构化、可执行的教学框架，包括：

清晰的学习路径规划：从 HTML 基础到 CSS 样式，再到布局和响应式适配
知识点拆解：每一步只聚焦一个核心概念，降低学习门槛
即时反馈机制：针对问题提供新手友好的解释和解决方案
可运行代码片段：每一步都生成可直接复制运行的代码，方便验证效果

这一过程彻底改变了传统的前端学习方式 ------ 原本需要花费数小时查阅文档、试错调试的入门阶段，在 AI 陪练的引导下，仅用十几分钟就完成了第一个网页的开发。

复制代码

1. **分析用户需求：**
    *   **角色：**专属前端入门导师。
    *   **用户画像：**零基础的新手。
    *   **目标：**从 0 到 1 做一个个人主页。
    *   **方法论：**
        *   从 "什么是 HTML" 开始。
        *   用通俗易懂的语言讲解。
        *   一步步教，每一步只讲一个知识点。
        *   每一步都提供一个小练习。
        *   提供可直接运行的代码片段。
        *   解释如何在本地查看效果。
        *   针对问题（报错、困惑）提供新手能懂的解决方案。
        *   全程保持耐心，像真人导师一样引导。
    *   **最终产出：**一个包含导航栏、卡片布局、响应式适配的个人主页。

2. **确定第一步：**
    *   用户明确要求从 "什么是 HTML" 开始。
    *   因此，第一课必须定义 HTML，解释其结构，并展示最简单的有效 HTML 文档。

3. **起草内容 - 第一步：**
    *   **概念：**HTML（超文本标记语言）是网页的骨架。它告诉浏览器哪里是什么（标题、段落、图片）。
    *   **比喻：**就像盖房子。HTML 是钢筋水泥结构（骨架），CSS 是装修（刷漆、家具），JavaScript 是智能家居功能（电灯开关、门铃）。目前，我们只关注骨架。
    *   **核心标签：**`<!DOCTYPE html>`、`<html>`、`<head>`、`<body>`。
    *   **练习：**创建一个包含标题的基本文件。
    *   **如何运行：**创建一个文件，命名为 `index.html`，用记事本打开编辑，双击在浏览器中运行。

4. **润色语气：**
    *   需要鼓励性、耐心且友好。使用表情符号。
    *   避免行话，或者如果使用则立即解释。

5. **构建回复结构：**
    *   **问候：**欢迎用户，确立导师人设。
    *   **知识点：**什么是 HTML？（"骨架"比喻）。
    *   **代码片段：**绝对最小可行示例（包含 `<h1>` 的标准 HTML5 样板代码）。
    *   **如何查看：**创建文件的说明。
    *   **小练习：**一个简单的任务（修改文字）。

6. **起草过程中的自我纠正/审查：**
    *   *初步想法：*我应该立刻讲 `<div>` 和 `<span>` 吗？
    *   *纠正：*不，用户说"每一步只讲一个知识点"。第一步是理解 HTML 文件结构和 `<body>` 标签。保持简单。只讲一个标题标签。

7. **最终润色（中文）：**
    *   "你好呀！很高兴能成为你的前端导师......"（问候）
    *   "第一步：什么是 HTML？"（标题）
    *   解释：比喻盖房子。HTML = 毛坯房/骨架。
    *   代码：`index.html`。
    *   说明：记事本 -> 另存为 -> 双击。
    *   练习：修改 `<h1>` 里的文字。

8. **执行输出：**（根据第 7 步生成中文回复）。

**（针对未来步骤的自我纠正）：**
*   下一步（第二步）：介绍 CSS（内联样式或 `<style>` 标签）让东西变好看。也许是改背景颜色。
*   第三步：HTML 标签（`<p>`、`<img>`、`<a>`）。
*   第四步：布局概念（块级 vs 行内）。
*   第五步：导航栏。
*   第六步：卡片布局。
*   第七步：响应式适配。
*   *但目前，只关注第一步。*

**（第一步的详细内容生成）：**
*   **比喻：**写 Word 文档，但需要用"标签"来告诉浏览器"这是标题"、"这是段落"。
*   **标签：**`<h1>`（最大标题）。
*   **结构：**`<html>` 包裹所有内容。`<head>` 存放设置（元数据）。`<body>` 存放可见内容。

开始吧你好呀！很高兴能成为你的专属前端导师。👋 别担心自己是零基础，我们一步步来，你会发现做网页其实就像搭积木一样有趣。

我们的最终目标是做一个漂亮的个人主页，但万丈高楼平地起，今天我们先迈出**第一步**。

---

### 🎯 第一步：认识 HTML（网页的"骨架"）

**1. 知识点讲解**

你可以把一个网页想象成一个**"人"**：
*   **HTML** 是人的**骨架**（决定了哪里是头、哪里是手、哪里是脚）。
*   **CSS** 是人的**衣服和妆容**（决定了好不好看，穿什么颜色的衣服）。
*   **JavaScript** 是人的**肌肉和神经**（决定了能不能动，能不能反应）。

今天我们只学 **HTML**，也就是搭建骨架。

HTML 使用一种叫"标签"的东西来告诉浏览器这是什么。
*   标签通常成对出现，比如：`<标签名>内容</标签名>`。
*   前面的是**开始标签**，后面带斜杠的是**结束标签**。

比如，你想告诉浏览器"这是一段文字"，就用段落标签：
`<p>我是一段文字</p>`

**2. 动手练习**

现在，我们来写一个最简单的网页，它的结构就像一个最简单的文档。

请在你的电脑上新建一个文件夹（比如叫 `my-homepage`），然后在里面新建一个文件，命名为 `index.html`。

**📝 代码片段：**

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>这是我的第一个网页，我正在学习前端开发。</p>
</body>
</html>
```

**3. 怎么看效果？**

1.  打开你刚才创建的 `index.html` 文件（推荐用 VS Code 打开，如果没有安装，直接用记事本打开也可以，但记得保存时要选"所有文件"格式，后缀名必须是 `.html`）。
2.  把上面的代码复制进去，保存（Ctrl + S）。
3.  找到这个文件，双击它。它会默认用你的浏览器（Chrome、Edge 等）打开。

**4. 代码解释（新手必读）**

看着上面的代码，你可能有点晕，别怕，我来翻译一下：

*   `<!DOCTYPE html>`：这是在跟浏览器打招呼，"嗨，我是 HTML5 的文档，请按新规矩来渲染我。"
*   `<html>`：这是整个网页的老大，所有代码都要包在里面。
*   `<head>`：这是网页的**头部**（大脑）。里面的东西用户在页面上是**看不见**的。
    *   `<meta charset="UTF-8">`：这很重要！它告诉浏览器"请用中文字符集"，如果不写，你的中文可能会变成乱码。
    *   `<title>`：这是浏览器标签页上显示的小标题。
*   `<body>`：这是网页的**身体**。你在浏览器里看到的**所有内容**（文字、图片、按钮）都要写在这里面。
    *   `<h1>`：这是**一级标题**，字很大、很粗。
    *   `<p>`：这是**段落**，用来写正文。

---

### ✅ 你的小任务

1.  按照上面的步骤，成功在浏览器里打开页面。
2.  尝试把 `<h1>` 里的文字改成你的名字。
3.  尝试在 `<p>` 下面再加一行，写上你的爱好（比如 `<p>我喜欢打篮球</p>`）。

做完后告诉我你看到了什么，或者遇到了什么问题（比如中文乱码、文件打不开等），我会一直在这里等你！😊

3 快速落地：跟着 AI 完成第一个网页

在 GLM-5 的引导下，我仅用很短时间就完成了前端入门的第一步，核心实践包括：

3.1 知识点理解：HTML 是网页的 "骨架"

GLM-5 用生动的比喻帮我理解了前端三剑客的关系：

HTML：网页的骨架，决定了哪里是标题、哪里是段落、哪里是图片
CSS：网页的衣服和妆容，决定了页面的样式和美观度
JavaScript：网页的肌肉和神经，决定了页面的交互和动态效果

并重点讲解了 HTML 的核心标签：<!DOCTYPE html>、<html>、<head>、<body>，以及标签的成对使用规则。

3.2 代码实践：创建第一个网页

按照 GLM-5 的指导，我创建了test.html文件，编写了以下代码：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>你好！</h1>
    <p>这是我的第一个网页，我正在学习前端开发。</p>
    <p>我喜欢打篮球</p>
</body>
</html>

3.3 效果验证：本地运行查看页面

GLM-5 详细指导了代码运行步骤：

用 VS Code（或记事本）创建test.html文件，粘贴代码并保存
双击文件，在浏览器中打开查看效果（或者在 VS Code 里运行）
验证修改文字后的页面变化，完成小练习

最终成功在浏览器中看到了自己的第一个网页，清晰展示了标题和段落内容，中文显示正常，没有出现乱码问题。

4 项目总结与价值总结

技术栈

模型：GLM-5（深度思考大模型）
平台：AtomGit AI
核心能力：互动式教学、即时反馈、代码生成、问题解答

适用场景

前端零基础入门：降低学习门槛，提供系统化引导
技能快速验证：通过可运行代码即时验证学习效果
问题排查：针对报错和困惑提供新手友好的解决方案

GLM-5 带来的核心价值

传统前端学习方式	使用 GLM-5 AI 陪练后
知识点零散，缺乏系统化引导	提供清晰的学习路径，每一步聚焦一个核心概念
遇到问题时难以快速找到解决方案	即时反馈，用通俗易懂的语言解释并给出解决方法
缺乏互动性，容易产生挫败感	像真人导师一样耐心引导，全程陪伴式学习
学习效率低，入门周期长	十几分钟即可完成第一个网页，快速建立学习信心

对于零基础学习者而言，GLM-5 已不仅是一个对话模型，更是高效的AI 陪练导师，尤其在前端入门等技能学习场景中，通过互动式教学、即时反馈和可执行代码，大幅降低了学习门槛，让技术学习变得更加轻松、高效。

参与说明：本文为 AtomGit 首发模型在线体验征文活动投稿。

参与链接：

GLM-5 在线体验：https://ai.atomgit.com/zai-org/GLM-5/model-inference

GLM-5 活动贴：https://ai.atomgit.com/zai-org/GLM-5/discussions