随着chatGPT、deepseek等大模型的问世，AI改变生活不再是一个幻想。大量AI工具的出现，给人们的生活带来了巨大的改变。好像每隔几天就会涌现一批更加强大的AI模型，比如Gemini、qwen、GPT5.0等。现在要想不被社会淘汰，掌握并且能够熟练应用这些AI工具是必不可少的了

一. 什么是网页

以前人们离编程好像都很陌生，想要做一个网页好像也需要专业知识。AI的出现，大大降低了这些门槛。现在更难得的是想法，只要你脑袋里面有idea，十分钟就能创建出一个自己想要的网页。

其实我们在浏览器中打开的每一个“页面”，本质上都是一个网页。专业点来说， 网页（Web Page）是基于互联网的数字化文档，通过浏览器（如 Chrome、Edge等）加载和展示，是构成网站的基本单元。 网站就是由多个网页构成的一个复杂的应用，将其部署到手机上就是一个APP。

二，网页的构成部分

网页主要是由三个核心部分构成，它们协同工作形成完整的网页：

🌐 HTML(HyperText Markup Language) ：超文本语言，是网页的结构骨架，定义了网页的内容和语义（如标题、段落、图片、链接、表单等），不涉及样式和交互，是网页的基础。一个以html为后缀的文件其实就是一个简单的网页了，浏览器就能够接收、识别并且渲染到浏览器的页面上。仅负责 “内容是什么”。

🌐 CSS(Cascading Style Sheets) ：层叠样式表，是网页的视觉样式，控制内容的布局、颜色、字体、间距等外观表现。

🌐 JS(JavaScript) ：是网页的交互逻辑，实现动态效果（如弹窗、轮播图、表单验证）、数据处理（如异步请求后端数据）、用户操作响应（如点击按钮触发事件）。

三. 实操：利用AI生成一个网页

现在主流的AI工具有好多，比如某包、DeepSeek以及腾讯元宝等。广泛应用于编程方面的有通义灵码、CodeBuddy等。今天我们用某包来举例如何快速的生成一个网页，我们首先打开某包，然后在对话框找到编程，输入你想要的网页效果，以我的这个举例：

请帮我生成一个个人简介的网站，里面包含多个部分，其中包含个人信息、校园经历、工作经历、兴趣爱好等多个部分，并且支持图片展示。（提示词）

AI就会帮你生成对应的文件，其中包含我们上面介绍的.html、.css以及.js文件。HTML文件里面就包含了这个网页的大体内容，比如说分为了基本信息、校园经历、工作经历等；CSS文件就规范了这个部分的布局大小等；JS文件则控制着按钮的交互，比如说点击跳转等。

当我们双击HTML文件，就能看到AI帮我们生成的网页啦，有哪些地方不满意也可以让AI修改，接下来就是成果展示!

网页首页

个人信息部分

校园经历部分

四.部署网页，生成二级域名

在完成第三步以后，其实我们就完成了一个简单的网页，但是这个网页现在只能我们自己本地来访问，想要别人在他的电脑上也能看到这个网页，那就需要生成一个可以访问的二级域名啦。正常来说二级域名的申请需要审核备案，并且需要支付一定的费用。这里我们介绍一种用GitHub的Pages部署的方法，不仅简单，而且还免费！第一步：需要申请一个github账号，并新建一个仓库。

第一步：需要申请一个github账号，并新建一个仓库。

第二步：将我们的网页代码上传到新建的仓库中。

第三步：在仓库的Settings中找到Pages功能，并生成专属的二级域名。

五. 总结：如何高效与AI协作开发网页

📌要明确自己的需求大方向，然后逐步完善。不必追求一次就尽善尽美，可以先用一些官方的形容词让 AI自由发挥，然后针对自己不满意的地方再修改。

🧩项目比较复杂时，尽量将文件分开编写，避免过于冗余。可以要求 AI将HTML、CSS、JS 分开写，便于定位问题注意。

🔄在让AI输出时，可以让其添加详细的注释。在代码中添加注释，标注每个部分功能，我们就能迅速定位到每块功能的代码，并要求 AI精细调整了。