纯静态HTML展示银行理财列表需硬编码数据，用table语义化展示固定字段，收益率须标注“业绩比较基准”并添加aria-label，起购金额写“10000元起”，期限写“35天”，移动端需设table-layout:fixed及列宽，禁用user-scalable=no。
怎么用 HTML + 纯静态结构展示银行理财列表
纯 HTML 无法动态拉取真实理财产品数据，也不能计算实时年化收益或做风险评级。所谓“收益对比”，只能是静态展示——你得自己填好 产品名称、预期年化收益率、起购金额、期限、风险等级 这些字段，然后用表格或卡片排版。浏览器不执行后端逻辑，fetch() 也拿不到银行内部 API（CORS 和鉴权会直接拦住）。
常见错误现象：Failed to fetch、空白表格、收益率数字对不齐、移动端错行。根源往往是把「设计稿当功能」，误以为写个 <table> 就等于有数据服务。
<ul>
<li>所有产品数据必须硬编码在 HTML 中，或通过 <code>JSON 文件本地加载（需同源，且无跨域权限时用 file:// 打开会失败）
<tr> 加 <code>onclick="location.href='...'" 就当做了跳转详情页——那只是链接，不是“产品页”
3.8%-4.2%，就别再用 <meter></meter> 强行可视化——它只接受数字，<meter value="3.8" min="0" max="5"></meter> 才合法用表格还是 Flex / Grid 做收益对比更稳妥
表格（<table>）语义正确、屏幕阅读器友好、打印样式天然对齐，适合横向对比固定字段（比如 5 款产品 × 6 个指标）。但一旦要加「高亮最高收益」「按风险等级筛选」，就得配 JS，而纯 HTML 做不了。
<p>Flex 或 Grid 更适合卡片式布局（每款产品一个 <code><article></article>），视觉灵活，响应式容易控制，但列对齐靠 min-width 或 grid-template-columns 硬约束，稍不注意在小屏上就错位。
立即学习“前端免费学习笔记（深入）”；
- 如果只做静态展示且字段少（≤4 列），用
<table>：表头用 <code><th>，数值右对齐加 <code>style="text-align: right;" - 如果要突出某款产品（如“推荐”角标），用
<div class="product-card"> + <code>grid，但必须为grid-template-columns设定明确值，例如repeat(auto-fit, minmax(280px, 1fr)) - 避免在
<td> 里塞 <code><div style="display: flex"> —— 表格单元格不是布局容器，嵌套 display 会破坏语义和可访问性 <h3>收益数字怎么写才不误导用户</h3> <p>银行理财页面最常踩的坑，是把「业绩比较基准」当「预期收益率」，还加粗放大。HTML 不管内容合规性，但你写的每个 <code><span class="yield">4.15%</span>都可能被截图传播。监管要求必须同步标注「不承诺保本保收益」，且「业绩比较基准」不能出现在标题或按钮文案中。- 收益率字段必须包裹在
<small></small>或带aria-label的<span></span>里，例如：<span aria-label="业绩比较基准 3.90% 至 4.20%">3.90%-4.20%</span> - 起购金额统一用「1元起」或「10000元起」，别写「¥10,000.00」——逗号是千分位分隔符，不是货币符号；真要格式化，得用 JS 的
Intl.NumberFormat，HTML 本身不处理 - 期限写「35天」比「约1个月」更准确；「T+0」赎回要单独加
class="t0"样式，不能只靠文字描述
为什么加了
meta name="viewport"还在手机上看不清因为很多开发者只加了
<meta name="viewport" content="width=device-width, initial-scale=1">，却没处理表格列宽或字体缩放。手机横屏时，<table> 默认撑满 viewport，但列内文字不会自动换行，导致横向滚动或文字溢出。 <ul><li>给表格加 <code>style="width: 100%; table-layout: fixed;"，再为每列<th> 设 <code>width（如width: 15%），强制等比压缩 - 收益率字段必须包裹在
- 关键字段（如收益率）用
<abbr title="业绩比较基准">业绩基准</abbr>缩写，配合font-size: 0.85em控制移动端字号 - 禁用用户缩放（
user-scalable=no）是违规的，尤其金融类页面——iOS Safari 会忽略该属性，但安卓部分浏览器可能报错或降权
真正难的不是写出来，是写出来的页面敢不敢放生产环境：没有后端校验，所有「年化收益」「风险等级」都靠人工维护，错一个数，法律文本就可能失效。静态页可以展示逻辑，但不能替代银行系统的真实数据流。
