第33篇：让AI帮你写语义化HTML的技巧

AI能生成HTML代码，但默认输出往往是"div soup"——学会用正确的提示词引导AI写出语义化、可访问性良好的HTML，是AI时代前端开发者的核心技能。

---

学习目标

• 理解为什么AI默认输出是非语义化的HTML
• 掌握让AI生成语义化HTML的提示词技巧
• 学会用"迭代式提示"逐步优化AI输出
• 能够将AI生成的"div soup"重构为语义化HTML
• 建立AI辅助HTML开发的完整工作流

---

核心知识点

一、为什么AI默认输出"div soup"

当你对AI说"帮我写一个博客页面"，它通常会返回这样的代码：

<!-- ❌ AI 的默认输出：div soup -->
<div class="header">
  <div class="logo">我的博客</div>
  <div class="nav">
    <a href="/">首页</a>
    <a href="/about">关于</a>
  </div>
</div>

<div class="main">
  <div class="post">
    <div class="post-title">文章标题</div>
    <div class="post-meta">作者：张三 | 2024-01-01</div>
    <div class="post-content">
      <p>这是文章内容……</p>
    </div>
  </div>
</div>

<div class="sidebar">
  <div class="widget">
    <div class="widget-title">关于我</div>
    <p>一个热爱前端开发的程序员。</p>
  </div>
</div>

<div class="footer">
  <p>版权所有 © 2024</p>
</div>

原因分析：

原因	说明
训练数据偏差	互联网上的旧代码大量使用 div，AI学习的是"常见模式"而非"最佳实践"
缺乏上下文	AI不知道你的内容语义，只能用通用容器
保守策略	div 最不容易出错，AI倾向于安全选择
样式优先思维	很多示例代码把语义和样式混为一谈，AI继承了这种思维

关键认知：AI不会自动为你考虑语义化，你必须在提示词中明确要求。

---

二、基础技巧：在提示词中明确要求语义化

技巧1：直接指定语义化要求

❌ 低效提示：
"帮我写一个博客首页的HTML"

✅ 高效提示：
"帮我写一个博客首页的HTML，要求：
- 使用 HTML5 语义化标签（header, nav, main, article, section, aside, footer）
- 不要用 div 包裹有语义的内容
- 每个 article 包含 header（标题+发布时间）和正文"

技巧2：提供标签选择清单

在提示词中明确告诉AI可以使用哪些标签：

"请用以下语义标签构建页面：
- <header>：页面头部
- <nav>：主导航
- <main>：主要内容区
- <article>：每篇独立文章
- <section>：页面内的主题区块
- <aside>：侧边栏
- <footer>：页脚
- <time>：日期时间
- <figure> + <figcaption>：图片及说明"

技巧3：用"替换法"检验要求AI

"生成代码后，请检查：如果把 <div class='header'> 替换成 <header>，
页面含义是否更清晰？如果是，请使用 <header>。"

---

三、进阶技巧：分轮次迭代优化

不要期望一次提示就得到完美结果。采用迭代式提示：

第一轮：获取基础结构

你的提示：

我需要一个企业官网首页的HTML结构，包含：
导航栏、Banner区、服务介绍、团队展示、联系方式、页脚。
请先用语义化标签搭建骨架，暂时不需要样式。

AI输出（可能仍有问题）：

<header>
  <div class="logo">星火科技</div>
  <nav>...</nav>
</header>

<div class="banner">
  <h1>用技术点亮未来</h1>
</div>

<div class="services">
  <div class="service-item">...</div>
</div>

第二轮：指出具体问题

你的提示：

很好，但有几处需要改进：

1. "星火科技"是页面标题，应该用 <h1> 而不是 <div class="logo">
2. Banner区是一个独立的主题区块，应该用 <section> 而不是 <div>
3. 每个服务项是独立完整的内容，应该用 <article> 而不是 <div>
4. 服务介绍区整体应该用 <section> 包裹，并加上标题

请修正以上问题。

AI输出（改进后）：

<header>
  <h1>星火科技</h1>
  <nav>...</nav>
