HTML 시간 태그-HTML 튜토리얼-php.cn

속성

Examples to Implement HTML Time Tag

Example #1 – using a <time> tag.

Example #2

Example #3 – Using Css.

Example #4 – Using pubdate attribute.

Conclusion

집

웹 프론트엔드

HTML 튜토리얼

HTML 시간 태그

PHPz

Sep 04, 2024 pm 04:30 PM

html html5 HTML Tutorial HTML Properties HTML tags

우리 모두 알고 있듯이 HTML은 웹 개발 분야에서 끊임없이 발전하고 있으며 전 세계적으로 인기 있는 마크업 언어입니다. 웹 개발자들은 HTML 요소에 대한 업데이트와 학습이 필요하다고 합니다. 이번 글에서는 time 태그라고 불리는 몇 가지 중요한 태그에 대해 알아보겠습니다. 사람이 날짜/시간을 다양한 형태로 읽는 것은 쉽지만, 기계의 경우 들어옵니다. 이번 태그는 특정 기간을 정의하고 특정 웹페이지의 날짜와 시간을 지정합니다. 따라서 이는 매우 유용하며 사람이 읽을 수 있는 태그를 나타냅니다. 사람이 읽을 수 있는 이 형식은 인터넷 프로토콜의 귀중한 형식입니다. <시간> 태그는 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:

<!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:

HTML 시간 태그

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:

HTML 시간 태그

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:

HTML 시간 태그

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:

HTML 시간 태그

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.