单产品页应使用语义化标签构建骨架：<header>仅含品牌/标题，<main>包裹核心信息并线性排列，<footer>仅放版权；图片用<picture>+<source>控制宽高比；价格与按钮须硬编码进HTML；表单需保留action、method及name属性确保无JS可用。
用 <header> 和 <main> 快速组织页面骨架
单产品页不需要复杂导航或多级结构，但容易堆砌 <div> 导致语义混乱。浏览器和屏幕阅读器依赖语义标签理解内容层级，<header> 放品牌/标题，<main> 包住核心产品信息（图片、描述、价格、按钮），<footer> 只放版权或极简联系信息即可。
常见错误是把整个页面塞进一个 <div class="container"> 里，结果 SEO 工具抓不到主内容，移动端缩放也异常。别省略 <main> —— 它是 W3C 明确要求的可访问性必需标签。
-
<header>里只放<h1>（产品名）和可选 logo 图片，不要塞导航菜单 -
<main>内部按“图→文→价→按钮”线性排列，避免左右分栏（响应式会崩） - 不用
<section>或<article>套产品信息——单产品不是“一组内容”，<main>就够了
让图片不拉伸变形的关键：用 <picture> + <source> 控制宽高比
新手常直接丢一张大图进 <img src="product.jpg">，结果在手机上被压缩成饼状，或留白巨大。真正可控的方式是用 <picture> 配合 <source> 指定不同尺寸的裁剪版本，并通过 CSS 强制容器保持比例。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<picture> <source media="(max-width: 768px)" srcset="product-mobile.jpg" width="375" height="500"> <source srcset="product-desktop.jpg" width="800" height="1067"> <img src="product-desktop.jpg" alt="无线降噪耳机，银色款" loading="lazy"> </picture>
-
width和height属性必须写，否则浏览器无法预留空间，造成布局抖动 -
loading="lazy"要加，否则首屏加载慢（尤其带大图时） - 别依赖 CSS 的
object-fit: cover单独修复——它只是视觉裁剪，原始图仍被下载，浪费流量
价格和购买按钮必须脱离 JS 渲染
很多教程教用 JavaScript 动态插入价格或按钮，结果搜索引擎爬虫看不到价格，微信内嵌浏览器可能因 JS 加载失败导致按钮消失，用户点不了。
正确做法：价格用 <span class="price">¥299</span> 硬编码进 HTML；按钮用原生 <button type="button">立即购买</button> 或带 href 的 <a> 直达支付页。
- 如果价格要随规格变化（如颜色/容量），用
<select>+ 表单提交跳转，而不是 JS 切换 DOM - 按钮文案别写“点击下单”，写明确动作：“微信支付”“支付宝购买”
- 避免
<button onclick="buy()">——函数buy()一旦未定义或报错，按钮就完全失效
表单提交别碰 action 和 method 默认值
单产品页的联系方式或咨询表单，新手常删掉 <form> 的 action 属性，以为“先用 JS 提交就行”。结果用户禁用 JS 后表单点不动，或回车无法提交。
最简可靠方案：表单指向一个真实存在的后端接收地址（哪怕只是测试用的 https://httpbin.org/post），用 method="POST"（别省略），所有字段用 name 属性命名（如 name="email"）。
- 邮箱字段必须加
type="email"，iOS 键盘会自动切出 @ 符号 - 提交按钮用
<button type="submit">，不是<input type="button"> - 别给表单加
onsubmit="return false"来阻止默认行为——除非你已写好完整 fallback 提交逻辑
单产品页的成败不在特效，而在“用户能否在无 JS、弱网、旧手机上完成查看→确认→下单”这一条路径是否全通。任何一步断开，流量就流失了。
