如何使用<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？或者它们有其他用途？

Answer 1

我将简要概述这里涉及的内容。

元素abbr

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

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

也是关于如何使用它

HTML缩写元素()标识缩写和缩略语，以帮助不熟悉缩写的读者，并使屏幕阅读软件(由视障用户使用)能够适当地阅读文本。经验法则是，尽可能使用元素。

数据属性

HTML5允许使用不属于标准：数据属性的属性扩展元素。

HTML5的设计考虑到了数据的可扩展性，这些数据应该与特定元素相关联，但不需要有任何定义意义。数据-*属性允许我们存储关于标准、语义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中找到它。这样，您仍然可以在鼠标悬停上显示工具提示。