집 > 기사 > 웹 프론트엔드 > H5에서 헤더 태그를 사용하는 방법

H5에서 헤더 태그를 사용하는 방법

php中世界最好的语言원래의: 2018-01-09 09:25:323498검색

이번에는 H5에서 헤더태그를 어떻게 사용하는지 알려드리겠습니다. H5에서 헤더 태그를 사용할 때 주의사항은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

1aa9e5d373740b65a0cc8f0a02150c53 태그는 문서의 헤더, 일반적으로 일부 안내 및 탐색 정보를 정의합니다. 웹페이지의 헤더에만 쓰는 것이 아니고, 웹페이지의 콘텐츠에도 쓸 수 있습니다.
새 표준에서는 헤더 태그를 다음과 같이 정의합니다.

"입문 또는 항법 보조 콘텐츠 그룹."
기본적으로는 "입문 관련 보조 콘텐츠 그룹"을 의미합니다. 문자 그대로 이해하면 헤더 태그는 페이지 헤더의 내용을 정의할 뿐만 아니라 페이지 헤더 아래에 다른 콘텐츠의 도입을 정의할 수도 있습니다. 이는 기존 페이지 헤더 정의와 완전히 일치하지 않습니다.
일반적으로 1aa9e5d373740b65a0cc8f0a02150c53 태그에는 제목 태그(4a249f0d628e2318394fd9b75b4636b1-4e9ee319e0fa4abc21ff286eeb145ecc)가 하나 이상 포함되며, d8eccd9ed644b68a6460a2bb84548c82 태그도 포함될 수 있습니다. , 로고, 검색 양식, c787b9a589a3ece771e842a6176cf8e9탐색 등

<header>  
 <h1>1</h1>  
 <p>专注于web前端开发</p>  
</header>  
<article>  
 <header>  
  <h1>html5语义化标签之结构标签</h1>  
  <p>article、section、hgroup、aside、nav...</p>  
 </header>  
 <p>...这里面包含很多东西...</p>  
</article>

위 구조에서 헤더를 사용하여 기사의 제목과 내용을 정의하는 것을 볼 수 있습니다. 여기서 사용된 헤더 태그는 페이지의 헤더가 아닌 기사의 헤더입니다.

따라서 HTML5에서는 헤더 사용이 더욱 유연해졌으며 필요에 따라 document 구조를 정의하고 구성할 수 있습니다.

마찬가지로 페이지를 구성할 때 헤더 태그는 일반적으로 페이지 상단에 배치되지만, 왼쪽, 오른쪽, 심지어 하단에 배치하려는 경우 태그는 해당 역할만 정의하는 것은 중요하지 않습니다. 위치가 아닌 페이지에. 물론, 페이지를 구성할 때 중요한 콘텐츠가 최종적으로 고급화되는 것은 검색 엔진 최적화 원칙에 더 가깝습니다.
마지막으로 HTML5의 헤더는 블록 요소이므로 대부분의 주류 브라우저에서 사용하려면 CSS를 다음과 같이 정의하는 것이 가장 좋습니다.

header { display:block;}

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!