关联推荐专区必须紧贴主商品信息下方，置于 product-main 后、独立 section 中；须用语义化 article 包裹商品卡片，添加 itemprop、tabindex 和 lazy 加载；服务端仅输出骨架，客户端动态渲染；窄屏下采用可滚动 flex 布局确保单列展示。
关联推荐专区该放在商品详情页什么位置
必须紧贴主商品信息下方，但不能嵌在 product-description 或 price-section 的 DOM 内部。浏览器滚动锚点、SEO 抓取和移动端首屏加载都依赖这个结构顺序。常见错误是把它塞进 aside 或页面最底部，导致用户滑到底才看到，转化率直接掉 60% 以上。
推荐结构：
<main class="product-page">
<section class="product-main">...</section>
<section class="related-products" aria-label="你可能还喜欢">
<h2>猜你喜欢</h2>
<div class="product-grid"></div>
</section>
</main>用语义化 HTML 实现可访问且 SEO 友好的商品卡片
每个推荐商品必须用 <article></article> 包裹，不能只用 <div>。屏幕阅读器靠这个识别独立内容单元，Google 也据此判断是否为“推荐内容”而非广告噪声。<p>关键属性不能少：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>
<code>itemprop="suggestedProduct"（配合 itemscope itemtype="https://schema.org/Product"）提升结构化数据得分
tabindex="0" 加在卡片根元素上，确保键盘用户能聚焦到整张卡片（不是只聚焦图片或链接）loading="lazy" 必须加在 <img alt="怎么用HTML为商品详情页设计关联推荐专区" > 上，否则首屏卡顿明显；但不要加在父容器上——loading 属性对 <section></section> 无效避免 SSR 和 CSR 混合时的 DOM 不一致报错
如果前端用 React/Vue 渲染推荐区，而服务端已输出静态 HTML 卡片，hydration 阶段极易报 Text content does not match server-rendered HTML。根本原因是服务端没渲染价格符号、库存状态等动态字段，而客户端补全后 DOM 对不上。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
稳妥做法：
- 服务端只输出骨架：固定尺寸的
<img alt="怎么用HTML为商品详情页设计关联推荐专区" >占位符 +<span class="skeleton-text"></span>，不写任何真实文本 - 客户端 JS 加载完再 fetch 推荐数据并
replaceWith()整个.product-grid - 禁止在服务端模板里拼接
${price} 元这类字符串——统一由客户端格式化，保持两端逻辑一致
响应式网格在窄屏下必须保证单列且可滑动
很多团队用 display: grid 写四列布局，但在 iPhone SE 上直接挤成两行、文字折行、CTA 按钮被切掉。这不是 CSS 问题，是 HTML 结构没预留滑动能力。
正确解法是放弃纯 grid，改用带容器滚动的 flex 布局：
<div class="product-grid" style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
<div style="display: flex; gap: 12px; padding: 8px 0;">
<article class="product-card">...</article>
<article class="product-card">...</article>
<!-- 更多卡片 -->
</div>
</div>注意：-webkit-overflow-scrolling: touch 在 iOS Safari 上影响巨大，缺了它滑动会卡顿；gap 不能设在容器上（旧版 Safari 不支持），必须设在子容器 flex 内部。
别忘了给卡片加 flex-shrink: 0，否则小屏下会被压缩变形。