</header>

<section class="banner">
  <h2>用技术点亮未来</h2>
</section>

<section class="services">
  <h2>我们的服务</h2>
  <article class="service-item">...</article>
  <article class="service-item">...</article>
</section>

第三轮：要求可访问性优化

你的提示：

请继续优化可访问性：

1. 为 <nav> 添加 aria-label="主导航"
2. 为 <section> 添加 aria-labelledby 关联标题
3. 所有图片添加有意义的 alt 文本
4. 为服务卡片添加适当的标题层级
5. 联系方式使用 <address> 标签

请输出完整修正后的代码。

AI输出（最终版）：

<header>
  <a href="/">
    <img src="logo.png" alt="星火科技">
  </a>
  <nav aria-label="主导航">
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#services">服务</a></li>
      <li><a href="#team">团队</a></li>
      <li><a href="#contact">联系</a></li>
    </ul>
  </nav>
</header>

<main>
  <section id="home" aria-labelledby="home-title">
    <h2 id="home-title">用技术点亮未来</h2>
    <p>我们为企业提供最前沿的数字化解决方案</p>
    <a href="#contact">立即咨询</a>
  </section>

  <section id="services" aria-labelledby="services-title">
    <h2 id="services-title">我们的服务</h2>

    <article>
      <h3>网站开发</h3>
      <p>响应式网站设计与开发</p>
    </article>

    <article>
      <h3>移动应用</h3>
      <p>iOS 和 Android 原生应用</p>
    </article>
  </section>
</main>

<footer>
  <address>
    联系我们：<a href="mailto:hello@xinghuo.com">hello@xinghuo.com</a>
  </address>
  <p>&copy; 2024 星火科技</p>
</footer>

迭代要点：每轮只聚焦1-2类问题，逐步逼近理想结果。一次性提太多要求，AI容易遗漏。

---

四、实战：把AI的"div soup"重构为语义化HTML

场景：AI生成了一份产品列表页

AI原始输出：

<div class="product-page">
  <div class="top-bar">
    <div class="brand">数码商城</div>
    <div class="menu">
      <a href="/">首页</a>
      <a href="/products">产品</a>
      <a href="/cart">购物车</a>
    </div>
  </div>

  <div class="content">
    <div class="filters">
      <div class="filter-title">筛选</div>
      <div class="filter-group">
        <div class="filter-label">价格</div>
        <label><input type="checkbox"> 0-500元</label>
        <label><input type="checkbox"> 500-1000元</label>
      </div>
    </div>

    <div class="product-list">
      <div class="product-card">
        <div class="product-image">
          <img src="phone.jpg">
        </div>
        <div class="product-name">智能手机 X1</div>
        <div class="product-price">¥2999</div>
        <div class="product-desc">高性能旗舰手机</div>
        <button>加入购物车</button>
      </div>
      <!-- 更多产品... -->
    </div>
  </div>

  <div class="bottom">
    <p>数码商城 版权所有</p>
  </div>
</div>

问题诊断清单：

位置	问题	应改为
<div class="top-bar">	页面头部	<header>
<div class="brand">	网站名称	<h1>
<div class="menu">	导航菜单	<nav>
<div class="content">	主要内容	<main>
<div class="filters">	筛选侧边栏	<aside>
<div class="filter-title">	区块标题	<h2>
<div class="product-list">	产品列表区	<section>
<div class="product-card">	独立产品信息	<article>
<div class="product-image">	图片容器	<figure>
<img>	无alt	添加 alt="智能手机 X1 产品图"
<div class="product-name">	产品名称	<h3>
<div class="product-price">	价格	<data value="2999">
<div class="product-desc">	描述	<p>
<div class="bottom">	页脚	<footer>

重构后的语义化版本：

<header>
  <h1>数码商城</h1>
  <nav aria-label="主导航">
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/products">产品</a></li>
      <li><a href="/cart">购物车</a></li>
    </ul>
  </nav>
</header>

