新手必读：用 AI 生成 HTML，再发布成网页链接
不会写代码，也可以做出自己的网页。这篇指南从一句想法开始，带你让 AI 写好 HTML，再用 html2.link 发布，最后拿到一个能发给朋友、同事或客户的网址。
先弄清楚：你、AI 和 html2.link 各做什么？
你负责说明想做什么、检查内容是否正确；AI 负责把需求写成网页；html2.link 负责把网页发布到网上，让别人通过链接打开。HTML 就是描述网页内容的文件，你不需要先学会它的语法。
准备一个能生成代码的 AI 对话工具和一个 html2.link 账号即可。建议先 登录 html2.link，方便后续管理和更新作品。下面以「周末读书会介绍页」为例，第一次可以先做一个只展示信息的简单页面。
第一步：说清楚你想做什么
不要只说「帮我做一个好看的网页」。把下面四件事告诉 AI，它才更容易做出符合你预期的结果：
- 用途和读者：这是一个读书会介绍页，发给准备参加活动的朋友。
- 具体内容：活动名称、时间、地点、流程、需要携带的物品。
- 视觉风格：简洁、浅色背景、文字清晰，手机上也方便阅读。
- 需要的操作：点击「查看活动安排」跳到流程部分。
有现成文案就直接提供；有图片可以先用 图片转链接 上传，再把图片链接交给 AI。第一次也可以先不用图片，确认页面内容和布局后再添加。
第二步：把这段提示词发给 AI
打开你平时使用的 AI 对话工具，新建对话。复制下面的提示词，把活动信息换成自己的内容后发送。「提示词」就是你交给 AI 的制作要求。
请帮我制作一个「周末读书会」介绍网页，我会把它发布到 html2.link。
页面给准备参加活动的朋友阅读，内容如下（这是一组示例信息，发布前我会替换）：
- 标题：周末读书会
- 简介：带一本你喜欢的书，一起交流阅读中的发现。
- 时间：本周六下午 14:00—16:00
- 地点：城市书房二楼
- 活动流程：14:00 自我介绍；14:20 好书分享；15:30 自由交流。
- 温馨提示：请带一本想分享的书和水杯。
- 按钮：「查看活动安排」，点击后滚动到活动流程。
设计要求：浅色背景、简洁清晰，有明显的标题和内容分区；适配手机和电脑，手机上不要横向滚动。
交付要求：
1. 输出一个完整、可直接在浏览器打开的单文件 HTML，从 <!DOCTYPE html> 到 </html>，不要省略代码。
2. CSS 和 JavaScript 都写在这个 HTML 文件内，不依赖本地图片、其他文件或需要安装的包。
3. 使用原生 HTML、CSS、JavaScript，不生成 React / Vue 工程，不需要构建或服务器。
4. 设置 UTF-8 编码和适配手机的 viewport。本次先不使用图片和外部字体。
5. 按钮实现上述真实交互，不要增加虚假的报名、支付或登录功能。
6. 只返回完整 HTML 代码，或提供可下载的 .html 文件。为什么要强调「单文件 HTML」？这样文字、样式和交互都放在一个文件里，方便直接上传。若 AI 给了多个文件或要求安装依赖，继续告诉它：「请改成可以直接用浏览器打开的单文件 HTML，并输出完整代码。」
等待 AI 完整输出。你需要的是 HTML 代码或可下载的 .html 文件，不是网页截图、设计说明，也不是 AI 对话本身的分享链接。
第三步：把 HTML 放进 html2.link
打开 创建新页面，根据 AI 给你的结果，选择一种方式：
- AI 给了一段代码：复制完整 HTML，粘贴到「HTML 代码」输入区。通常从
<!DOCTYPE html>开始，到</html>结束。不要把代码框外的解释文字或包裹代码的三个反引号一起复制进去。 - AI 给了文件：先下载
.html文件，再点击「上传 HTML」区域选择它，或直接把文件拖进去。单个 HTML 文件最大 5MB。
这两种方式选一种就够了。如果自己保存文件，请使用纯文本编辑器并命名为 index.html，确认没有变成 index.html.txt，也不要保存成 Word 文档。
第四步：预览效果，不满意就让 AI 改
导入后，在「实时预览」里检查效果，也可以打开全屏预览。先核对活动时间、地点和文案，再看手机尺寸下是否清晰、按钮是否有反应、图片是否能显示。
需要修改时，回到刚才的 AI 对话，描述具体问题。下面这段可以直接使用，也可以把修改点换成自己的：
请在刚才的 HTML 基础上修改：
1. 手机上的正文字号调大一些，段落之间增加间距。
2. 把活动时间改为本周日下午 14:00—16:00。
3. 检查「查看活动安排」按钮，确保点击后能滚动到活动流程。
保留其他内容和单文件结构。请输出修改后的完整 HTML，不要只给修改片段，不要省略未修改的部分。拿到新版本后，用它替换编辑器里的全部旧代码，再检查一遍，不要把两份 HTML 接在一起。如果换了新的 AI 对话，记得同时提供当前完整 HTML，方便它在原版基础上修改。
如果提示代码不完整，或 AI 输出中途停止，让它重新输出完整文件；如果提示缺少本地图片、CSS 或 JS，先补齐资源再发布。单文件页面里的本地路径不会自动变成网上可访问的资源。
第五步：设置发布信息，生成链接
- 在「发布配置」中填写容易辨认的「页面标题」，例如「周末读书会」。
- 选择「续期模式」：长期使用选自动续期，临时分享选固定天数，并选择有效期。
- 查看当前积分和页面显示的消耗提示，确认后点击发布，等待页面提示结果。
自动续期会在到期前扣积分延长有效期，需要保持积分充足；固定天数到期后页面下线。未登录发布的页面有效期为 1 天。具体选项和消耗以发布界面为准，可在 积分中心 查看余额。
发布成功后，你会得到类似 https://xxxx.html2.link 的网址。若提示审核未通过、需要复核或积分不足，请按页面提示处理；看到发布成功后再把链接发出去。
第六步：打开链接确认，再分享给别人
复制发布成功后的网址，在浏览器新标签页中打开，再用手机检查一次。确认正文、图片和按钮都正常后，就可以发给朋友、同事或客户了。分享的是这个网页网址，不是你电脑上的文件路径。
以后想改内容，进入 我的页面，找到作品并编辑。把现有 HTML 和修改要求交给 AI，拿到完整新版本后替换、预览并保存。更新原页面可以保留原来的分享链接，无需每次都新建作品；同时留意页面是否仍处于已发布状态及有效期内。
第一次制作时，常见的几个问题
AI 只给了一张图，或者一段 React / Vue 代码？
告诉它「请输出完整的单文件 HTML，不要截图、组件代码或工程目录」。如果确实需要多页面和多个资源文件，可以阅读 站点托管使用指南，按静态站点方式上传 ZIP。
页面空白、图片不见了，或按钮点了没反应？
先确认复制了完整代码，再检查是否引用本地文件。把实际现象、截图和当前 HTML 发给 AI，请它修复并返回完整文件。图片可通过编辑器的「图片资源」面板补充上传，CSS / JS 可通过对应资源面板内联。
画了一个报名表，别人填写后我就能收到吗？
表单外观不等于已经接通数据保存。需要收集报名、留言等信息时，还要配置相应的数据能力或收集表单，并实际提交验证。入门时先完成信息展示页，再按编辑器内的能力指南逐步增加功能。
每次都需要手动复制代码吗？
这篇介绍的是基础手动流程。如果你使用的 Agent 支持工具调用，可以继续阅读 Agent 发布，了解如何让它直接完成发布。
现在就试试
粘贴你的 HTML，几秒钟就能拿到一个可分享的网址。