모바일 장치용 HTML5 페이지 레이아웃에 대한 간략한 분석 _html5 튜토리얼 기술

모바일 장치(휴대폰 및 태블릿)의 특성을 결합하여 HTML5의 새로운 의미 태그 요소를 소개하고 모바일 웹 브라우저에서의 웹 페이지 레이아웃에 대한 지식과 예를 소개합니다.
HTML5 표준에 의해 추가된 새로운 요소 중 일반적인 페이지 구조에 사용되는 요소에는 머리글 바닥글 탐색 외에 기사 섹션 hgroup이 포함됩니다.
다음은 이 요소에 대한 간략한 소개입니다.
1.header
header> 요소는 일반적으로 일부 안내 및 탐색 정보와 같은 문서의 페이지 조합을 정의하며 태그는 일반적으로 h1~h6, hgroup 등 섹션별 헤더 정보를 포함합니다.

코드 복사

코드는 다음과 같습니다.

>　h1>HTML5 레이아웃 학습
　

열심히 공부하세요

은 다음 코드와 일치합니다.

코드 복사

코드는 다음과 같습니다.

　

HTML5 레이아웃 학습

　

열심히 공부하세요

2.footer

요소는 문서나 장의 끝을 정의하고 저자 정보, 관련 링크, 저작권 정보 등 장에 대한 몇 가지 기본 정보를 포함합니다. 페이지에서 여러 머리글과 바닥글을 사용할 수 있으며 div ul 등과 같은 다른 요소를 삽입할 수도 있습니다.

개인정보

　

회사 소개

3.nav

요소는 내장된 탐색을 정의하고 탐색 링크를 표시하며 현재 페이지의 일부 기본 탐색 링크를 배치하는 데 사용됩니다.

　 　　 ; 　

4.aside

요소는 페이지의 영역을 정의하는 데 사용되며, 페이지와 관련된 주요 콘텐츠를 나타내는 데 사용되며, 텍스트가 아닌 로드에 사용됩니다. 광고 칼럼, 사이드바 등 주요 콘텐츠

5.article

요소는 문서나 페이지를 나타내며 웹사이트 뉴스, 블로그 기사 등과 같은 기사 콘텐츠의 독립적인 부분을 표시하는 데 사용됩니다. .
　

코드 복사


코드는 다음과 같습니다.

< ;li>기사 태그 1 　　　　

기사 태그2

　

6.section

　 장, 머리글, 바닥글 등

요소의 첫 번째 요소에 있는 섹션입니다.
　




코드 복사

코드는 다음과 같습니다.

　　

🎜>　　

> 🎜>

7.hgroup

　

은 웹 페이지 또는 섹션의 제목 요소 조합으로 정의되며 일반적으로 그룹화를 위해 다단계 h1~h6 태그 노드를 사용합니다.
　

코드 복사

코드는 다음과 같습니다. hgroup> 　　　

🎜> 🎜 >

사실 우리가 소개한 시맨틱 태그 외에도 HTML5 표준에는 다양한 시맨틱 태그가 더 많이 정의되어 있습니다.

* 오디오: 오디오 콘텐츠를 정의합니다.

* 캔버스: 캔버스 기능을 정의합니다. * 명령: 명령 버튼을 정의합니다. * datalist: 드롭다운 목록을 정의합니다. * 세부정보: 요소의 세부 내용을 정의합니다. * 대화 상자: 대화 상자를 정의합니다.

* keygen: 양식에 청구된 키 값을 정의합니다.

* 표시: 표시된 텍스트를 정의합니다.

* 출력: 일부 출력 유형을 정의합니다.
* 진행률: 작업 프로세스를 정의합니다.
* 출처: 미디어 리소스를 정의합니다.
* 비디오: 비디오 콘텐츠를 정의합니다.
HTML5 표준에는 새로운 요소가 많이 추가되었지만 실제로 모바일 웹 애플리케이션에서 사용할 기회는 많지 않습니다.
오디오, 비디오 등의 태그는 모바일 웹 애플리케이션에서 연습할 수 있지만 성능, 호환성, 페이지 렌더링으로 인해 스마트폰과 태블릿의 웹 브라우저에서는 잘 적용되지 않습니다.