想象力，就是最重要的编程能力。

随着DeepSeek等大语言模型在在代码生成、逻辑推理与自动调试上的突破，编程正在经历前所未有的范式转变。通过自然语言描述需求，由模型解析为抽象逻辑并生成代码，从而极大地降低了学习门槛。编程不再遥不可及，而成为每个人都能快速掌握的工具。

本章将以网页开发、编程助手与集成环境为主线，带领读者逐步掌握如何借助DeepSeek 实现代码的自动生成与优化、文档的智能解析与生成，以及在常用开发环境中的集成应用。

---

9.1.1 零基础网页开发

DeepSeek可以基于自然语言描述生成HTML、CSS和JavaScript代码，适用于快速原型开发或完整网页构建，也可以帮助零基础读者快速入门体验零代码编程。

网页框架基础

传统的Web网页开发是一个系统化的过程，涉及多个阶段和技术栈。Web网页开发的基本流程通常包括：需求分析、UI设计、前端开发、后端开发、测试、部署及维护。

以前端开发为例，网页开发采用结构层、表现层和行为层的三层架构协同工作，通过外部文件链接或嵌入式写法在浏览器中共同构建出完整的现代网页。

- 结构层：HTML（超文本标记语言）如同建筑的钢筋骨架，使用各类标签（如标题、段落）搭建基础内容结构；

- 表现层：CSS（层叠样式表）如同室内设计师，使用各种选择器和属性（如颜色、边距）控制元素布局和视觉效果；

- 行为层：JavaScript（JS）则像智能控制系统，使用事件（如点击、滑动）与函数实现表单验证、数据交互等动态行为。

通俗地说，HTML确定有什么（Content），CSS确定长什么样（Style），JS确定怎么做（Action）。

早期网页将所有内容以嵌套表格（table布局）堆砌在一个HTML文件中，修改成本高且代码冗余。现代架构则演进为模块化组件拼装（如React/Vue框架），将页面拆解成独立功能单元，通过前后端分离（前端专注交互渲染+后端负责数据处理）和响应式设计（媒体查询@media实现多端适配），配合框架路由机制实现无刷新页跳转，最终形成可复用、易维护的动态应用系统，如同自动流水线般高效组装数字化界面。

例如，在一个典型的的网页结构中，导航栏承担站点路标功能，轮播图扮演动态展示窗，商品列表作为数据可视化展台。三者通过参数化配置实现“搭积木式”开发，如同工业流水线精准装配数字内容组件。

“语言即代码”的开发范式

Deepseek重塑了网页开发范式，核心在于设计意图的精确表达，而不是传统的手工编码。这种“语言即代码”的开发机制，使我们无需掌握HTML/CSS/JS等技术语法，即可通过需求结构化描述直接驱动可视化界面的网页生成。

我们只要想清楚网页设计方案、说清楚设计要求，Deepseek就能以「语义理解→需求拆解→界面构建」为核心架构完成网页代码生成。Deepseek首先通过对话理解用户想要的网页效果，接着拆分为所需的模块和细节，然后编写代码搭建组件，最后还会检查网页是否符合要求，就像同时集结了产品经理、设计师和工程师的工作智慧，把你脑海中的画面一站式变成真实可用的网页。

第一个HTML网页

即便是零基础的读者，只要在Deepseek网页版以对话聊天方式输入：【我是对于网页开发零基础的学生，请帮我写一个HTML网页的示例代码，并解释每个部分的作用。】

图9-1：Deepseek制作的第一个静态网页

Deepseek就会自动生成HTML网页代码，如图9-1所示。在代码区的标题栏（图9-1①）显示“html”表示该代码为html格式。标题栏右侧有三个按钮（图9-1②）：“复制”用于复制代码到粘贴板，“下载”用于将代码下载保存到本地，点击“运行”在右侧（图9-1③）运行HTML代码，可以直接预览代码的实际运行效果。也可以将代码复制粘贴到文本编辑器中（如记事本、VS Code等），保存为index1.html，用浏览器打开该文件即可查看网页效果。

根据提出的要求，Deepseek还会逐项解释每个元素的作用，如文档类型声明、HTML根元素、头部部分（head）、主体部分（body）、其他HTML元素及CSS样式等。这个示例包含了HTML网页的基本结构，在此基础上可以添加更多内容和功能来构建自己的网页。

Deepseek网页生成的三要素

上例说明Deepseek能够生成并运行HTML代码，但是如何才能生成我们希望的内容和形式的网页代码呢？答案很简单——只要我们想清楚、说清楚我们需要什么内容和样式，清晰明确地说出来就可以了。

具体而言，Deepseek网页代码生成的三要素是功能需求、展示效果和交互说明。

- 功能需求：网页需要实现的核心用途，例如展示信息/收集数据/在线交易。

- 展示效果：内容的排版方式、配色方案、视觉重点，例如标题字体大小/按钮位置/配图风格）。

- 交互说明：用户如何操作以及系统如何反馈，例如点击按钮弹出窗口/滑动屏幕切换内容/表单提交后提示成功。

