# 教学目的
知识、能力、素养
- 结合第三章的 HTML 骨架知识，掌握AI辅助的实战应用，实现页面的高效构建。
- 理解前端开发中的标准化文件组织方式。
- 学会合理规划项目文件夹和严谨的文件命名规则。

#第一节 通过AI辅助创建首页
在前面的章节中，我们学习了 HTML 的基础标签和标准骨架的概念。面对一个完整的网页，如果纯手工敲击所有的代码，不仅耗时而且容易出错。
本节我们将“站在巨人的肩膀上”——我们将运用第三章学到的专业知识作为“提示词”，指挥AI辅助直接根据标准的 HTML5 骨架格式，为我们快速生成一个包含顶部、导航、中间内容和底部的标准简易首页。
# 一、具体需求分析

在给 AI 下达指令前，我们必须清晰地拆解页面的四大模块需求：
## （一）**头部 (Header)**

显示"简易首页"这几个文字。
## （二）**导航 (Navigation)**

基础导航菜单包括：首页、学习资料、作业演示、关于、联系。
交互需求：“作业演示”需设置二级下拉菜单，包含：演示1、演示2、演示3。
## （三）**中间内容 (Main Content)**

标题：欢迎来到我们的网站。
简介：这里是您的网站标语或者简介，突出展示关键信息。
内容示例：
```
代码是未来的画笔，前端是创意的舞台。
每一行代码都是迈向成功的脚步，每一次挑战都是成长的机遇。
不要害怕错误，它们是通向真理的垫脚石。
坚持不懈，不断学习，追求卓越，用技术创造无限可能。
相信自己的能力，释放内心的创造力，在前端的世界里，你就是那个能改变未来的人！
```
## （四）**底部 (Footer)**

版权信息：@2026 web前端开发
# 二、必备工具

（1）**VS Code 编辑器**：作为核心的代码编写与管理平台。
（2）**AI负责插件**：启用“AI 程序员”模式，用于自动生成和优化代码。
（3）**本地静态站点环境（如 EServer）**：用于实时预览生成的网页效果。
# 三、制作步骤

## （一）打开VS Code

启动 Visual Studio Code 编辑器。
## （一）导入项目文件夹

将你在本地静态站点环境中创建的、干净的网站根目录文件夹，直接拖拽到 VS Code 的工作区内打开。
## （三）启动AI辅助

在 VS Code 左侧活动栏点击AI辅助。在弹出的面板中选择“智能体”（注意区分普通的对话问答模式）。
## （四）**输入生成指令（融入专业知识）**

在下方的输入框内，我们将需求转化为 AI 能理解的指令。注意，在这里我们要明确要求 AI 采用我们在第三章学过的标准结构：
```
请使用 HTML、CSS 和 JavaScript 开发一个完整的页面。
基础要求：请使用标准的 HTML5 骨架，并在 body 中使用语义化标签进行布局。
具体模块要求如下：
头部 (header)：制作简易首页的 Logo 区域，显示“简易首页”。
导航 (nav)：横向排列，包含“首页、学习资料、作业演示、关于、联系”。其中“作业演示”鼠标悬停时需要有二级下拉菜单（包含演示1、演示2、演示3）。
中间内容 (main)：包含主标题“欢迎来到我们的网站。”和一段简介“这里是您的网站标语或者简介，突出展示关键信息。”。下方需要排版以下几句话：“代码是未来的画笔，前端是创意的舞台。每一行代码都是迈向成功的脚步，每一次挑战都是成长的机遇。不要害怕错误，它们是通向真理的垫脚石。坚持不懈，不断学习，追求卓越，用技术创造无限可能。相信自己的能力，释放内心的创造力，在前端的世界里，你就是那个能改变未来的人！”
底部 (footer)：居中显示版权信息“@2026 web前端开发”。
```
## （五）等待输出结果

点击发送按钮，静静等待 AI 程序员为你分析需求并自动生成带有完整骨架的代码。输出结束后，如果代码没有明显报错，点击界面上的“接受 (Accept)”按钮，将代码一键应用并保存为 **`index.html`** 文件。
## （六）预览生成结果

打开浏览器，输入你的本地域名（如 **`http://web.cm`**），查看生成的网页实际渲染效果。
### （七）优化与调整

如果不满意生成结果，切忌在错乱的代码上反复修改。请果断清空文件，重新回到第（四）步，调整你的提示词描述（例如增加具体的布局或颜色要求），让 AI 重新生成，直到视觉和结构满意为止。
>**【课后思考】**
你可能会发现，AI 程序员虽然帮我们生成了标准的骨架，但有时候它为了图省事，会把 HTML 结构、CSS 样式甚至 JS 交互逻辑全部塞进了一个文件里。虽然页面看起来很美观，但这种“大杂烩”代码在真实的企业开发中是不符合规范的。那么，我们该如何整理这些文件呢？下一节，我们将揭晓答案。

在前面的章节中，我们学习了 HTML 的基础标签和标准骨架的概念。面对一个完整的网页，如果纯手工敲击所有的代码，不仅耗时而且容易出错。本节我们将“站在巨人的肩膀上”——我们将运用第三章学到的专业知识作为“提示词”，指挥AI辅助直接根据标准的 HTML5 骨架格式，为我们快速生成一个包含顶部、导航、中间内容和底部的标准简易首页。

第五章 文件结构

前端

开发工具

学习HTML5骨架与AI辅助开发实战，掌握标准页面构建技巧。通过AI工具快速生成包含header、nav、main、footer的标准首页，实现高效开发。了解语义化标签应用、文件组织规范及项目结构规划，提升前端开发效率与质量。

Visual Studio

智能体

HTML5

2026新春采购季

domain

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

第五章 文件结构-腾讯云开发者社区-腾讯云

第五章文件结构

第五章文件结构

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

第五章 文件结构

第五章 文件结构

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

第五章文件结构

第五章文件结构