집 > 기사 > 웹 프론트엔드 > html5의 새로운 구조: html 기본 구조 및 비기본 구조 소개

html5의 새로운 구조: html 기본 구조 및 비기본 구조 소개

不言원래의: 2018-08-17 17:50:102299검색

이 기사의 내용은 html5의 새로운 구조, 즉 html 기본 구조와 비기본 구조에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1 새로운 기본 구조 요소

1.1 기사 요소

는 외부에서 독립적으로 참조할 수 있는 문서, 페이지 또는 애플리케이션의 독립적이고 완전한 콘텐츠를 나타냅니다. (블로그나 신문이나 잡지의 기사 등)

1.2 섹션 요소

는 웹사이트나 애플리케이션 페이지의 콘텐츠를 섹션으로 나누는 데 사용됩니다. (기사 분할 등)

1.3 탐색 요소

는 페이지 탐색으로 사용할 수 있는 링크 그룹입니다. 탐색 요소는 현재 페이지의 다른 페이지 또는 다른 부분으로 연결됩니다.

1.4 side 요소

는 현재 페이지나 기사의 보조 정보 부분을 나타내는 데 사용됩니다. 여기에는 주요 내용과 다른 참조, 사이드바, 광고, 탐색 모음 및 기타 유사한 내용이 포함될 수 있습니다.

2 새로운 비주요 구조 요소

2.1 헤더 요소

는 안내 및 탐색 기능을 갖춘 구조 요소로 일반적으로 전체 페이지의 제목이나 페이지 내 콘텐츠 블록을 배치하는 데 사용됩니다. 또한 데이터 테이블, 검색 양식 또는 관련 로고 이미지와 같은 다른 콘텐츠를 포함할 수도 있습니다.

2.2 바닥글 요소

는 상위 콘텐츠 블록이나 루트 블록의 바닥글로 사용할 수 있습니다. 여기에는 일반적으로 저자, 관련 읽기 링크, 저작권 정보 등과 같은 서버의 관련 섹션에 대한 각주 정보가 포함됩니다.

2.3 주소 요소

는 문서 작성자 또는 문서 관리자의 이름, 문서 작성자 또는 문서 관리자의 웹사이트 링크, 이메일 주소, 실제 주소, 전화번호 등을 포함하여 문서의 연락처 정보를 표시하는 데 사용됩니다.

2.4 주요 요소

는 웹페이지의 주요 콘텐츠를 나타냅니다.

(2) 각 웹페이지에는 하나의 주요 요소만 배치할 수 있습니다.

(3) 주요 요소는 기사, 옆글, 바닥글, 머리글 또는 탐색 요소 안에 배치될 수 없습니다.

3 새로운 구조 요소에 스타일 사용

(1) 많은 브라우저가 아직 H5의 새로운 구조 요소를 지원하지 않기 때문에 클라이언트가 사용하는 브라우저가 이러한 요소를 지원하는지 여부를 알 수 없으므로 CSS를 사용해야 합니다. 다음 문의 목적은 페이지에 사용된 H5의 새 요소가 아래와 같이 블록으로 표시된다는 것을 브라우저에 알리는 것입니다.

//追加block声明
article，aside，dialog，figure，footer，header，legend，nav，section，main｛ display：block；｝
//正常使用样式
nav {  float : left ; width:20% }
article { float:right ; width:79% }

(2) IE8 및 이전 버전은 CSS 사용을 지원하지 않습니다. 아직 사용되지 않는 요소를 사용하려면 지원되는 구조 요소를 사용하려면 Javascript를 사용해야 합니다.

//脚本中创建元素
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
document.createElement("main");
</script>
<style>
//正常使用样式
nav {  float : left ; width:20% }
article { float:right ; width:79% }
</style>

html5의 새로운 구조: html 기본 구조 및 비기본 구조 소개

관련 기사