价目表应优先使用 ：因其多列对齐、语义清晰、无障碍友好；单列价格可用 或 ；需用 data-price 标注数值，aria-label 用于操作按钮；响应式推荐堆叠卡片布局，避免横向滚动。
HTML 本身不收费，也不提供服务定价能力——价目表只是静态展示，真要“收费”得靠后端系统、支付接口和业务逻辑，HTML 只负责把价格写清楚、让用户看明白。
价目表该用 <table> 还是 <code><dl></dl>？
多数场景下，<table> 更合适：价格项通常有“服务名称｜周期｜价格｜说明”多列对齐需求，语义清晰、屏幕阅读器友好、CSS 控制列宽/响应式也成熟。用 <code><dl></dl>（定义列表）容易让价格和描述脱节，尤其当服务项带多个参数（如“基础版｜年付｜¥299｜含 5 个子账号”）时，<dt></dt>/<dd></dd> 难以结构化表达。
- 避免用
<div> + CSS 模拟表格——丧失语义，不利于 SEO 和无障碍访问 <li>如果只有单列价格（如“会员 ¥19/月”），<code><p></p>或<ul></ul>足够，不必硬套<table><li>注意 <code><thead> 和 <code><tbody> 分离，方便 JS 动态更新价格或加「推荐」标签 <h3> <code>aria-label和data-price哪些地方必须加？纯 HTML 价目表没法自动校验价格有效性，但前端交互（比如选配置后算总价）需要可靠的数据源。
data-price是最直接的标记方式；而aria-label主要用在按钮或链接上，比如「立即订购」按钮，得明确告诉读屏软件“订购基础版 ¥299/年”，不能只写“立即订购”。-
data-price放在每行<tr> 或对应 <code><td> 上，值用数字（如 <code>data-price="299"），别带单位或符号 - 价格单元格本身不用
aria-label，它已是文本；但操作按钮、切换周期的 radio/switch 必须配aria-label - 避免用
title属性显示价格——鼠标悬停才出现，移动端不可见，且不被所有读屏器读取 - 桌面端用
display: table或grid-template-columns固定列数；移动端用grid-template-rows或flex-direction: column - 别依赖
overflow-x: auto包裹<table>——iOS Safari 对内部滚动支持差，且手势冲突 <li>“最畅销”“推荐”角标用 <code><span></span>+ 绝对定位，确保缩放时仍贴在右上角，别用 background-image
响应式价目表在小屏上怎么不乱？
横向滚动不是好解法，用户讨厌左右拖动看价格。优先用“堆叠式布局”：把每项服务转为垂直卡片，标题、周期、价格、功能点逐行排列。CSS Grid +
@media是目前最可控的方式。真正难的不是写 HTML，而是价格变更时如何同步——前端硬编码价格，运营改价就得发版；更常见的坑是没留“价格已过期”或“咨询销售”兜底入口，用户看到旧价却无法下单，反而流失。
-
