HTML 時間標籤
眾所周知，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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
