跳到主要内容

第一节 通过AI辅助创建首页

在前面的第二、第三章节中，我们已经学习过 HTML 的基础骨架，并且通过实战熟练掌握了在 VS Code 里如何“发号施令”让 AI 助手帮我们编写代码的各种工具快捷操作。

面对眼前这样一个体量更为完整的网页项目，如果你已经厌倦了去死记硬背每个细节，那么现在就是验收你“提示词工程”能力的时候了。本节我们将直接跳过前期那些关于 AI 插件的各类繁琐基础连接操作，重点考验如何将第三章中刚刚学到的 HTML 结构化专业知识，严谨地融入到向 AI 下达的提示词中，以此来指挥它快速生成一个包含“头部、导航、正文、页脚”四大标准区块的现代简易首页。

一、构思结构化的专业指令​

因为大家显然已经能熟练地唤出“通义灵码”或其他智能体了，所以我们要把精力集中在需求的精确投喂上。 要想让 AI 准确地搭建出一个结构清爽、而不是毫无底线“一锅粥”的网页，最核心的秘诀就是：命令它使用严密的标准语义化标签进行约束。

请在你的 AI 助手输入框内，发送以下经过高度结构化设计的专业级提示词：

作为一名前端全栈工程师，我需要你使用 HTML、CSS 开发一个完整的简易网站首页。
核心架构要求：务必使用标准 HTML5 骨架，同时在 body 中必须使用专业的语义化标签（header、nav、main、footer）来进行区块边界布局。

具体区块的内容划分如下：
1. 头部 (header)：制作简易首页的 Logo 区域，居中显示一行大字“简易首页”。
2. 导航 (nav)：横向排列的主菜单，依次包含“首页、学习资料、作业演示、关于、联系”。额外要求：“作业演示”这一项在鼠标悬停时，必须展示一个包含三项（演示1、演示2、演示3）的二级下拉菜单。
3. 中间正文 (main)：
   - 设置一个主标题（H1或H2）：“欢迎来到我们的网站。”
   - 补充一段简介导语：“这里是您的网站标语或者简介，突出展示关键信息。”
   - 插入以下几段优美文案作为正文排版（要求适当分段并调整至舒适的视距范围行距）：“代码是未来的画笔，前端是创意的舞台。每一行代码都是迈向成功的脚步，每一次挑战都是成长的机遇。不要害怕错误，它们是通向真理的垫脚石。坚持不懈，不断学习，追求卓越，用技术创造无限可能。相信自己的能力，释放内心的创造力，在前端的世界里，你就是那个能改变未来的人！”
4. 页脚 (footer)：在页面最下方居中排版文字：“@2026 web前端开发”，作为纯文本版权信息。

二、代码生成与检验​

由于你已经是轻车熟路的老兵了，直接发送上述指令后，接收 AI 程序员为你一口气生成的完整代码，并像之前一样应用保存至根目录下的 index.html 中。 然后切到浏览器并在本地环境（例如 http://web.cm）刷新预览你的精美呈现。

在这里要重申一次重点纪律：如果有任何视觉细节或排版未达到预期要求，切忌在它刚刚生成出的大段错乱代码上直接盲修瞎改。正确的策略应当是果断清空 index.html 文件，回去重新微调你的提示词（比如给提示词补充：要求导航菜单加入浅灰色背景色、要求正文字体放大处理等），重新让 AI 生成修改版，直到视觉完全满意满意为止。

【进阶思考：大杂烩与工程化】
你可能会发现，用这一套操作生成的网页，视觉上的确非常惊艳。然而，在 AI 为了图省事的操作下，它往往习惯把极其冗长的 HTML 骨架、几百行的 CSS 核心样式甚至 JS 交互特效，全部填塞融化在这唯一一个 index.html 文件内部！

尽管这种简单粗暴的写法完全跑得通，但这种把所有资源黏连在一块儿的“单文件大杂烩”面条代码，如果在未来的企业级开发或者是团队流水线接力协作中，可谓是“重灾区灾难级别的反人类架构”。 那么，如何在我们的这个微型项目日益臃肿之前，就确立规范、合理地拆分收拢并整理归纳这些代码文件呢？下一节，我们将为你敲开“工程化文件结构”的真相。