- 对象
- 想用 AI 制作网页物料、课件或个人站的初学者。
- 讲授范围
- HTML 的基本认知、网页物料取舍与 Agent 协作方法。
- 形式
- 10 页课件图与必要讲解补充，附交互演示和录像入口。
在飞书打开，可能需要登录或访问授权；尚未确认可公开播放。
课程说明
这门课保留原有十页课件，依次解释 HTML 是什么、何时选 HTML、单文件怎样进入网站项目，以及怎样和 Agent 一起完成可检查的网页物料。课件已经表达完整的内容不再重复；图片下方只保留有助于判断与操作的补充说明。
课后实操
用已经确认且可以公开的资料，完成一个本地个人站第一版：说清楚自己是谁、做过什么、擅长什么，以及别人怎样联系你。先完成结构与内容，再决定是否上线。
按自己的节奏阅读。课件保留原中文；只有补充课件的信息才显示在图片下方。
打开课件演示01 · 为什么做一份物料，总在内容和格式之间来回折腾？
我最早想解决的是日常工作里的材料问题。一份方案、汇报或介绍页，常常改了一句话就要重排版式，换了一张图又要调整比例；让 AI 直接修改 Office 文件，也容易出现格式错乱。
资料变动、改内容、调版式、重新导出，然后又有修改。当内容和格式绑在一起，每次修改都可能变成重新排版。
这门课讨论的是如何让 AI 更高效地帮我们完成内容物料。HTML 提供了一种办法：让内容与视觉结构更容易被 AI 理解和修改。
02 · 不懂代码，也能用 HTML 做物料吗？
我是 Yuli。今年 2 月刚开始接触 AI 时，我不会代码，也不会搭网站。现在，我能使用 AI 协助完成官网搭建、页面设计、内容整理和网站维护。
不需要先成为程序员，可以先学会一种新的物料生产方式。这里的 Agent 指能够读取资料、创建文件、运行页面并检查结果的 AI 工具。
课程分三部分：理解 HTML 页面；让 Agent 制作单文件物料；判断何时需要升级成网站项目。最后用一个个人站练习，把方法走一遍。
03 · HTML，到底是什么？
PPT 用 PowerPoint 打开，Word 用 Word 打开，HTML 用浏览器打开。一个名为 presentation.html 的文件，双击后就可以在浏览器中呈现汇报材料、产品介绍或个人主页。
文字、图片、图表和按钮先组成页面结构，再通过浏览器展示。HTML 可以用于课件、方案、报告、长页面和个人网站；它是一种内容展示方式，网站只是其中一种应用。
本地文件不等于已经上线。只有发布到网络，别人才能通过网址访问。严格来说，一个网页通常由三个部分组成：
- HTML：组织内容结构。
- CSS：控制视觉样式。
- JavaScript：实现互动功能。
为了方便入门，这门课将它们合在一起称为 HTML 页面。
04 · HTML、PPT 和 PNG，应该怎么选？
选择格式，要看最后由谁使用，以及需要怎样修改。以信息展示为主、不依赖大量手工视觉设计的内容，可以优先考虑 HTML。
| 使用场景 | 优先选择 | 原因 |
|---|---|---|
| AI 反复修改、批量生成或需要互动 | HTML | 内容与样式更容易统一调整，也可以导出 PNG 或 PDF |
| 多人继续编辑、会议汇报 | PPT | 保留可编辑的办公文件，方便接手 |
| 强视觉传播、一次性展示 | PNG | 适合海报、社媒图片、活动宣传和复杂视觉合成 |
之所以把 PNG 放进来，是因为很多使用者并非设计师。过去依靠专业设计软件完成的画面，现在也会通过 AI 生成图片，再直接传播。
这三种方式可以配合：用 AI 生成视觉素材，用 HTML 组织信息；需要团队继续编辑的汇报则保留 PPT。
05 · 怎样让 Agent 做好一个单文件 HTML？
不要只说“帮我做一个高级网页”。Agent 需要知道给谁看、解决什么问题、最终交付什么。一个清楚的任务包括五步：
- 明确目标。 给谁看？希望对方理解什么、完成什么？
- 确定输出形式。 长页面、16:9 课件、A4 文档或 4:3 海报，选定一个目标，不混用比例。
- 整理资料。 哪些资料能用，哪些事实不能补写，缺失内容怎样标记？
- 确定视觉和模块。 颜色、字体、氛围与参考方向是什么？需要文字、图片、图表还是简单互动？
- 生成并检查。 在浏览器中查看，提出具体修改，再导出交付。
例如，制作一个给海外客户看的产品介绍页，目标是让客户理解产品优势并留下询盘。接着再明确页面形式、参考视觉和需要的模块，比一句笼统要求更容易执行。
生成后检查内容是否准确、图片是否正常、排版有无溢出，以及手机和电脑显示是否正常。发现问题后继续修改。
人负责判断方向，AI 协助快速执行和迭代。生成、检查、修改、再生成，才是完整的工作过程。
06 · 什么时候一个 HTML 文件不够用了？
单文件适合一次性材料、简单展示页和变化较少的内容。当它越来越难找、难改、难复用，就需要考虑项目化。主要有三种信号：
- 内容变多： 多个页面、导航、图片和资料分类，重复模块需要统一更新。
- 功能变复杂： 表单、搜索、筛选、登录、数据保存或第三方服务连接。
- 维护变长期： 持续更新、多人协作、版本管理或自动发布。
关键不只是页面数量。一页简单个人介绍不必引入复杂工程；企业官网如果包含产品、案例、博客并需要持续更新，项目化就更合适。即使只有一页，功能和数据的复杂程度也可能让拆分成为必要。
07 · 网站项目，到底是什么？
单文件把内容、样式、功能和素材放在一个文件里，方便一次性交付。项目化则把不同职责拆开：
website/
├── 页面
├── 样式
├── 功能
├── 图片素材
└── 数据配置页面决定展示什么；样式决定长什么样；功能决定点击后发生什么；素材保存图片、字体等资源。
以后改内容时找到页面文件，改视觉时找到样式文件，改功能时找到相应实现。这样的分工可以减少相互干扰，但改动后仍要检查关联部分。
项目化的目的是把复杂内容管理清楚，让持续维护和升级更容易。
08 · 怎样让 Agent 高效做出一个网站项目？
网站目标、内容结构、视觉规则与开发环境，都需要在执行前说明。高质量结果依赖前面的信息整理。
- 目标： 网站服务谁，用户为什么访问，希望用户完成什么？
- 内容： 整理品牌、产品、图片、案例和文案，规划页面与信息层级；缺失事实不补写。
- 视觉： 提供 VI、参考页面或设计稿，先做一个代表页面，再扩展。
- 环境： 让 Agent 检查项目目录和说明，说明依赖的用途及影响；按确认的范围安装，并给出本地启动方式。Git 可用于记录修改，但覆盖、删除、提交或发布都需要明确授权。
- 检查： 完成核心页面与用户路径，在浏览器中检查图片、按钮、链接和不同设备显示。
个人站是适合入门的练习：业务与数据可以保持简单，却仍包含定位、内容、视觉、页面结构和发布判断。用已经确认、没有敏感信息的资料完成第一版；部署留到检查后决定。
09 · 想让别人看到网页，该怎么做？
先决定交付方式：只给自己看就在本地打开；给客户看固定版本可以导出 PDF；需要在线访问或互动，再考虑部署。
选择平台时，要看访客所在地、是否商业使用、是否需要表单或后端，以及域名和合规要求。课件对比了 Vercel、Cloudflare Pages、GitHub Pages、Netlify、腾讯云 CloudBase 和阿里云 OSS。
图片中的平台价格和限制为 2026-08-07 的课程参考，不是当前报价。 使用前应到各平台官网重新核对费用、商用范围、额度、域名和备案要求。不同来源中的历史价格也可能存在口径差异，不应直接据此采购。
公开链接前再次检查：报价、客户资料、内部数据和凭据不能直接放上去。能在本地正常打开，也不代表已经完成公开发布的检查。
10 · 课后实操：做一个属于自己的个人站
使用 AI 完成一个本地个人站第一版，包含三个部分：
- 自我介绍： 我是谁，我有哪些经历？
- 能力与项目： 擅长什么，做过什么，哪些内容获准公开？
- 联系方式： 别人怎样找到我？
这项练习会走过内容梳理、页面设计、HTML 制作和项目管理。先检查信息、导航、图片和手机显示，再决定是否部署成线上名片。
以后做企业官网或产品页，也可以沿用这种方法：明确目标，整理可用资料，让 AI 协助执行，再由人检查结果。