<main>
  <aside class="filters" aria-labelledby="filter-title">
    <h2 id="filter-title">筛选</h2>

    <fieldset>
      <legend>价格</legend>
      <label><input type="checkbox" name="price" value="0-500"> 0-500元</label>
      <label><input type="checkbox" name="price" value="500-1000"> 500-1000元</label>
    </fieldset>
  </aside>

  <section class="product-list" aria-labelledby="list-title">
    <h2 id="list-title">产品列表</h2>

    <article class="product-card">
      <figure class="product-image">
        <img src="phone.jpg" alt="智能手机 X1 产品图" width="200" height="200">
      </figure>
      <h3>智能手机 X1</h3>
      <data value="2999" class="product-price">¥2999</data>
      <p>高性能旗舰手机</p>
      <button type="button">加入购物车</button>
    </article>

    <!-- 更多产品... -->
  </section>
</main>

<footer>
  <p>&copy; 2024 数码商城 版权所有</p>
</footer>

---

五、提示词模板库

模板1：通用语义化要求

请用HTML5语义化标签编写以下页面，要求：
1. 使用 header, nav, main, article, section, aside, footer 等语义标签
2. 不要用 div 包裹有独立语义的内容
3. 标题层级从 h1 开始，不要跳级
4. 所有图片必须有 alt 属性
5. 表单控件必须有关联的 label
6. 为 nav 添加 aria-label

模板2：博客/文章类页面

请用语义化HTML编写博客[首页/文章页/列表页]，要求：
- 每篇博客文章用 <article> 包裹
- 文章标题用 <h2>（首页）或 <h1>（文章页）
- 发布日期用 <time datetime="YYYY-MM-DD">
- 文章摘要用 <p>，标签用 <ul> + <li>
- 作者信息用 <address> 或 <span> 包裹
- 分页导航用 <nav aria-label="分页">

模板3：企业官网

请用语义化HTML编写企业官网首页，要求：
- 页面标题用 <h1>（仅一个）
- 各区块用 <section>，每个 section 有标题
- 服务/产品卡片用 <article>（独立完整的内容）
- 团队成员用 <figure> + <figcaption> 展示头像
- 联系信息用 <address>
- 客户评价用 <blockquote> + <cite>

模板4：要求AI自我检查

生成代码后，请按以下清单自检并修正：
- [ ] 是否所有 <div> 都是无语义需求的？
- [ ] 是否有可以用 <header>/<footer>/<nav>/<main> 替代的地方？
- [ ] 标题层级是否连续？
- [ ] 图片是否都有 alt？
- [ ] 是否有可以用 <article>/<section> 替代 <div> 的内容区块？

---

六、AI辅助语义化工作流

┌─────────────────────────────────────────────────────┐
│  步骤1：明确内容结构和语义需求                          │
│  先自己画出页面结构图，明确每个区块的语义                │
├─────────────────────────────────────────────────────┤
│  步骤2：用模板提示词让AI生成初稿                        │
│  使用上面的提示词模板，获得基础代码                      │
├─────────────────────────────────────────────────────┤
│  步骤3：逐轮迭代优化                                   │
│  每轮聚焦一类问题：语义标签 → 可访问性 → 标题层级        │
├─────────────────────────────────────────────────────┤
│  步骤4：人工审查与修正                                 │
│  用"替换法"检查每个标签，用W3C Validator验证           │
├─────────────────────────────────────────────────────┤
│  步骤5：保存为可复用模板                                │
│  把优化后的提示词保存下来，下次类似需求直接复用           │
└─────────────────────────────────────────────────────┘

---

动手练习

练习 1：优化AI生成的文章页

以下是一段AI生成的文章页面代码，请指出所有语义化问题并修正：

