HTML에서 시간 태그를 사용하는 방법
<time> 태그는 사람이 읽을 수있는 텍스트를 표시하면서 기계 읽을 수있는 형식의 날짜와 시간을 나타내는 데 사용됩니다. 2. ISO 8601 표준에 따라 DateTime 속성을 통해 날짜, 시간 전용, 시간 및 시간 및 부분 날짜를 포함한 다양한 DateTime 형식을 지원합니다. 3. 모범 사례에는 이벤트, 게시 날짜 및 접근성 및 SEO 향상에 IT를 사용하는 것이 포함되지만 CSS 없이는 시각적 외관을 변경하지는 않습니다. 4. 유효한 시간 시간, 비-시간 숫자 또는 비 날짜 텍스트가없는 상대 시간 표현식에 사용하지 않으므로 실제 시간 데이터 만 표시되도록하십시오.
HTML의 <time></time> 태그는 시스템을 읽을 수있는 형식으로 날짜와 시간을 나타내는 데 사용되므로 검색 엔진과 보조 기술이 웹 페이지에서 시간 정보를 이해하기가 쉽습니다. 기본적으로 콘텐츠의 시각적 모양을 변경하지는 않지만 의미 론적 의미를 추가합니다.
<time></time> 태그를 효과적으로 사용하는 방법은 다음과 같습니다.
1. 기본 구문 및 사용
<time></time> 요소는 날짜 또는 시간 값을 감습니다. datetime 속성을 통해 표준화 된 버전을 제공하면서 사람이 읽을 수있는 형식을 표시 할 수 있습니다.
<p> 이벤트는 <time dateTime = "2024-10-15"> 10 월 15 일 </time>에서 시작합니다. </p>
이 예에서 :
- 사용자에게 표시된 텍스트는 "10 월 15 일"입니다.
-
datetime속성은 전체 날짜를 시스템에 대해YYYY-MM-DD형식으로 제공합니다.
2. 다른 시간 형식에 DateTime 사용
datetime 속성은 다양한 형식을 지원합니다.
날짜 만 :
<time dateTime = "2024-12-25"> 크리스마스 날 </time>
시간 만 (24 시간 형식) :
<time dateTime = "14:30"> 2:30 pm </time>
날짜와 시간 :
<time dateTime = "2024-10-15T09 : 00"> 10 월 15 일 오전 9시 </time>
참고 :
T사용하여 날짜와 시간을 분리하십시오 (ISO 8601 표준)시간대와의 날짜 및 시간 :
<time dateTime = "2024-10-15T09 : 00 : 00 02:00"> 10 월 15 일 오전 9시 (CEST) </time>
1 년 또는 월 :
<time dateTime = "2024"> 2024 년 </time> <time dateTime = "2024-06"> 2024 년 6 월 </time>
3. 사용 사례 및 모범 사례
이벤트 및 일정 :
이벤트 날짜, 마감일 또는 개막 시간을 표시하는 데 이상적입니다.<p> 우리 회의는 <time dateTime = "2024-10-20T10 : 00"> 일요일 오전 10시 </time>. </p>입니다
게시 날짜 :
컨텐츠가 게시되거나 업데이트 될 때 검색 엔진 색인을 도와줍니다.<time dateTime = "2024-09-05"> 9 월 5 일 <p>에 게시 </time> </p>
접근성 및 SEO :
스크린 리더는 시간을 더 명확하게 발표 할 수 있으며 검색 엔진은 풍부한 스 니펫에 사용할 수 있습니다.시각적 변화 없음 :
<time>태그는 스타일을 추가하지 않습니다. 날짜를 강조하려면 CSS를 사용하십시오.
4. 사용하지 않을 때<time> 꼬리표
<time> 사용하지 마십시오.
- 유효한
datetime과 쌍을 이루지 않는 한 "Tomorrow"또는 "Nexen Next 주"와 같은 상대 시간 표현식 - 비 임차 번호 (예 : v1.5와 같은 버전 번호)
- 날짜/시간이 아닌 텍스트
대신 "내일"이라고 말하면 datetime 에 실제 날짜를 포함시킵니다.
<time dateTime = "2024-10-16"> 내일 </time>
기본적으로 <time></time> 태그는 콘텐츠를 기계에 더 의미있게 만들면서 사용자가 읽을 수 있도록하는 작지만 유용한 방법입니다. 명확한 디스플레이 텍스트를 올바른 datetime 값과 페어링하면 좋습니다.
위 내용은 HTML에서 시간 태그를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undress AI Tool
무료로 이미지를 벗다
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Stock Market GPT
더 현명한 결정을 위한 AI 기반 투자 연구
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
JavaScript의 스택은 무엇입니까?
Aug 30, 2025 am 05:30 AM
astackinjavaScriptisimplementEdeDusingAnarraytoflollowthelastin, firstout (lifo) 원리
부트 스트랩에서 버튼을 정렬하는 방법
Aug 31, 2025 am 01:10 AM
부트 스트랩에서 버튼을 정렬하려면 그리드 시스템과 실제 클래스를 사용해야합니다. 1. 수평 센터링 버튼 : 부모 컨테이너에 텍스트 센터 클래스를 추가합니다. 2. 여러 버튼을 나란히 정렬 : D-Flex 및 GAP-2 클래스 사용; 3. 오른쪽 정렬 버튼 : 정당화 컨텐츠 엔드와 결합 된 D- 플렉스 사용; 4. 양쪽 끝에 버튼을 정렬합니다. 5. 형태로 버튼을 정렬 : 오프셋 클래스를 통해 그리드 시스템과 정렬; 6. 수직 스태킹 버튼 : D-Flex 및 Flex-Colum 클래스 사용; 항상 컨테이너로 버튼을 랩하고 갭 클래스를 사용하여 일관된 간격을 보장하고 응답 클래스와 함께 구현하십시오.
JavaScript에서 Ternary 연산자를 사용하는 방법
Aug 27, 2025 am 02:37 AM
JavaScript의 3 배 연산자는 간단한 조건 판단을 간결하게 구현하는 데 사용되며 구문은 조건입니다. 1. 가변 할당 또는 함수 반환 값과 같은 두 값 중에서 간단한 선택 시나리오에 적용됩니다. 2. 여러 조건을 다루기 위해 체인에 사용될 수 있지만 과도한 둥지는 가독성을 줄입니다. 3. 함수 호출과 같은 부작용이 포함 된 작업에 대해서는 피해야하며 IF ... else 문은 현재 사용해야합니다. 올바른 사용은 코드를보다 간결하고 명확하게 만들 수 있습니다.
CSS와 텍스토리를 스타일링하는 방법
Sep 16, 2025 am 07:00 AM
먼저, 너비, 높이, 여백, 국경, 글꼴 및 색상과 같은 기본 스타일을 설정합니다. 2. 호버 및 초점 상태를 통한 대화식 피드백 향상; 3. 크기 조정 속성을 사용하여 크기 조정 동작을 제어하십시오. 4. 자리 표시 자 텍스트를 스타일링하려면 :: 자리 표시 자 의사 요소를 사용하십시오. 5. 반응 형 디자인을 사용하여 교차 사기 가용성을 보장합니다. 6. 접근성을 보장하기 위해 상관 관계 라벨, 색상 대비 및 초점 윤곽선에주의를 기울이고 궁극적으로 아름답고 기능적인 텍스토리 스타일을 달성하십시오.
HTML의 절대 URL과 상대 URL의 차이점은 무엇입니까?
Sep 16, 2025 am 07:57 AM
ANABSOLUTEURLINCLUDETHEFULLWEBADDRESS는 PROTOCOLADDOMAIN을 사용하여, whilelativeUllativeTotheCurrentPage.1.useAbsoluteUrlsforexternalwebsites, wwhencontentmaybeshared.2.userelativeUrlsforInallalSforInalSforiGation,
자바 스크립트에서 히스토리 API를 사용하는 방법
Aug 31, 2025 am 05:08 AM
HistoryApi를 사용하여 단일 페이지 응용 프로그램에서 새로 고침없는 URL 업데이트 및 브라우저 탐색 지원을 달성하십시오. 1. 역사를 통해 역사에 액세스하고 역사를 사용하고 길이와 역사를 사용하십시오. 2. Pushstate (State, Title, URL)를 사용하여 기록 스택에 새 항목을 추가하고 URL을 변경하고 페이지를 새로 고치지 않고 상태 데이터를 연결하십시오. 3. Explacestate (State, Title, URL)를 사용하여 현재 역사적 항목을 대체하여 사용자가 후진 할 때 반복적 인 작업을 피하십시오. 4. PopState 이벤트를 듣고 사용자가 전면 및 후면 버튼을 클릭하면 Eve를 따르십시오.
구글 맵을 부트 스트랩과 통합하는 방법
Sep 05, 2025 am 05:08 AM
먼저 Googlemaps API 키를 가져 와서 스크립트를 올바르게 소개하여 콜백 함수 InitMap이 일치하는지 확인하십시오. 2. 부트 스트랩 그리드를 사용하여 고정 된 높이와 100% 너비의 맵 컨테이너를 만들어 응답 형 레이아웃을 보장합니다. 3. initmap 함수를 JavaScript에서 정의하여 맵을 초기화하고 중심 지점, 줌 레벨 및 선택적 마크를 설정합니다. 4. 고정 된 픽셀 폭을 사용하지 않기 위해 CSS 또는 인라인 스타일을 통해 맵 컨테이너의 반응 적으로 스케일링을 확인하십시오. 5. 일반적인 문제에는 API 키 오류, 컨테이너가없는 컨테이너 높이 또는 부트 스트랩 클래스의 부적절한 사용이 포함되며, 맵이 정상적으로로드되고 표시되도록 하나씩 확인해야합니다. 최종 맵은 올바르게 응답하고 모든 장치에 퍼져 있습니다.
HTML에서 시간 태그를 사용하는 방법
Sep 19, 2025 am 03:35 AM
THETAGISUSSEDTOREPRESENTDATES 및 AMACHINE-ReadableFormat.2.ItSupportSVariousDateTimeFormatsInly, TimeOnly, DateAndtimeWithTimeZone 및 PartialDatesViAthedAteTimeatTributtRibuttireblollowInso8601dard.3.3.BEST
