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中文網其他相關文章！