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