订单基本信息应使用语义化标签：用组织字段，订单号用，时间用，状态加class；商品列表用配合；地址用；总计栏用flex布局并分离货币符号与数字。
订单基本信息区域怎么用语义化标签组织
订单号、下单时间、状态这些字段不能全用 <div> 堆砌，否则不利于可访问性和 SEO。优先用 <code><dl></dl>（定义列表）——<dt></dt> 放字段名，<dd></dd> 放值，既结构清晰又天然支持屏幕阅读器。
常见错误是把状态用纯文字写死，比如 “已发货”，结果后续要加状态徽章或颜色区分时得重写 HTML。正确做法是给 <dd></dd> 加 class，例如：<dd class="order-status status-shipped">已发货</dd>，再用 CSS 控制样式。
- 订单号建议包裹在
<code>标签里，语义更准确：<dd><code>ORD20240517001 - 时间字段用
<time></time>标签并带上datetime属性：<time datetime="2024-05-17T14:22:36+08:00">2024-05-17 14:22</time> - 避免用
<table> 布局这类信息——它不是二维数据，只是垂直排列的键值对 <h3>商品列表怎么保证响应式且不破坏语义</h3> <p>商品项必须用 <code><ul></ul>+<li>，而不是一堆<div>。每个 <code><li>内部用<figure></figure>包图片、<figcaption></figcaption>或<div> 包名称/规格/单价/数量/小计，结构干净。 <p>移动端常犯的错是给每个商品项加固定高度或硬编码 <code>width: 33.333%实现三列，结果在小屏上溢出或换行错乱。应该用 Flexbox 或 CSS Grid，并设置flex-wrap: wrap或grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))。- 图片必须带
alt属性，哪怕只是alt="商品：iPhone 15 Pro"，不可为空 - 单价和小计数字建议用
<span class="price"></span>包裹，方便统一控制字体、对齐和货币符号位置 - 数量显示别用纯文本 “×2”，应拆成
<span class="quantity">2</span>，便于后续加增减按钮逻辑
收货地址和配送信息如何避免冗余 DOM
地址字段容易写成 5–6 个独立
<p></p>，但实际它是单条结构化数据。推荐用@#@#@#@#@#@#@#@#@#@0，iOS/Android 点击可直呼 - 图片必须带
- 避免把省市区写成一个字符串塞进单个
<p></p>，否则无法单独样式化或做地区筛选 - 所有金额数字建议用
<span class="price-final"></span>这类语义 class，别只用font-weight: bold应对 - 避免用
<h3></h3>包 “订单总计”，它不是标题层级，而是内容摘要，用<strong></strong>或<div> 即可 <li>如果页面可能打印，记得加 <code>@media print规则隐藏无关按钮，保留金额行内样式
总计栏为什么不能只靠 float 或 margin 拉右边
总价、优惠、实付这些关键金额必须视觉对齐右边界，但用 float: right 或 margin-left: auto 在复杂嵌套中极易失效。最稳的方式是父容器设 display: flex + justify-content: space-between，金额项用 <span></span> 并设 text-align: right 或 margin-left: auto。
更隐蔽的问题是金额单位（如 “¥”）和数字混在同一个文本节点里，导致无法单独调整字号或颜色。应该拆开：<span class="currency">¥</span><span class="amount">2999.00</span>。
最易被忽略的是金额的数字格式——前端直接拼接字符串 “2999.00” 很危险，后端返回整数分（299900）才可靠。HTML 里只负责展示，不负责计算。