<div class="article-page">
  <div class="header">
    <div class="site-name">技术博客</div>
    <div class="nav">
      <a href="/">首页</a>
      <a href="/archives">归档</a>
    </div>
  </div>

  <div class="article">
    <div class="article-header">
      <div class="title">CSS Grid 布局完全指南</div>
      <div class="meta">作者：李明 | 2024-06-01</div>
    </div>
    <div class="content">
      <p>CSS Grid 是一个强大的二维布局系统……</p>
      <div class="code-block">
        <pre>.grid { display: grid; }</pre>
      </div>
    </div>
    <div class="tags">
      <span>CSS</span>
      <span>布局</span>
    </div>
  </div>

  <div class="sidebar">
    <div class="widget">
      <div class="widget-title">相关文章</div>
      <a href="/post/1">Flexbox 入门</a>
      <a href="/post/2">响应式设计</a>
    </div>
  </div>

  <div class="footer">
    <p>技术博客 © 2024</p>
  </div>
</div>

参考答案

<header>
  <h1>技术博客</h1>
  <nav aria-label="主导航">
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/archives">归档</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <header>
      <h2>CSS Grid 布局完全指南</h2>
      <p>作者：李明 | <time datetime="2024-06-01">2024年6月1日</time></p>
    </header>

    <div class="content">
      <p>CSS Grid 是一个强大的二维布局系统……</p>
      <figure class="code-block">
        <pre><code>.grid { display: grid; }</code></pre>
        <figcaption>Grid 基础用法</figcaption>
      </figure>
    </div>

    <footer>
      <ul class="tags">
        <li><a href="/tag/css">CSS</a></li>
        <li><a href="/tag/layout">布局</a></li>
      </ul>
    </footer>
  </article>
</main>

<aside>
  <section class="widget">
    <h2>相关文章</h2>
    <ul>
      <li><a href="/post/1">Flexbox 入门</a></li>
      <li><a href="/post/2">响应式设计</a></li>
    </ul>
  </section>
</aside>

<footer>
  <p>技术博客 &copy; 2024</p>
</footer>

修正说明：

原标签	修正为	原因
<div class="header">	<header>	页面头部
<div class="site-name">	<h1>	网站名称
<div class="nav">	<nav>	导航
<div class="article">	<article>	独立文章
<div class="title">	<h2>	文章标题
<div class="meta">	<p> + <time>	元信息
<div class="code-block">	<figure> + <figcaption>	独立内容单元
<div class="tags">	<ul> + <li>	标签列表
<div class="sidebar">	<aside>	侧边栏
<div class="widget">	<section>	侧边栏内的主题区块
<div class="widget-title">	<h2>	区块标题
<div class="footer">	<footer>	页脚

练习 2：设计一个提示词

假设你需要AI帮你生成一个在线课程详情页，包含：课程封面、课程介绍、讲师信息、课程大纲（章节列表）、学员评价、报名按钮。

请设计一个提示词，要求AI输出语义化HTML。

参考答案

请用HTML5语义化标签编写一个在线课程详情页，页面包含以下内容：

1. 课程封面图（带标题和简介）
2. 课程详细介绍
3. 讲师信息（头像、姓名、简介）
4. 课程大纲（多个章节，每章含多个课时）
5. 学员评价（多条评价）
6. 报名区域（表单：姓名、手机号、邮箱）

要求：
- 使用 header, nav, main, article, section, aside, footer 等语义标签
- 课程封面用 figure + figcaption
- 课程大纲用嵌套的 ol/li 或 section + h3/h4
- 每条学员评价用 article
- 讲师信息用 address 或适当语义标签
- 报名表单必须有 label 关联每个 input
- 所有图片必须有 alt 属性
- 标题层级从 h1 开始，不要跳级
- 生成后请自检：是否有 div 可以替换为语义标签？

练习 3：迭代优化对话

假设AI第一次生成了以下代码（有问题的注册表单）：

<div class="form-container">
  <div class="form-title">用户注册</div>
  <div class="form-group">
    <div class="label">用户名</div>
    <input type="text" placeholder="请输入用户名">
  </div>
  <div class="form-group">
    <div class="label">邮箱</div>
    <input type="email" placeholder="请输入邮箱">
  </div>
  <div class="button-group">
    <button>注册</button>
    <button>重置</button>
  </div>
</div>

请写出你会给AI的第二、第三轮提示词，逐步修正为语义化、可访问性良好的表单。

参考答案

第二轮提示词：

