眾所周知，HTML 在 Web 開發(fā)領域不斷發(fā)展，是全球流行的標記語言。據(jù)說Web開發(fā)人員需要更新和了解HTML元素。在這篇文章中，我們將學習一些重要的標籤，稱為時間標籤。對於人類來說，讀取多種形式的日期/時間很容易，但是對於機器來說，解析到那時的並不容易。進來了。這次標籤定義特定的時間段並指定特定網(wǎng)頁的日期和時間。因此，它們非常有用並且代表了人類可讀的標籤。這種人類可讀的格式是一種有價值的網(wǎng)際網(wǎng)路協(xié)定格式。 HTML 5 支援標籤，但 HTML 4.01 版本不支援。
時間可以用以下方式定義：
隨著時間進步的好處，網(wǎng)頁更加結(jié)構化，使搜尋引擎可以輕鬆閱讀 HTML 程式碼，以分析網(wǎng)頁上的想法以及開發(fā)事件調(diào)度和任何與時間相關的事件功能的好處。例如，在搜尋引擎中與時事相關聯(lián)，這有助於透過視覺時間事件對當前網(wǎng)頁進行更高的排名。
文法：
<time> 2020-01-28 </time>
使用基本日期時間屬性可以為時間標籤提供唯一的特定格式，因為它適用於電腦。
從上面的語法來看，
屬性
屬性在 HTML 中扮演著重要的角色。透過此 HTML 元素，使用者可以靈活地在其工作中添加日程安排日期，並在各自的日曆上添加生日提醒；另一個好處是搜尋引擎可以為我們帶來更好的搜尋結(jié)果。此時間元素支援全域和事件屬性；除此之外，一個重要的屬性是日期時間。若要顯示「星期一」等值，請表示「星期五」日期時間屬性。
下表說明了與此元素相關的屬性及其描述：
| 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. |
屬性名稱 |
描述 |
| 日期時間 |
指定元素的機器可讀輸入時間。 |
| 發(fā)布日期 |
它有一個布林值，指定內(nèi)容的發(fā)布日期。 |
表>
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 時間標籤的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！