HTML 时间标签

PHPz
发布: 2024-09-04 16:30:11
原创
1027 人浏览过

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

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

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

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

语法:

<time> 2020-01-28 </time>
登录后复制

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

从上面的语法来看,

属性

属性在 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

Code:

<!DOCTYPE html>
<html>
<head>
<title>
HTML Time Tag
</title>
</head>
<body style="text-align:left;">
<h2>HTML Time Tag demo</h2>
<p> India celebrate as
<time>2020-01-26</time> Republic day
</p>
</body>
</html>
登录后复制

Output:

HTML 时间标签

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:

<!DOCTYPE html>
<html>
<body>
<h2> <center> Date Time Example </center> </h2>
<h3>The Stand- Up Comedy show starts at <time datetime="2018-07-04T20:00:00Z">20:00</time> coming Saturday.</h3>
<h3>The preview show starts in <time datetime="PT3H0M3S">5h 1m 0s</time>.</h3>
</body>
</html>
登录后复制

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:

HTML 时间标签

Example #3 – Using Css.

Code:

<!doctype html>
<html>
<body>
<article>
<body style="background-color:yellow;">
<h1>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>
</body>
</html>
登录后复制

Output: 

HTML 时间标签

Example #4 – Using pubdate attribute.

Code:

<!DOCTYPE html>
<html>
<body>
<article>
<h1>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>
</footer>
</article>
</body>
</html>
登录后复制

Output:

HTML 时间标签

Conclusion

Therefore, we learned how to work with the

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

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板