HTML 的 AI 精准生成
描述结构而非样式，说明语义而非外观
让 AI 听懂你想要什么网页，而不是你想要什么颜色为什么说不准
你让 AI "做一个好看的登录页面"，结果总是不对味
模糊描述
"做一个好看的登录页面，要有用户名和密码框"
AI 猜不出你要几个输入框、要不要记住我、提交到哪里。结果每次都不一样。
精准描述
"创建一个登录表单：页头含 Logo，主内容区一个表单提交到 /login，包含用户名输入框、密码输入框、记住我复选框、登录按钮，页脚版权信息。"
结构清晰、语义明确——AI 一次就能生成你想要的结果。
Part 1: 结构描述
给 AI 一张清晰的"建筑蓝图"，而不是一张手绘草图。
按区块描述
从 header → main → footer，逐层递进，让 AI 清楚每个区域放什么。
用缩进表达嵌套
缩进 = 标签嵌套，AI 一眼就能理解父子关系。
按区块描述
从 header → main → footer，逐层递进
错误示范
"做一个好看的登录页面，
要有用户名和密码框"AI 只知道要有输入框，其他全靠猜。
正确示范
"创建一个登录表单页面，包含：
1. 页头：Logo + 标题'用户登录'
2. 主内容区：
- 表单提交到 /login
- 用户名输入框 (name='username')
- 密码输入框 (name='password')
- 记住我复选框
- 登录按钮 (submit)
3. 页脚：版权信息"<form>、<label>）。
Part 2: 语义化描述
告诉 AI 每个元素的"角色"，而不是它的"长相"。
语义标签选择
"三个产品特性卡片，每个用 article 包裹" — 指定标签比说"放三个方块"精准得多。
语义对照表
"这是导航" → nav、"独立文章" → article — 建立意图与标签的映射关系。
语义标签选择
当你想说"放三个小方块"时，其实是在说"放三个产品特性卡片"
错误描述
"放三个小方块，里面写产品特点"
AI 不知道用什么标签，可能全部用 <div>。
正确描述
"三个产品特性卡片，每个用 <article> 包裹，含 <h2> 标题和 <p> 描述"
| 你想表达的意思 | 应该用的标签 | AI 能理解的描述 |
|---|---|---|
| "这是主要内容" | <main> | "页面的主要内容区域，只有一个" |
| "这是独立文章" | <article> | "可以单独分发的内容单元" |
| "这是相关推荐" | <aside> | "附属内容，与主要内容相关但可独立存在" |
| "这是导航菜单" | <nav> | "主要导航区域，包含网站主要链接" |
| "这是内容区块" | <section> | "一个有标题的内容区块" |
Part 3: 内容具体化
AI 不会创造有意义的内容——你需要提供具体文字，或者明确告诉它用占位符。
提供真实内容
不要说"放标题"，要说"标题是'旗舰智能手表'" — 具体文本让 AI 一次到位。
内容四原则
提供实际文本、说明图片 alt、给出列表项、说明表单字段类型。
提供真实内容
不要说"放一些产品信息"，要说"标题是'旗舰智能手表'"
模糊描述
"放一些产品信息"专业描述
"添加产品介绍部分：
+ 标题：'旗舰智能手表'
+ 特性列表（无序列表）：
- 24小时心率监测
- 睡眠质量分析
- 50米防水
- 14天续航
+ 图片 alt='智能手表正面图'"Part 4: 链接与交互
说明功能，而非样式。"蓝色的悬停效果"是 CSS 的事，不是 HTML 的事。
导航描述
"创建主导航，包含 4 个链接：首页 → index.html、产品 → products.html" — 指明链接目标和功能。
功能 vs 样式
"这是个导航" ✅ — "蓝色的导航栏" ❌ — 区分 HTML 职责和 CSS 职责。
导航描述示例
错误描述
"做个导航栏，蓝色的，
鼠标悬停变深蓝"这是在描述样式，不是结构。
正确描述
"创建主导航：
+ 位于页头区域
+ 包含 4 个链接：
- 首页 → index.html
- 产品 → products.html
- 关于 → about.html
- 联系 → contact.html
+ 用 nav 内含 ul/li/a 实现"Part 5: 表格与列表
结构化数据需要精确描述表头、示例行和语义结构。
表格描述要点
明确表头内容、提供 1-2 行示例数据、说明用途（数据展示 vs 布局）。
列表描述技巧
给出 3-5 个实际列表项，指定有序还是无序，说明是否嵌套。
表格描述要点
模糊描述
"做个表格显示用户信息"专业描述
"创建用户数据表格：
+ 标题：'注册用户列表'
+ 表头行：ID、姓名、邮箱、注册日期
+ 表体含 3 行示例数据
+ 使用 thead/tbody 语义结构"- 明确表头内容：不要说"第一列是ID"，说"表头包含：ID、姓名、邮箱"
- 提供示例行：至少描述 1-2 行实际数据
- 说明用途：是数据展示还是布局？（应避免用表格做布局）
Part 6: 图片与多媒体
图片描述的关键是提供 alt 文本和说明用途，而不是尺寸。
图片描述要素
描述图片内容（不是尺寸）、提供 alt 文本、说明图片用途（装饰？信息？）。
alt 文本规范
"logo图片" 是坏的 alt，"某某公司蓝色三角形Logo" 才是好的 — 描述内容和功能。
图片描述示例
错误描述
"放个大图在顶部，
宽度100%，高度300px"尺寸是 CSS 的职责，不是 HTML 的。
正确描述
"页面顶部 hero 区域主视觉图：
+ 描述：'团队合作场景'
+ alt：'五人团队在办公室讨论项目'
+ 使用占位图服务
+ 图片后跟随一段介绍文字"Part 7: 表单描述
表单是最需要精确描述的元素——每个字段的类型、名称、验证规则都要说清楚。
表单描述模板
提交路径 + 方法 + 每个字段的名称、类型、name 值、验证属性。
常见字段类型
text、email、password、radio、checkbox、select — 每种都有特定的用途和属性。
注册表单示例
创建用户注册表单：
+ 提交到 /register，使用 POST 方法
+ 包含以下字段（每个都有 label）：
- 用户名：文本输入，name='username'，必填
- 邮箱：邮箱输入，name='email'，必填
- 密码：密码输入，name='password'，至少 8 字符
- 确认密码：密码输入，name='confirm_password'
- 性别：单选按钮组（男/女/不愿透露）
- 兴趣：复选框组（阅读/运动/音乐/旅行）
- 注册按钮：submit 类型，文本'立即注册'
+ 表单下方有"已有账号？登录"链接七个常见错误
| 错误类型 | 错误示例 | 正确做法 |
|---|---|---|
| 混淆 HTML 与 CSS | "做个蓝色的标题" | "这是一个主标题，用 h1 标签" |
| 忽略语义 | "放三个方块" | "三个产品特性卡片，每个用 article 标签" |
| 内容模糊 | "放些产品信息" | "标题：旗舰手表；特点：心率监测、睡眠分析" |
| 缺少 alt | "加个 logo 图片" | "加个 logo，alt='公司名+描述'" |
| 布局描述 | "两个并排的栏目" | "两个相关但独立的内容单元" |
| 过时元素 | "用表格布局" | "用语义化结构标签组织内容" |
| 忽略可访问性 | 未提及 label | "每个表单字段都有对应 label" |
需求描述模板
每次向 AI 提交 HTML 需求前，按这个模板检查
# [页面名称] 页面结构需求
## 整体结构
- 页面类型：[单页/多页/登录页等]
- 主要区块：[header/main/footer]
- 特殊要求：[如无障碍访问]
## 页头 (header)
- [Logo、导航结构描述]
## 主内容区 (main)
### [区块1名称]
- 类型：[section/article]
- 内容：[具体文字、列表项等]
## 页脚 (footer)
- [版权信息、页脚导航]
## 特殊要求
- [可访问性、其他说明]实战案例
从模糊的"做个企业官网首页"到精准的逐段描述——看完整的转化过程
模糊需求
"做个企业官网首页"AI 收到这样的需求只能猜，结果大概率不对。
精准描述
# 企业官网首页结构需求
## 整体结构
- 单页式企业官网
- header + 5个区块 + footer页头与导航
## 页头 (header)
- Logo文字："TechCorp"
- 主导航 (nav)：
* 首页、产品、服务、关于我们、联系我们主内容区结构
## 主内容区 (main)
1. 英雄区 (section)：
- h1 "创新科技解决方案"
- 行动按钮 "了解更多"
2. 产品特色 (section)：
- 3个 article 卡片
3. 服务介绍 (section)：无序列表
4. 客户评价 (section)
5. 联系表单 (section)提交前检查
在把需求发给 AI 之前，确认以下每一条
结构完整
- 明确了 header/main/footer 整体结构
- 每个区块的语义类型已指定（section/article）
内容具体
- 所有图片都有 alt 文本
- 表单字段有类型和名称
- 链接有目标和功能说明
没有样式描述
- 没有颜色、尺寸、位置描述
- 没有"好看""漂亮"等主观词
- 用"这是导航"代替"蓝色的导航栏"
草图驱动思维
在纸上画个框，你就已经在描述 HTML 结构了
纸上的草图
┌─────────────────────┐
│ Logo 导航 │
├──────────┬──────────┤
│ 文章正文 │ 相关链接 │
│ │ │
├──────────┴──────────┤
│ 版权 · 联系方式 │
└─────────────────────┘对应的 HTML
<header>...</header>
<main>
<article>文章正文</article>
<aside>相关链接</aside>
</main>
<footer>...</footer>当你画一个框时，你已经在做：① 区域划分 → 对应 HTML 语义区块 ② 层级关系 → 对应标签嵌套 ③ 内容组织 → 对应文本、列表、表单。
本章学习完毕
你已经学会了如何用结构化、语义化的方式向 AI 描述 HTML 需求。下一章，我们将动手搭建一个真实的个人网站。