第27篇：实战：产品展示页

第27篇：实战：产品展示页

产品展示页是电商和企业网站最常见的页面类型之一。本篇将综合运用表格、图片、语义化容器等标签，搭建一个专业的产品展示页面。

学习目标

• 能规划产品展示页的整体结构
• 能用<table>展示产品规格对比
• 能用<figure>+<figcaption>展示产品图片
• 能用语义化容器组织页面内容
• 能编写一个可直接运行的产品展示页面

核心知识点

一、产品展示页的结构设计

一个典型的产品展示页包含以下模块：

产品展示页结构 ├── 导航栏（nav） ├── 产品头部（header） │ ├── 产品名称（h1） │ └── 一句话简介 ├── 产品展示区（main） │ ├── 产品图片（figure） │ ├── 价格信息（data + p） │ ├── 核心特性（ul） │ ├── 详细规格（table） │ └── 用户评价（article + blockquote） ├── 相关产品（aside） └── 页脚（footer）

二、产品图片展示

使用<figure>和<figcaption>展示产品图片，这是图片和说明文字的最佳组合。

<figure><imgsrc="product-main.jpg"alt="星耀 Pro 无线耳机正面图，白色外观，入耳式设计"width="600"height="400"><figcaption>星耀 Pro 无线耳机 — 主打图</figcaption></figure><!-- 多张缩略图 --><divclass="gallery"><figure><imgsrc="product-1.jpg"alt="耳机正面"width="150"height="100"><figcaption>正面</figcaption></figure><figure><imgsrc="product-2.jpg"alt="耳机侧面"width="150"height="100"><figcaption>侧面</figcaption></figure><figure><imgsrc="product-3.jpg"alt="充电盒"width="150"height="100"><figcaption>充电盒</figcaption></figure></div>

💡alt 属性技巧：描述图片传达的信息，而不是"图片"二字。例如不说"产品图片"，而说"白色无线耳机正面图"。

三、产品规格对比表格

产品规格是展示页的核心内容，用<table>最清晰。

<section><h2>📋 详细规格</h2><table><caption>星耀 Pro 无线耳机技术规格</caption><thead><tr><th>规格项</th><th>参数</th></tr></thead><tbody><tr><th>型号</th><td>星耀 Pro X1</td></tr><tr><th>连接方式</th><td>蓝牙 5.3</td></tr><tr><th>续航时间</th><td>单次 8 小时，配合充电盒总计 32 小时</td></tr><tr><th>充电接口</th><td>USB-C / 无线充电</td></tr><tr><th>重量</th><td>单耳 4.5g，充电盒 45g</td></tr><tr><th>降噪</th><td>主动降噪（ANC）+ 通透模式</td></tr></tbody></table></section>

多产品对比表格

如果要对比多个产品，可以让表格更复杂：

<table><caption>三款耳机对比</caption><thead><tr><th>规格</th><th>星耀 Pro</th><th>星耀 Air</th><th>星耀 Lite</th></tr></thead><tbody><tr><th>价格</th><td>¥999</td><td>¥699</td><td>¥399</td></tr><tr><th>降噪</th><td>✅ 主动降噪</td><td>✅ 主动降噪</td><td>❌ 无</td></tr><tr><th>续航</th><td>32 小时</td><td>24 小时</td><td>20 小时</td></tr></tbody></table>

四、价格与数据标记

用<data>标签标记价格，让机器能读取数值：

<pclass="price"><datavalue="999">¥999</data><del>¥1299</del><spanclass="tag">限时优惠</span></p>

五、用户评价

用户评价可以用<article>包裹，引用内容用<blockquote>：

<section><h2>💬 用户评价</h2><articleclass="review"><blockquote><p>降噪效果出乎意料的好，在地铁上完全听不到外界噪音。音质也很棒，低音有力！</p></blockquote><p>—<cite>科技爱好者小王</cite><timedatetime="2024-05-15">2024年5月15日</time>⭐⭐⭐⭐⭐</p></article><articleclass="review"><blockquote><p>佩戴很舒适，戴了三个小时耳朵也不疼。连接速度很快，开盖即连。</p></blockquote><p>—<cite>音乐发烧友李女士</cite><timedatetime="2024-04-28">2024年4月28日</time>⭐⭐⭐⭐⭐</p></article></section>

动手练习

练习 1：更换产品主题

将配套代码中的"耳机"换成你熟悉的产品（手机、平板、键盘、相机等）：

• 更换产品名称、图片和描述
• 调整规格表格的内容
• 更换特性列表

练习 2：增加购买表单

在产品展示页中增加一个简单的购买区域：

• 用<form>创建购买表单
• 颜色选择用<input type="radio">
• 数量选择用<input type="number">
• 收货地址用<textarea>

练习 3：图片优化

• 为所有产品图片添加有意义的alt属性
• 使用width和height属性防止布局抖动
• 检查图片加载失败时的降级显示

常见误区 ⚠️

速查卡片 📋

产品展示页标签速查

图片可访问性检查清单

□ 所有 <img> 都有 alt 属性 □ alt 描述图片内容，不是"图片"或"xxx的图" □ 装饰性图片 alt="" □ 设置了 width 和 height 属性 □ 图片加载失败有文字提示

扩展阅读

• MDN:<figure>和<figcaption>
• MDN:<table>表格
• MDN:<blockquote>引用
• MDN:<data>数据
• 图片 alt 属性最佳实践（英文）

📌下一步：第28篇：实战：响应式登录注册表单28-实战响应式登录注册表单.md，综合运用表单标签搭建完整的登录注册页面。