HTML 시간 태그
- PHPz원래의
- 2024-09-04 16:30:11982검색
우리 모두 알고 있듯이 HTML은 웹 개발 분야에서 끊임없이 발전하고 있으며 전 세계적으로 인기 있는 마크업 언어입니다. 웹 개발자들은 HTML 요소에 대한 업데이트와 학습이 필요하다고 합니다. 이번 글에서는 time 태그라고 불리는 몇 가지 중요한 태그에 대해 알아보겠습니다. 사람이 날짜/시간을 다양한 형태로 읽는 것은 쉽지만, 기계의 경우
시간은 다음과 같은 방법으로 정의할 수 있습니다.
- 시간
- 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!