html制作农产品电商页面_html农产品展示与下单页面开发【进阶】-html教程-PHP中文网

正确做法是用+srcset按设备像素比和视口宽度自动选图，input[type="number"]设min/max/step防误输，localstorage存取购物车需初始化默认值并实时保存，表单提交应绑定submit事件并preventdefault。

html制作农产品电商页面_html农产品展示与下单页面开发【进阶】

用 `<picture></picture>` + `srcset` 加载不同尺寸的农产品图

手机看草莓特写要高清，桌面看整页九宫格又不能拉伸模糊——硬塞一张 4K 图只会拖慢首屏。直接写 <img src="strawberry.jpg"> 是最常见也最伤体验的做法。

正确做法是让浏览器按设备像素比和视口宽度自动选图：

<picture><source media="(max-width: 768px)" srcset="strawberry-400w.jpg 1x, strawberry-800w.jpg 2x"><source media="(min-width: 769px)" srcset="strawberry-800w.jpg, strawberry-1200w.jpg 2x">
  @@##@@
</source></source></picture>

<source></source> 的 media 控制断点，srcset 中的 2x 对应高 DPI 屏幕（如 iPhone、MacBook）
必须保留 <img src="strawberry-800w.jpg" alt="新鲜草莓"> 作为降级兜底，否则不支持 <picture></picture> 的老浏览器会空白
图片命名建议带宽信息（如 -400w）便于识别，避免用 @2x 这种 iOS 专属习惯

用 `input[type="number"]` 实现“限购 5 件”的下单数量控制

用户手动输 999 然后提交，后端才校验超限？这已经晚了。前端限制不是防恶意，而是防误操作+减少无效请求。

别只靠 JS 绑定 change 事件监听，原生属性更稳：

<input type="number" min="1" max="5" value="1" step="1" name="quantity" aria-label="购买数量，最多5件">

min/max 会禁用上下箭头越界、阻止键盘输入非法值（Chrome/Firefox 均生效）
必须加 step="1"，否则 Safari 允许输小数（比如 1.5 斤苹果？不合理）
注意：iOS Safari 的 type="number" 会唤起数字键盘但不强制校验，仍需 JS 补充 blur 时修正（例如输 6 自动截为 5）

用 `localStorage` 缓存购物车，但避开“页面刷新后清空”陷阱

用户加了 3 款蔬菜进购物车，切到详情页再返回，购物车空了？大概率是每次初始化都重置了数组，而不是读取已有数据。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

关键不在存，而在“怎么读”和“何时存”：

const cart = JSON.parse(localStorage.getItem('farm-cart') || '[]'); // 注意默认值是字符串'[]'

必须用 || '[]'，不能写 || []，否则 JSON.parse(undefined) 报错
修改后立即存：localStorage.setItem('farm-cart', JSON.stringify(cart))，不要等提交才存——关掉标签页就丢了
避免存 DOM 节点或函数，只存纯对象/数组；农产品字段建议固定为 {id, name, price, quantity}，别混入 imgUrl 等冗余字段

用 `button[type="submit"]` 触发表单，而非 `onclick` 调用 JS 提交

点击“立即下单”没反应？查控制台发现 Uncaught TypeError: submitOrder is not defined——因为把 JS 函数名写错了，或者 script 加载顺序不对。这种错误本可避免。

表单提交逻辑应绑定在语义化行为上：

JS 里用 document.getElementById('order-form').addEventListener('submit', handleSubmit)
这样即使 JS 加载失败或报错，按钮依然能触发表单默认行为（比如跳转到 PHP 处理页）
务必在事件回调中调用 event.preventDefault()，否则页面会刷新——这是新手最常漏的一行

农产品页面的交互链路短但容错要求高：图得清、数得准、车得留、单得发出去。每个环节的“默认行为”和“降级路径”比炫技更重要。