지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > h5의 주요 요소 예시에 대한 자세한 설명

h5의 주요 요소 예시에 대한 자세한 설명

零下一度
풀어 주다： 2017-05-31 15:41:42
원래의
3500명이 탐색했습니다.

2013년 초에

요소가 W3C HTML 사양에 공식적으로 추가되었습니다. 지금까지 이 요소의 정의는 매우 완료되었으므로 이제 이 요소가 적절한지에 대해 자세히 살펴보겠습니다.
요소를 사용합니다. 그럼 시작해 보겠습니다.

　　W3C 사양

　

의 주요 목적은 ARIA의 랜드마크 기능을 HTML 요소에 매핑하는 것입니다. 이를 통해 화면 판독기와 보조 장치가 페이지의 주요 콘텐츠가 시작되는 위치를 알 수 있습니다. W3C 사양에서는
을 다음과 같이 설명합니다.

문서 또는 애플리케이션의 주요 콘텐츠입니다. 기본 콘텐츠 영역은 문서의 중심 주제 또는 앱의 핵심 기능과 직접 관련되거나 확장되는 콘텐츠로 구성됩니다.

요소가 HTML 사양에 포함되었으므로 요소가 HTML4의 정의로 복원되었습니다.

body 요소는 document의 내용을 나타냅니다.

　　Details

　

요소 사용 시 주의할 점은 페이지당 한 번만 사용할 수 있다는 것입니다. 페이지는 한 번만 사용할 수 있다고 규정한 이유는 무엇입니까? 구체적인 세부 사항에는 관심이 없지만 일부 요점은 이해가 되는 것 같습니다.

사양에 따라 문서에서 여러 개의

태그를 사용하려고 하면 W3C 유효성 검사기에서 오류가 발생합니다.

　

요소에 대한 또 다른 요구 사항은
,
,

　 사용법

다른 새로운 HTML5 요소와 마찬가지로 모든 브라우저가

을 인식하고 사전 설정 스타일을 추가할 수 있는 것은 아닙니다. 자체 CSS 파일에 추가해야 할 수도 있습니다. 

    main {display:block;}
로그인 후 복사

때로는 일부 낮은 버전의 IE 브라우저를 지원하기 위해 JavaScript를 사용하여 이 요소를 생성해야 할 수도 있습니다. 

<script type="text/javascript">document.createElement(&#39;main&#39;);</script>
로그인 후 복사

　물론 html5shiv를 사용할 수도 있습니다.

　

요소를 사용하는 가장 쉬운 방법은 ID 또는 Class 값이 main 또는 content인

요소를 바꾸는 것입니다.

그렇다면 실제로는 어떤 모습이어야 할까요? 다음은

요소를 사용하기 전의 문서 구조입니다. 

    <header>Header</header>
    <p id="content">Main Content</p>
    <footer>Footer</footer>
로그인 후 복사

　 다음으로

요소를 사용하여 문서를 다시 작성합니다. 

    <header>Header</header>
    <main id="content">Main Content</main>
    <footer>Footer</footer>
로그인 후 복사

　아주 간단해서 1분도 안 되어 문서를 최신 HTML5 스타일로 다시 작성할 수 있습니다.

　 요약

보시다시피

요소를 사용하는 것은 매우 쉽고 몇 분밖에 걸리지 않습니다. 이제 웹사이트 개발 과정에

위 내용은 h5의 주요 요소 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
h5，main
원천：php.cn
이전 기사：h5를 사용하여 카메라를 호출하여 사진을 찍는 방법에 대한 예제 튜토리얼 공유 다음 기사：HTML5.1의 새로운 기능은 무엇입니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
이미지 및 이름 위치 수정 웹사이트를 코딩하려고 하는데 이미지와 이름(Administracija)이 왼쪽에 표시되는데 검색창이 있는 위치에 표시되어야 합니다. @importurl('http...
에서 2024-04-05 10:41:36
0
1
3578
강제 새로 고침은 Next.js에서 정의되지 않은 경로 또는 오류 페이지에 액세스한 결과입니다. 정의되지 않은 경로 또는 오류 페이지에 액세스하면 Next.js가 강제 새로 고침을 수행하여 내 컨텍스트가 기본 상태로 돌아가게 됩니다(즉, userProfile...
에서 2024-04-05 08:32:46
0
1
400
루트 노드의 목록 항목 기호(<ul> 및 <ol>)는 CSS에서 표시 및 제거할 수 없으며, Overflow-x:hidden 문제는 제거할 수 없습니다. 현재 웹페이지 작업을 하고 있는데 목록 항목에 문제가 있습니다. 일반적으로 각 목록 항목 옆에 나타나는 점과 숫자는 표시되지 않습니다. 또한 CSS 속성에서 Ov...
에서 2024-04-04 16:38:22
0
1
3617
바닐라 JS setTimeout(): 잘못된 동작 식별 HTML, CSS 및 바닐라 JavaScript로 작성된 햄버거 메뉴에 애니메이션이 있습니다. 예상 결과 햄버거 메뉴 버튼을 클릭하면 다음 이벤트가 발생해야 합니...
에서 2024-04-02 20:44:40
0
1
284
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