请将表单改为语义化结构：
1. 整个表单用 <form> 包裹，添加 action 和 method
2. "用户注册"用 <h2> 或 <legend>
3. 每个输入项用 <label> 关联 input（for + id）
4. 不要用 <div> 做 label，用真正的 <label> 标签
5. 按钮添加 type="submit" 和 type="reset"
6. 相关字段用 <fieldset> + <legend> 分组

第三轮提示词：

请继续优化可访问性：
1. 为每个 input 添加 name 属性
2. 必填字段添加 required 属性
3. 用户名添加 minlength="3" maxlength="20"
4. 邮箱使用 type="email"
5. 为 form 添加 aria-label="用户注册表单"
6. 添加 <small> 说明用户名规则

最终代码：

<form action="/register" method="POST" aria-label="用户注册表单">
  <fieldset>
    <legend><h2>用户注册</h2></legend>

    <div class="form-group">
      <label for="reg-username">用户名 *</label>
      <input
        type="text"
        id="reg-username"
        name="username"
        placeholder="请输入用户名"
        minlength="3"
        maxlength="20"
        required
      >
      <small>3-20个字符，字母开头</small>
    </div>

    <div class="form-group">
      <label for="reg-email">邮箱 *</label>
      <input
        type="email"
        id="reg-email"
        name="email"
        placeholder="请输入邮箱"
        required
      >
    </div>
  </fieldset>

  <div class="button-group">
    <button type="submit">注册</button>
    <button type="reset">重置</button>
  </div>
</form>

---

常见误区 ⚠️

误区	正确理解
“AI会自动生成语义化HTML”	AI默认输出div soup，必须在提示词中明确要求语义化
“一次提示就能得到完美结果”	需要多轮迭代，逐步优化
“提示词越长越好”	提示词要结构化、分点列出，不是堆砌文字
“AI生成的代码不需要检查”	必须人工审查，用替换法和验证工具检查
“语义化就是多用新标签”	是用对标签，不是用得越多越好
“提示词里写了语义化就够了”	还要要求可访问性、标题层级、label关联等细节
“AI不懂ARIA就不用提”	明确提要求后，AI可以正确使用aria-label等属性
“重构AI代码比重写还慢”	建立模板和工作流后，迭代效率远高于从零手写

---

速查卡片 📋

语义化提示词检查清单

发送给AI前，确认你的提示词包含：

• 明确要求"使用HTML5语义化标签"
• 列出具体要使用的标签（header/nav/main/article等）
• 要求标题层级连续（h1→h2→h3）
• 要求所有img有alt
• 要求表单label关联input
• 要求ARIA属性（aria-label, aria-labelledby）
• 要求生成后自检

迭代优化流程

第一轮：生成基础结构
    ↓
第二轮：修正语义标签（div → 语义标签）
    ↓
第三轮：优化可访问性（alt, label, ARIA）
    ↓
第四轮：修正标题层级和细节
    ↓
第五轮：人工审查 + W3C验证

AI输出常见问题速查

常见错误	你的提示词应包含
全用 div	“使用 header/nav/main/article/section/aside/footer”
标题用 div/span	“标题必须用 h1-h6，不要跳级”
图片无 alt	“所有图片必须有 alt 属性”
表单无 label	“每个 input 必须有关联的 label”
无 form 包裹	“表单控件必须放在 form 标签内”
按钮无 type	“button 必须显式写 type”
列表用 div	“列表必须用 ul/ol + li”

提示词模板速记

请用HTML5语义化标签编写[页面类型]。
要求：
1. 使用 header, nav, main, article, section, aside, footer
2. 标题层级连续，从 h1 开始
3. 所有 img 有 alt，所有 input 有 label
4. 表单用 form + fieldset + legend
5. 生成后自检语义标签使用是否正确

---

扩展阅读

• MDN: HTML 元素参考
• HTML5 Doctor: 语义元素指南
• WAI-ARIA 实践指南
• W3C Markup Validator（验证工具）
• HTML5 Outliner（文档大纲检查）
• WebAIM: 可访问性简介

---

下一篇：第34篇：AI辅助表单与表格生成实战