2.3.3 AIGC实战演练——AI辅助生成页面结构代码 - 副本.pptxVIP

AIGC实战演练-AI辅助生成页面结构代码

1欢迎来到前端开发课堂

2本节课将学习如何借助AI辅助生成页面结构代码。

3通过本节课的学习，能够理解如何借助AI工具高效构建网页结构，并掌握对AI生成内容进行审核与优化的方法。

4以“5G新时代科学知识”图文混排网页效果为案例。

5AI工具“通义灵码”辅助生成代码进行演示。通义灵码是由阿里云提供的智能编码辅助工具，提供代码智能生成、智能问答、多文件修改、编程智能体等能力。

6首先思考一个实际问题：要制作“5G新时代科学知识”页面，应该包含哪些内容呢？

通常来说，一个完整的页面结构包括：页头部分（用于展示标题、导航等核心信息）、主体内容部分（作为页面的核心，将承载相关的内容、图片信息等）、以及页脚部分（可包含版权信息、联系方式等辅助内容）。

7基于这个思路，我们来设计给AI的指令，一个精准的指令是生成优质代码的关键。例如，我们可以这样描述需求：基于目标图片效果，请生成一个包含header区域、article区域、footer区域的页面结构代码，且代码中不包含CSS样式。这样的表述能让AI更准确地捕捉我们的需求要点。

接下来，打开vscode，默认情况下vscode没有安装通义灵码插件，需要先安装插件。点击左侧扩展，搜索通义灵码进行安装。打开通义灵码的交互面板，将目标图片粘贴进去，并将设计好的指令输入后点击回车按钮。可以看到，AI会快速生成一段HTML代码，包含了我们要求的所有结构。

点击插入按钮后，生成的代码就会自动出现在屏幕右侧的编辑区域，方便我们进行后续操作。点击预览，此时发现页头和页脚部分缺少水平线，而且图片是以占位符的形式出现的。

因此，生成代码后不要急于使用。AI生成的代码并非完美无缺，它可能会出现标签冗余、样式不合理甚至逻辑错误的情况，我们需要对其进行仔细的审核和优化。

首先检查结构是否完整。页头、主体内容、页脚是否都包含在内，语义化标签的使用是否正确，比如header、article、footer这些标签是否用对了地方。

然后是内容填充。在合适位置添加hr标签，对于图片部分，可以使用课前准备的相关图片，替换img标签中的src属性，并查看alt属性设置是否符合要求，这样做不仅符合网页开发的标准，也能提升页面的无障碍访问性。

这一过程要求我们具备扎实的判断和修改能力，也正因如此，打好HTML、CSS的基础至关重要——AI只是提升效率的工具，绝不能替代我们独立思考的“大脑”。

完成之后预览，确保页面效果符合预期。

通过刚才的一系列操作，我们就完成了一个基本的页面结构搭建。

8本节课我们学习了如何利用AI辅助生成页面结构代码，包括指令的精准设计、以及对生成代码的审核与优化技巧。明白了AI是前端开发的“加速器”，但不是“替代品”，打好HTML基础，才能让AI工具真正为我们所用。”

9穷则变，变则通，通则久。AI技术的出现为前端开发带来了新的变革与便利，而守正创新正是应对技术迭代的核心之道——坚守基础技能的“正”，善用AI工具提升效率的“新”，才能在行业发展中持续精进。

10本节课就讲到这里，再见！