HTML 时间标签
- PHPz原创
- 2024-09-04 16:30:111065浏览
众所周知，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:
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:
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:
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:
Conclusion
Therefore, we learned how to work with the
以上是HTML 时间标签的详细内容。更多信息请关注PHP中文网其他相关文章！