在请求生成代码时，我们要用自然语言清晰明确地描述这三类信息。系统会根据这三类信息确定代码逻辑，优先保证功能运转，再调整视觉层布局，最后添加点击/滑动等操作反馈，从底层到表层逐层构建网页。

我们来制作一个简单的个人简历页面，网页要求描述如下。

请生成个人简历网页，要求用HTML格式输出。

1. 功能需求：展示个人基础信息（姓名、联系方式），呈现教育背景（学校+专业），列举3门重点课程及成绩，展示2个实践项目。

2. 展示效果：

2.1 布局样式：左栏浅灰色背景占30%宽度，右栏白色背景占70%宽度；

2.2 视觉要素：圆形院校LOGO，标题带蓝色装饰竖线，项目卡片带浅灰色边框。

3. 交互说明：卡片悬停微阴影。

Deepseek根据我们的要求生成了HTML网页代码。点击代码区标题行中的“运行”按钮，可以在右侧窗口预览代码的运行效果，如图9-2所示。将鼠标移动到项目卡片，会显示微阴影效果，但点击卡片并不触发动作。

图9-2：Deepseek制作的图书宣传网页

图9-3：通过与Deepseek对话优化网页

迭代优化

如果网页效果与预期不一致，可以通过与Deepseek对话不断修改、持续迭代。

例如，我们提出网页控制与优化的内容如下。

请按如下要求修改该网页：

2. 展示效果：

2.1 布局样式：响应式双栏布局；课程及成绩在右栏中展示；项目经验只展示标题；技能专长不超过 3项。

2.2 视觉要素：以圆形校徽LOGO（直径150px）包含「JUST」字样，代替证件照

3. 交互说明：

3.1 每个项目使用卡片式容器，点击卡片跳转到项目详情页面。该页面设有返回按键，点击后返回主页面。

3.2 增加“保存”按键，可以将简历保存为文件。

Deepseek根据我们的要求重新生成HTML网页代码。点击“运行”按钮，在右侧窗口预览代码的运行效果，如图9-3所示。点击预览网页中的“保存简历”按键，可以将网页另存为文件。点击项目经验中的项目卡片，切换至相应的项目详情页面；在项目详情页面点击“返回简历”按键，返回简历页面。

这说明只要我们想清楚网页设计方案，说清楚设计要求，就能让Deepseek生成所需要的代码，从而实现“所思及所达”。对于初学者建议采用渐进式增强的方式，先确保基础HTML结构正确，再逐步添加样式和交互。

9.1.2 搭建智能问答窗口

如果网页需要实时数据，可以通过前端调用 DeepSeek API来实现。

例如通过调用DeepSeek API接口实现智能交互，可以快速搭建一个网页版的智能问答窗口。其核心流程包括四个关键环节：

1. 构建交互界面：使用HTML/CSS创建输入框和展示区。

2. 请求处理：用Fetch API发送POST请求，注意密钥需通过后端代理保证安全性。

3. 响应处理：接收JSON格式的智能回复并解析展示。

4. 错误处理：针对网络异常或API限制进行提示。

这个过程的实现有些复杂，但我们仍然可以通过对话轻松地完成。

1. 获取API Key：从DeepSeek官方或第三方接入渠道申请，详见02.2节。

2. 在Deepseek网页版以对话聊天方式输入：【我要通过调用 DeepSeek API 搭建一个网页版的智能问答窗口，请给出完整的 HTML 代码。】

3. 如图9-3所示， Deepseek根据我们的要求生成了一个完整的HTML网页代码，网页包含输入框、发送按钮和对话历史显示区域。

点击代码区的“运行”按钮，可以在右侧窗口预览代码的运行效果。但是，在预览窗口输入问题后，出现报错并显示：“API请求失败: 401”。这是由于生成的HTML网页代码中没有设置API Key，因此调用Deepseek API失败。

在Deepseek回复中，已经给出了使用说明：（1）将代码保存为index.html文件；（2）替换代码中的your-deepseek-api-key为你的实际DeepSeek API密钥；（3）在浏览器中打开该HTML文件；（4）开始与AI对话。我们按照这个步骤操作即可。

4. 点击代码区标题栏的“下载”按钮，将代码保存为index.html文件。

5. 用文本编辑器打开index.html文件，找到关键字API_KEY ，将your-deepseek-api-key替换为从DeepSeek官方申请的DeepSeek API密钥。如果使用第三方接入渠道的API密钥，则还要相应地修改API_URL。

6. 双击index.html文件，在浏览器中打开这个网页版的智能问答窗口。

现在，在对话框输入问题，就能成功地调用DeepSeek API进行回答了，如图9-5所示。DeepSeek的回答内容中带有一些标记符号，用于支持Markdown格式渲染。我们也可以通过指定输出格式对网页进行优化。

图9-4：搭建网页版的智能问答窗口

图9-5：基于Deepseek API的智能问答窗口

---

往期回顾：

【人工智能通识专栏】第二十三讲：数据处理与分析

【人工智能通识专栏】第二十四讲：可视化图表

【人工智能通识专栏】第二十五讲：制作幻灯片