【GLM-5 陪练式前端新手入门】第一篇：从 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

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

优质文章学习记录