html - 如何使用 显示日期(来自 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 的目的是什么？

在 Google 中搜索它们时，我看到了一些关于 JavaScript/JQuery 的页面:这些参数是否旨在仅与 JavaScript 一起使用？或者它们有其他用途？

Answer 1

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

元素abbr

abbr是一个有效的 HTML5 元素，它只有一个属性:title .至于MDN documentation :

HTML provides a simple, straightforward way to mark abbreviations to make sure that readers can understand them.

还有关于 how to use it :

The HTML abbreviation element () identifies abbreviations and acronyms, to help readers who aren't familiar with the abbreviation and enable screen-reading software (used by visually-impaired users) to read the text appropriately. The rule of thumb is, use the element whenever possible.

数据属性

HTML5 允许使用不属于标准的属性扩展元素:data attributes :

HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as classList, non-standard attributes, extra properties on DOM, or setUserData.

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

更好地使用 <time>

正如一些人在评论中指出的那样，使用 abbr为此目的，日期不是 100% 正确，因为其他标签可用于 HTML5 中的此类目的。他们本可以使用类似 this 的东西:

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

因为它提供了更好的语义，并且在不需要数据属性的情况下也达到了拥有详细时间版本的目标 data-utime提供机器可读的时间戳。

在工具提示中显示 还要记住 title是 global attribute .所以你可以在 time 中找到它以及。通过这种方式，您仍然可以在鼠标悬停时显示工具提示。