日期、数字和名字

如何显示日期、数字、金额、名字和地址，以及哪些容易被搞混。

每个示例都能真实操作，但其中的链接不会跳转到任何地方。

日期和时间

把日期放进 <time> 标签，并附上一份计算机能读的写法。日期本身按你的读者习惯的样子写。rastrillo 不会替你格式化。

桌面手机 HTML

<section rst-box>
  <dl rst-detail>
    <dt>已发布</dt>
    <dd>
      <time datetime="2026-08-02">2026年8月2日</time>
    </dd>
  </dl>
</section>

某件事花了多久

时长也用 <time>。计算机能读的写法看起来有点怪：PT2H30M 表示 2 小时 30 分钟。

桌面手机 HTML

<section rst-box>
  <dl rst-detail>
    <dt>构建用时</dt>
    <dd>
      <time datetime="PT2H30M">2小时30分</time>
    </dd>
  </dl>
</section>

数字

给长数字分组，让人一眼就能读出来：英文写 54,173，德文写 54.173，阿拉伯文写 ٥٤٬١٧٣。不要把长数字直接写成一串数字。在表格里用等宽的数字，这样各列才能对齐。

桌面手机 HTML

<div rst-stats>
  <div rst-stat>
    <span rst-stat-label>会员</span>
    <span rst-stat-num>54,173</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>消息</span>
    <span rst-stat-num>1,284,902</span>
  </div>
</div>

金额

把每个金额存成该货币最小单位的整数，比如分，旁边放上货币代码。用 `money` 来显示，它会按读者所用语言的写法来写。货币永远来自你的数据，绝不来自读者。

桌面手机 HTML

<section rst-box>
  <dl rst-detail>
    <dt>EUR</dt>
    <dd>€1,284.50</dd>
    <dt>JPY</dt>
    <dd>JP¥1,285</dd>
    <dt>KWD</dt>
    <dd>KWD 1,284.500</dd>
  </dl>
</section>

百分比和进度条

用 <meter> 表示某样东西有多满，用 <progress> 表示一项工作进行到哪里。永远把数字写在条子旁边。一根条子本身对看不见的读者什么也没说。

桌面手机 HTML

<div rst-box-head>
  <h2>照片存储</h2>
</div>
<section rst-box>
  <span rst-meter>
    <meter rst-meter-bar value="82" min="0" max="100" aria-hidden="true"></meter>
    <span rst-meter-num>412 / 500</span>
  </span>
</section>
<div rst-box-head>
  <h2>导入</h2>
</div>
<section rst-box>
  <div rst-job>
    <span rst-spin aria-hidden="true"></span> <strong>导入</strong> 正在运行：400 中的 128…<progress rst-job-bar value="32" min="0" max="100" aria-hidden="true"></progress>
  </div>
</section>

文件大小

显示一个取整后的大小，比如 4 MB，把精确的字节数放进 <data> 标签。屏幕阅读器读的是屏幕上的内容，会忽略这个标签，所以取整后的大小本身就得够用。

桌面手机 HTML

<section rst-box>
  <dl rst-detail>
    <dt>导出文件</dt>
    <dd>
      <data value="4194304">4 MB</data>
    </dd>
  </dl>
</section>

编号和代码

这些不要分组。是订单 4471，不是订单 4,471。年份、版本号和端口号也一样。用 rst-mono 让它们看起来像代码，并且永远不要把它们放进 <time> 标签，哪怕它长得像日期。

桌面手机 HTML

<section rst-box>
  <dl rst-detail>
    <dt>编号</dt>
    <dd class="rst-mono">post_01H9ZQ</dd>
    <dt>订单</dt>
    <dd class="rst-mono">4471</dd>
  </dl>
</section>

人名

名字可以是任何语言，包括从右往左读的语言。当名字出现在一行的中间时，用 <bdi> 把它包起来，否则它会把周围的文字顺序弄乱。要显示名字并在旁边配一张头像，就用 person。

桌面手机 HTML

<div rst-card style="--rst-cols: minmax(0, 1fr) 120px">
  <div rst-lrow>
    <a class="rst-nm" href="/people/1"><bdi>Grace Hopper</bdi>
      <small>
        <bdi>grace@example.com</bdi> · 09:12</small>
    </a>
    <span class="rst-cell-mut rst-m-hide">管理员</span>
  </div>
</div>

地址

<address> 标签不是用来写邮寄地址的。它是用来说明这个页面是谁写的。收货地址就是普通文字。员工名单就是一个列表。

桌面手机 HTML

<section rst-box>
  <address>作者：<bdi>Grace Hopper</bdi> · <a href="mailto:grace@example.com">grace@example.com</a></address>
</section>
<section rst-box>
  <dl rst-detail>
    <dt>收货地址</dt>
    <dd>42 Wharf Road, Dublin 2</dd>
  </dl>
</section>

像 WCAG 这样的缩写

<abbr> 标签在你把鼠标悬停上去时会显示完整说法。这在手机上没用，屏幕阅读器也常常跳过它。第一次出现时，还是要把完整的字写出来。

桌面手机 HTML

<section rst-box>
  <p>这里的每个页面都符合《Web 内容无障碍指南》（<abbr title="Web 内容无障碍指南">WCAG</abbr>）2.2 的 AA 级要求。</p>
</section>

页面自己算出来的数字

当你的页面把东西加起来时，把结果放进 <output> 标签。比如累计合计、换算后的价格、倒计时。

桌面手机 HTML

<section rst-box>
  <form rst-form>
    <div rst-field>
      <label rst-field-label for="seats">座位</label>
      <input rst-input="short" id="seats" name="seats" type="number" value="12">
    </div>
    <p>合计 <output for="seats" name="total">$144.00</output></p>
  </form>
</section>