HTML5 표준은 유형에 따라 많은 새로운 시맨틱 요소를 추가하면 페이지 구조, 텍스트 내용, 양식 등이 있습니다.
여기서 우리는 주로 페이지 구조에 새로운 요소를 소개합니다.
의미 론적 요소는 무엇입니까?간단히 말해서, 시맨틱 요소는 요소의 이름을 나타내는 것이 요소의 이름을 표현해야한다는 것을 의미합니다.
헤더를 나타내는 <weader>와 같은 바닥 글을 나타내는 <footh>.
특성쉽게 유지 보수 : 의미 론적 요소를 사용하면 더 명확한 페이지 구조 정보가 있으며, 이는 페이지의 팔로우 유지 보수를 쉽게 유지할 수 있습니다. 코드를 다시 볼 필요가 없습니다. 특정 클래스 이름을 찾기 전에 디비전을 찾으십시오.
Cabinet -Free : 화면 리더 및 기타 보조 도구를 읽는 데 도움이됩니다.
③ 최적화 된 검색 엔진 최적화 : HTML5의 시맨틱 요소를 확인한 후 검색 로봇은 인덱스 페이지에서 정보를 수집 할 수 있습니다.
원래 인터페이스 레이아웃페이지의 레이아웃에서 <div>는 특정 스타일의 매우 일반적인 요소입니다.
유지 보수를 용이하게하기 위해 디자이너는 종종 <div> 클래스 이름 (스타일 카테고리) 또는 ID를 특수 이름으로 제공합니다.
예를 들어, 헤더를 나타내는 <div> 요소, 클래스 이름 또는 ID는 페이지 헤더, 헤더 등이 될 수 있습니다.
예:
페이지 구조 시맨틱 요소 설명페이지 구조의 의미 론적 요소는 대부분 페이지의 전체 레이아웃에 사용되지만 대부분은 블록 레벨 요소입니다.
그리고 그것은 특별한 스타일이 없으며 여전히 CSS와 함께 사용해야합니다.
자세한 소개 <Header> : 웹 페이지 또는 기사의 헤드 영역을 정의합니다. 로고, 내비게이션, 검색 바 등을 포함 할 수 있습니다.브라우저의 가장 낮은 버전 : IE 9, Chrome 5
사용 지침 :
WebPage에 레이블을 지정하는 데 사용되면 로고, 탐색, 검색 바와 같은 정보가 포함될 수 있습니다.
제목이 컨텐츠를 표시하는 데 사용되면 제목이 다른 정보에 첨부 될 때만 <H1> 라벨을 표시합니다.
<main> : 웹 페이지의 주요 내용을 정의합니다.브라우저의 가장 낮은 버전 : IE는 지원하지 않습니다. Chrome 35
<FUTER> : 웹 페이지 또는 기사의 꼬리 영역을 정의하십시오. 저작권 및 제출을 포함 할 수 있습니다.브라우저의 가장 낮은 버전 : IE 9, Chrome 5
사용 지침 :
∎ 웹 페이지로서 일반적으로 웹 사이트 저작권, 법적 제한 및 링크가 포함됩니다.
②이 기사의 각주로서 일반적으로 저자의 관련 정보가 포함되어 있습니다.
<av> : 페이지 탐색 링크를 표시하십시오. 여러 개의 오버 로크 영역이 포함되어 있습니다.브라우저의 가장 낮은 버전 : IE 9, Chrome 5
사용 지침 :
① 한 페이지에는 내비게이션 및 관련 기사 권장 사항과 같은 여러 <av> 요소가 포함될 수 있습니다.
<<풋내기> 영역의 연락처 정보 및 인증 정보는 <av> 요소에 포함될 필요가 없습니다.
<섹션> : 일반적으로 웹 페이지의 독립 영역으로 표시됩니다.브라우저의 가장 낮은 버전 : IE 9, Chrome 5
사용 지침 :
짐은 기사의 섹션과 같은 웹 페이지의 독립 영역으로 사용할 수 있습니다.
<Artticle> : 완전하고 독립적 인 컨텐츠 블록; 독립적 인 <Header>, <FUTER> 및 기타 구조적 요소를 포함 할 수 있습니다. 뉴스, 블로그 기사 및 기타 독립 콘텐츠 (의견 또는 저자 프로필 제외)와 같은.브라우저의 가장 낮은 버전 : IE 9, Chrome 5
<따로> : 주변의 주요 내용 외부의 내용 블록을 정의합니다. : 주석.브라우저의 가장 낮은 버전 : IE 9, Chrome 5
<figure> : 독립적 인 컨텐츠 섹션을 나타내며 종종 <figcaption> (표현)과 함께 사용되며,이 기사의 그림, 그림, 양식, 코드 세그먼트 등에 사용할 수 있습니다.브라우저의 가장 낮은 버전 : IE 9, Chrome 8 <Figcaption> : <Figure> 요소의 제목을 정의하십시오.
브라우저의 가장 낮은 버전 : IE 9, Chrome 8
예제 다이어그램
브라우저 지원의 이전 버전 위의 IE8브라우저는 모르는 요소의 내부 요소로 사용됩니다. 페이지 관련 시맨틱 요소는 블록 레벨 요소이므로 이러한 요소를 지원하지 않는 브라우저를 블록 레벨 요소로 표시하기 만하면됩니다.
다음 코드를 스타일에 추가하십시오.
기사, 제외, 세부 사항, 그림, 그림, 바닥 글, 헤더, HGROUP, MAIN, NAV, 섹션, 요약 {display : block;} 아래의 IE8 및 IE8IE8 및 IE8 아래의 브라우저는 인식 할 수없는 유용한 요소 응용 프로그램 스타일을 지원하지 않습니다.
따라서 JS를 통해 이러한 의미 론적 요소를 만들고 기본 스타일을 추가하십시오.
예를 들어 헤더를 가져 가십시오<cript> 문서화 ( '헤더');응용 프로그램 외부 파일
이 지루한 창작물은 이미 Lei Feng을 작성했으며, IE의 이전 버전에 방금로드되었습니다.
<!