HTML 时间标签

众所周知，HTML 在 Web 开发领域不断发展，是全球流行的标记语言。据说Web开发人员需要更新和了解HTML元素。在这篇文章中，我们将学习一些重要的标签，称为时间标签。对于人类来说，读取多种形式的日期/时间很容易，但是对于机器来说，解析到那时的并不容易。进来了。这次标签定义特定的时间段并指定特定网页的日期和时间。因此，它们非常有用并且代表了人类可读的标签。这种人类可读的格式是一种有价值的互联网协议格式。 HTML 5 支持标签，但 HTML 4.01 版本不支持。

时间可以通过以下方式定义：

• 持续时间
• 24小时正确时间
• 公历日期

随着时间进步的好处，网页更加结构化，使搜索引擎可以轻松阅读 HTML 代码，以分析网页上的想法以及开发事件调度和任何与时间相关的事件功能的好处。例如，在搜索引擎中与时事相关联，这有助于通过视觉时间事件对当前网页进行更高的排名。

语法：

<time> 2020-01-28 </time>

使用基本日期时间属性可以为时间标签提供唯一的特定格式，因为它适用于计算机。

从上面的语法来看，表示标签将时间、日期，甚至两者放在一起。预期格式为从最大周期到较小周期年-月-日 hh:mm:ss 时区。如果没有日期时间属性，则使用此格式。

属性

属性在 HTML 中扮演着重要的角色。通过此 HTML 元素，用户可以灵活地在其工作中添加日程安排日期，并在各自的日历上添加生日提醒；另一个好处是搜索引擎可以给我们带来更好的搜索结果。该时间元素支持全局和事件属性；除此之外，一个重要的属性是日期时间。要显示“星期一”等值，请表示“星期五”日期时间属性。

下表说明了与此元素相关的属性及其描述：

Attribute Name	Description
DateTime	It specifies a machine-readable input time of the element.
Pubdate	It has a Boolean value that Specifies the publication date of the content.

属性名称 描述 日期时间 指定元素的机器可读输入时间。 发布日期 它有一个布尔值，指定内容的发布日期。 表>

There are some different ways of representing the date-time attribute. The profile of ISO 8601 provides the standards which follow the ABNF notation. And the letters below ‘T’ and ‘Z’ should be declared in the Upper case.

1. Year and Month

Very Simple Format with the year before.

2019 – 08

2. Date Alone

1946-08-17

3. Date without Year

08-21

4. Only Time Display

13: 55: 30. 522

5. Date and Time

2014 – 08 -21T15:55

Here T is for separation between Date and Time.

6. Time Zone Format

It initiates with either plus or minus and, in some cases, ( : ) is replaced With the capital ‘Z’.

+ 08 : 05

7. Year and Week

Follow the corresponding number of weeks after the letter ‘W’ to represent a week.

2017 – W 20

8. Duration (with Two methods)

2w 3d 4 h 25 min 12.402s

Also, it supports global attribute along with this element like id, class, style and supporting event attributes like onabort, onfocus, onclick, onmousedown, onmouseout, onkeyup, onchange, ondrag, ondrop, onselect, onmessage, onscroll.

Examples to Implement HTML Time Tag

Using this tag, You can display the date or time without a datetime attribute. The following are some examples:

Example #1 – using a tag.

Code:

<title>
HTML Time Tag
</title>


<h2 id="HTML-Time-Tag-demo">HTML Time Tag demo</h2>
<p> India celebrate as
<time>2020-01-26</time> Republic day
</p>

Output:

Example #2

Making a time element to the title attribute to show detailed information about the user in a nice human-readable or machine-readable format.

Code:

<h2 id="center-Date-Time-Example-center"> <center> Date Time Example </center> </h2>
<h3 id="The-Stand-Up-Comedy-show-starts-at-time-datetime-T-Z-time-coming-Saturday">The Stand- Up Comedy show starts at <time datetime="2018-07-04T20:00:00Z">20:00</time> coming Saturday.</h3>
<h3 id="The-preview-show-starts-in-time-datetime-PT-H-M-S-h-m-s-time">The preview show starts in <time datetime="PT3H0M3S">5h 1m 0s</time>.</h3>

In the below Output, the time tag instructs the browser about the text used between the attribute is a time reference ( 5 h 1m 0s) but doesn’t display the time attribute.

Output:

Example #3 – Using Css.

Code:

<article>

<h1 id="Title-of-the-document">Title of the document</h1>
<p>Introduction to the Article</p>
</article>
<footer>
<p>This content is published on <time>2016-1-20</time>.</p>
<p>Our shop opens at <time>08:00</time>.</p>
</footer>

Output: 

Example #4 – Using pubdate attribute.

Code:

<article>
<h1 id="A-good-Article">A good Article</h1>
<p>Introduction on a given Article.</p>
<footer>
<p>Content published on <time datetime="2019-02-04" pubdate>February the 4th, 2019</time>
</p></footer>
</article>

Output:

Conclusion

Therefore, we learned how to work with the tag and also came to know how the web crawlers interpret the date and time on the web page. People started using the time tag in the HTML document as the usage of this tag increased in search engines. Using the date/time attribute, the browser clarifies the time, and some websites make their default time theme, like Reddit, word press, etc.

以上是HTML 时间标签的详细内容。更多信息请关注PHP中文网其他相关文章！