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

第27篇实战产品展示页产品展示页是电商和企业网站最常见的页面类型之一。本篇将综合运用表格、图片、语义化容器等标签搭建一个专业的产品展示页面。学习目标能规划产品展示页的整体结构能用table展示产品规格对比能用figurefigcaption展示产品图片能用语义化容器组织页面内容能编写一个可直接运行的产品展示页面核心知识点一、产品展示页的结构设计一个典型的产品展示页包含以下模块产品展示页结构 ├── 导航栏nav ├── 产品头部header │ ├── 产品名称h1 │ └── 一句话简介 ├── 产品展示区main │ ├── 产品图片figure │ ├── 价格信息data p │ ├── 核心特性ul │ ├── 详细规格table │ └── 用户评价article blockquote ├── 相关产品aside └── 页脚footer二、产品图片展示使用figure和figcaption展示产品图片这是图片和说明文字的最佳组合。figureimgsrcproduct-main.jpgalt星耀 Pro 无线耳机正面图白色外观入耳式设计width600height400figcaption星耀 Pro 无线耳机 — 主打图/figcaption/figure!-- 多张缩略图 --divclassgalleryfigureimgsrcproduct-1.jpgalt耳机正面width150height100figcaption正面/figcaption/figurefigureimgsrcproduct-2.jpgalt耳机侧面width150height100figcaption侧面/figcaption/figurefigureimgsrcproduct-3.jpgalt充电盒width150height100figcaption充电盒/figcaption/figure/divalt 属性技巧描述图片传达的信息而不是图片二字。例如不说产品图片而说白色无线耳机正面图。三、产品规格对比表格产品规格是展示页的核心内容用table最清晰。sectionh2 详细规格/h2tablecaption星耀 Pro 无线耳机技术规格/captiontheadtrth规格项/thth参数/th/tr/theadtbodytrth型号/thtd星耀 Pro X1/td/trtrth连接方式/thtd蓝牙 5.3/td/trtrth续航时间/thtd单次 8 小时配合充电盒总计 32 小时/td/trtrth充电接口/thtdUSB-C / 无线充电/td/trtrth重量/thtd单耳 4.5g充电盒 45g/td/trtrth降噪/thtd主动降噪ANC 通透模式/td/tr/tbody/table/section多产品对比表格如果要对比多个产品可以让表格更复杂tablecaption三款耳机对比/captiontheadtrth规格/thth星耀 Pro/thth星耀 Air/thth星耀 Lite/th/tr/theadtbodytrth价格/thtd¥999/tdtd¥699/tdtd¥399/td/trtrth降噪/thtd✅ 主动降噪/tdtd✅ 主动降噪/tdtd❌ 无/td/trtrth续航/thtd32 小时/tdtd24 小时/tdtd20 小时/td/tr/tbody/table四、价格与数据标记用data标签标记价格让机器能读取数值pclasspricedatavalue999¥999/datadel¥1299/delspanclasstag限时优惠/span/p五、用户评价用户评价可以用article包裹引用内容用blockquotesectionh2 用户评价/h2articleclassreviewblockquotep降噪效果出乎意料的好在地铁上完全听不到外界噪音。音质也很棒低音有力/p/blockquotep—cite科技爱好者小王/citetimedatetime2024-05-152024年5月15日/time⭐⭐⭐⭐⭐/p/articlearticleclassreviewblockquotep佩戴很舒适戴了三个小时耳朵也不疼。连接速度很快开盖即连。/p/blockquotep—cite音乐发烧友李女士/citetimedatetime2024-04-282024年4月28日/time⭐⭐⭐⭐⭐/p/article/section动手练习练习 1更换产品主题将配套代码中的耳机换成你熟悉的产品手机、平板、键盘、相机等更换产品名称、图片和描述调整规格表格的内容更换特性列表练习 2增加购买表单在产品展示页中增加一个简单的购买区域用form创建购买表单颜色选择用input typeradio数量选择用input typenumber收货地址用textarea练习 3图片优化为所有产品图片添加有意义的alt属性使用width和height属性防止布局抖动检查图片加载失败时的降级显示常见误区 ⚠️误区真相“产品图不用写 alt”必须写alt 是图片的文字替身“规格用 div 排版”用table才是正确的表格数据就该用表格“价格直接写文字”用data value999让机器能读取“用户评价用 div 包”用article每条评价是独立的内容“blockquote 只能包一句话”可以包多段里面用p“产品特性用 p 并列”用ul列表更清晰有语义“caption 可以省略”不要省它是表格的标题利于可访问性“图片越大越好”要控制尺寸用 CSS 限制最大宽度速查卡片 产品展示页标签速查区域推荐标签导航navul产品标题h1产品图片figureimgfigcaption价格data value特性列表ul/ol规格表格tablecaptiontheadtbody用户评价articleblockquotecite相关产品aside页脚footer图片可访问性检查清单□ 所有 img 都有 alt 属性 □ alt 描述图片内容不是图片或xxx的图 □ 装饰性图片 alt □ 设置了 width 和 height 属性 □ 图片加载失败有文字提示扩展阅读MDN:figure和figcaptionMDN:table表格MDN:blockquote引用MDN:data数据图片 alt 属性最佳实践英文下一步第28篇实战响应式登录注册表单28-实战响应式登录注册表单.md综合运用表单标签搭建完整的登录注册页面。