如何使用<abbr>标签显示日期（以Facebook为例）

Question

为了显示自发布帖子以来流逝的时间，Facebook使用以下方式中的 标签：

<abbr title="Martedì 28 luglio 2015 alle ore 15.44"
      data-utime="1438091078"
      data-shorten="1"
      class="_5ptz timestamp livetimestamp">18 min</abbr>

我的问题是： data-utime 和 data-shorten 的目的是什么？

在谷歌上搜索它们，我看到一些页面提到了 JavaScript/JQuery：这些参数只是用于 JavaScript 吗？还是它们有其他用途？

- Aerendir

---

考虑到他们正在使用自定义数据属性，他们真的不应该使用HTML4的<abbr>习语，而是应该使用HTML5的<time>元素来标记时间... [但这不关我的事。] (http://knowyourmeme.com/memes/but-thats-none-of-my-business) - BoltClock

Answer 1

我将提供一个简要概述，介绍这里涉及的内容。

元素abbr

abbr是一个有效的HTML5元素，它只有一个属性：title。根据MDN文档：

HTML提供了一种简单、直接的方式来标记缩写，以确保读者能够理解它们。

还有关于如何使用它的说明：

HTML缩写元素(<abbr>)识别缩写和首字母缩略词，帮助不熟悉缩写的读者，并使屏幕阅读软件(用于视觉障碍用户)适当地阅读文本。经验法则是尽可能使用该元素。

数据属性

HTML5允许通过属性扩展元素，这些属性不是标准的：数据属性：

HTML5的设计考虑到了与特定元素相关联的数据的可扩展性，但不需要有任何定义的含义。data-*属性允许我们在标准的语义化HTML元素上存储额外的信息，而无需使用其他技巧，如classList、非标准属性、DOM上的额外属性或setUserData。

所以基本上，data-utime和data-shorten是Facebook和其他模块用来显示关于日期的更详细描述的一种方式。

更好地使用<time>

正如一些评论中指出的那样，对于日期来说，使用abbr并不是100%正确的，因为在HTML5中可以使用其他标签来实现这个目的。他们可以使用像这个：

<time datetime="2015-07-28 15:44">Martedì 28 luglio 2015 alle ore 15.44</time>

由于它提供更好的语义，而且无需使用数据属性data-utime来提供机器可读的时间戳，因此可以实现对时间的详细版本。

在工具提示中显示 还要记住，title是一个全局属性。因此，您也可以在time中找到它。这样，您仍然可以在鼠标悬停时显示工具提示。

- Andry

---

好的，一切都清楚了。我使用了这个解决方案：<abbr title="{{ order.added }}"><time datetime="{{ order.added }}">{{ order.daysAgo }} fa</time></abbr>，因为单独的 time 标签不允许鼠标悬停在日期上以查看精确格式化的日期。 - Aerendir

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Andry