商品列表须用语义化html：每件商品用包裹，商品名用或，属性用，价格用配合，库存用，图片需width/height+loading="lazy"+具体alt，分类筛选用:target伪类实现纯css显隐。
用语义化 HTML 结构组织商品列表，别堆
宠物店页面不是靠一堆 <div> 堆出来的。浏览器和屏幕阅读器需要知道哪块是商品、哪块是标题、哪块是价格——所以必须用 <code>@#@#@#@#@#@#@#@#@#@0」后，只有 <section id="dog-toys"></section> 内的商品可见。
- 所有商品默认
display: none；:target > article设为display: block - 首页加载时，让全部商品可见：用
section:not(:target) > article或单独设id="all"并默认激活 - 注意 Safari 对
:target的兼容性没问题，但不要嵌套太深，否则选择器失效 - 如果要支持 URL 分享（比如直接打开
shop.html#cat-litter），这个方案比 JS 切换更可靠
商品卡片里价格、库存、按钮的 HTML 写法有坑
价格不是普通文本，库存状态不是随便加个红色字就完事。搜索引擎和购物插件会抓取 itemprop、content 这类属性，没写等于白搭。
错误示范：<p>¥89</p> —— 机器看不懂这是价格；<span>库存紧张！</span> —— 无法被比价工具识别。
- 价格必须用
<meta>标注数值：<meta itemprop="price" content="89.00"> <span class="price">¥89.00</span> - 库存状态用
itemprop="availability"+href值：<link itemprop="availability" href="https://schema.org/InStock"> - 「加入购物车」按钮用
<button type="button"></button>，别用<a></a>，避免误触发跳转 - 商品链接（点进去看详情）必须用
<a href="product.html?id=123"></a>，且id参数保持简洁可读
移动端图片懒加载和宽高比控制得提前写死
宠物用品图常尺寸不一，直接放会导致页面抖动（layout shift），影响 CLS（核心 Web 指标）。不用 JS 库也能稳住：用 loading="lazy" + width/height + aspect-ratio。
错误做法：只写 <img>，等图片下载完才撑开空间，用户滚动时突然上移。
-
<img src="x.jpg">—— 浏览器按宽高预留位置 - CSS 补一层
img { aspect-ratio: 1 / 1; object-fit: cover; }，适配不同图源 - 别信「响应式图片用
<picture></picture>就够了」——没有宽高属性，<picture></picture>同样会抖 - 如果后端返回的是原始大图，至少用
<img src="toy.jpg" style="max-width:90%" style="max-width:90%" loading="lazy" alt="...">配合sizes
最易被忽略的其实是 alt 文本和 itemprop 的一致性：同一款猫砂，图片 alt 写「膨润土猫砂 6L」，而 itemprop="name" 写「强力除臭猫砂」，搜索引擎会认为这是两个商品。
