关键在父容器用 display: flex + align-items: flex-start；图片侧固定宽+max-width:100%+height:auto，文字侧用 flex:1；价格与按钮须语义包裹于同一容器；alt需具体描述而非“商品图1”；图文折叠须用而非display:none。
商品主图与文字怎么用 flex 对齐不崩
图片和描述文字左右不对齐、间距忽大忽小，本质是容器没控住关系，不是靠 margin 硬调就能解决的。关键在父容器用 display: flex + align-items: flex-start，而不是 center 或 stretch。
常见错误：给图片加 float: left，或外层多套一层 div 导致 margin/padding 叠加；文字侧用 width: 50% 而非 flex: 1，结果小屏下溢出或留白过大。
- 图片侧固定宽度（如
width: 480px），同时必须加max-width: 100%和height: auto，否则移动端会撑破容器 - 文字侧用
flex: 1，不是flex: 1 1 auto这种冗余写法；内部h2、p、ul首行统一设margin-top: 0 - 移动端直接切方向：
@media (max-width: 768px) { flex-direction: column; }，别试图用 JS 切 class
价格和购买按钮为什么不能散放在不同 div 里
价格和按钮物理位置分离，会导致 JS 控制库存状态时逻辑断裂——比如缺货时按钮禁用，但价格仍可点击或动画错位。结构上它们属于同一决策单元，必须语义包裹。
典型反例：价格在 div.product-price，按钮在 div.action-bar，中间还隔着一个广告位 div.banner。这种布局让 data-sku-id 同步、无障碍焦点流、SEO 结构化数据都难以保障。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
section或带role="region"的容器包住价格和按钮，例如<section aria-label="购买信息"><span itemprop="price">¥199</span><button type="button" data-sku-id="123">加入购物车</button></section> - 价格数字单独用
span包裹，方便后续加微交互动画或动态更新 - 按钮必须带
type="button"，避免意外触发表单提交；禁用态要同时设pointer-events: none+cursor: not-allowed，光靠opacity不够
alt 属性写成 "商品图1" 会带来什么实际后果
不是“影响 SEO”这种模糊说法，而是具体到两个真实问题：读屏器用户听到的是无效噪音，搜索引擎可能把该图判定为装饰性内容而忽略其关联的商品实体。
比如用户用 VoiceOver 访问页面，听到 “商品图1”、“商品图2”，完全无法判断哪张是正面、哪张是细节特写；Google 抓取时发现大量重复、无信息量的 alt，会降低该页面在“Apple AirPods Pro 第二代”关键词下的可信度权重。
- 商品主图必须写具体描述，例如
alt="Apple AirPods Pro 第二代, 白色, 主动降噪, 入耳式无线耳机, 正面佩戴效果图" - 纯装饰图（如分割线、背景花纹）才用
alt=""；轮播切换按钮、缩略图指示器等交互元素不用alt，而应通过aria-label说明功能 - 如果图片含文字信息（如参数对比图），
alt里要复述关键数据，不能只写“参数图”
图文详情模块用 display: none 折叠为什么危险
用 style="display: none" 控制展开收起，表面看功能正常，实则破坏可访问性和 SEO 基础。屏幕阅读器仍会读出全部内容，用户无法跳过；搜索引擎可能视其为隐藏文本而降权，尤其当折叠内容占比超过页面 60% 时。
更麻烦的是，这种写法会让键盘用户 Tab 焦点陷入不可见区域，按一次 Tab 就“消失”一秒，体验极差。
- 必须用原生
<details><summary></summary></details>，它自带键盘支持（Enter/Space 触发）、语义明确、无需额外 JS -
<summary></summary>里写操作意图，例如<summary>查看详细参数</summary>，而不是“点击展开” - 如果需要兼容 IE 或旧版 Safari，可用
aria-expanded+aria-hidden手动模拟，但优先走原生方案
真正难的不是写对某个标签，而是所有模块之间是否能形成一致的语义链路：图片 alt 描述了什么，<details></details> 里展开的内容是否和它呼应，价格 span 是否被包裹在同一个 itemprop="offers" 容器里。漏掉一环，整页的可访问性、SEO、JS 状态管理就都容易出岔子。
