https://mp.weixin.qq.com/s/GvlHWJo60taWPmgceyEaQQ
正文从这里开始！
🔹 HTML = 网页的骨架 🏗️，就像房子的结构！
🔹 标签（Tag） = 建房的砖块 🧱，比如
是大标题，
是段落。
🔹 属性（Attribute） = 额外信息 📌，比如 
里的 src 就是图片地址。
🔹 HTML 只是基础，就像一座房子的结构，决定了房间的布局，要让房子变得漂亮，得加上 CSS（装修），想让装修好的房子里的水电能用起来，还得加上 JavaScript！
房子“动“起来。
⚠️ 此时此刻，你可以自己在 AI 对话框里，提一个最简单的需求：「帮我写一个完整的 HTML 网页，主题是关于什么是 HTML」然后复制代码保存到你的文本里，改成 111.html，打开预览一下。
我的效果如下（二维码识别即可预览）
AI 编程 – 纯 HTML
我推荐大家直接就从 AI 编辑器开始，选择用代码能力最好的claude （3.7优先，要是排队需要等太久，就换 3.5），比如用免费的 trae（trae.ai），方便你后面更好的驾驭复杂的项目。
（当然也不是绝对的，你也可以坚持就在大模型窗口里让它完成，但要加一句让它给你一个包含全部 css,js的完整的 HTML 页面，要不然复制也麻烦，让你用 trae 这种工具，是为了方便你后面进阶可以做更复杂的。）
后面的演示我都用trae来操作～
感兴趣的可以看下之前我发过的一些纯 HTML 的代码页面：
体验用 AI Claude 3.5 五分钟写了一个 H5 页面
我先带大家先从纯 HTML 开始探索～不要小瞧它，它也能干很多事情的～
1，一个文字卡片生成器页面
我的提示词过程，错别字我都复制进来了：
帮我设计一个做文字卡片的 HTML5 页面，大概是左侧输入文字，右侧在对应的模板上显示出来，请你结合你对考类产品的理解，帮我多设计几款卡片模板，可以自由选择的效果预览没有效果我想在右侧增加一个卡片下载功能，可以把图片下载下来图片下载的按钮位置可以更合理一些增加图片尺寸选择，比如 9:16，2：3 ，1：1，4：3 等，右侧区域根据注册的选择，呈现不同的尺寸北京代码构成（你也可以要求 AI合并在一个HTML文件里）：
最终效果如下：
线上效果(二维码识别)：
https://zlbigger.com/ai/kapian/
2，时间
提示词过程：
帮我写一个可以在一个页面上显示全球 100 个不同国家地区城市所在首都的当前时间，以北京时间为对比时间，会显示其他城市跟北京时间的时差，要显示城市名，所在时区等信息，可以用横版的形式展示，你根据最佳的设计风格来设计，要求用纯 html代码来实现网页顶部显示一个类似图片上的这种设计，时间显示
可以给每个城市时间旁边增加一个白天或者晚上的小图标，代表他们所处的状态最终效果：
https://zlbigger.com/ai/time/
3，做好看的单页，如个人简历，宣传页等。
以我想卖的这个域名为例做个单页。
需求：
我有一个域名：linggan.ai，对应中文"灵感"，寓意创意与启发，完美契合AI创新的本质。我想卖给有缘人，你帮我设计一个好看的HTML 单页，介绍它的好，并让感兴趣的人可以联系我，比如加我的微信zlbigger。我对设计的要求就是，突出重点信息，优化视觉层次，配色专业、和谐，多参考一些设计好的产品风格。可以引入一些好看的图标来加强。输出结果：
体验地址：
https://linggan.ai/
AI编程 – HTML + cURL 快速调用 API
这个部分，就可以进阶一部分了，风险就在于别人可能通过查看你页面的源代码获取到你的 key。
各个大模型平台都有 API 可申请，我就以群里那位同学提到的用 kimi 实现儿童菜谱来举例，直接就用 kimi 的 API。
密钥是一段 sk-开头的代码：
sk-doj3GklTg66UMy9gF770wthsnT12QCLx****************
API 申请地址：
https://platform.moonshot.cn/console/api-keys
把你的需求和对应的 API 文档里的示例（包括你的key）一起告诉 AI：
我想实现一个儿童菜谱功能，用户输入菜谱名字，就从儿童营养专家的角度去分析菜谱是否适合儿童，并给出这个菜谱的制作方法。请用 HTML 的方式实现，设计要求简约清新，我用的 API 是https://api.moonshot.cn ，我的key是sk-doj3GklTg66UMy9gF770wthsnT12QCLx，示例：curl https://api.moonshot.cn/v1/chat/completions-H "Content-Type: application/json"-H "Authorization: Bearer $MOONSHOT_API_KEY"-d '{"model": "moonshot-v1-8k","messages": [{"role": "system", "content": "你是 Kimi，由 Moonshot AI 提供的人工智能助手，你更擅长中文和英文的对话。你会为用户提供安全，有帮助，准确的回答。同时，你会拒绝一切涉及恐怖主义，种族歧视，黄色暴力等问题的回答。Moonshot AI 为专有名词，不可翻译成其他语言。"},{"role": "user", "content": "你是一名优秀的儿童营养专家，根据我输入的菜单名字，你来帮我做食谱解析，并给出建议"}],"temperature": 0.3}'
基本上什么都不用改就可以实现一个简单的菜谱查询了：
你要是觉得页面太简单了，或者格式不好看，可以继续提需求～
面太朴素了，我需要更好的设计，同时现在的输出的内容是 markdown 格式的，我需要你帮我转成适合这个页面风格的html 代码，并尽可能引入一些图案来让它更有吸引力
同样的，换成别的大模型 API 也是一样的，比如 DeepSeek，
好了，这个暴露我的 key，我就不放在线地址了……
如果你对这个感兴趣，建议按照我的方式自己操作一下，主要是开动你的想象力，看在这个框框里，你能想出什么好玩的需求去实现它！
最后就是等我的视频教程！麻烦关注我的视频号……
