HTML5 연구 노트 간결 버전(2): 새 요소 섹션, 기사, 옆
- 黄舟원래의
- 2017-01-21 16:30:221927검색
섹션
섹션 요소는 문서나 프로그램의 공통 섹션을 설명합니다. 일반적으로 섹션에는 헤드와 콘텐츠 콘텐츠 블록이 포함됩니다. 섹션은 섹션으로 표시되거나 탭 페이지의 탭 아래에 있는 상자 블록으로 표시될 수 있습니다. 페이지는 소개, 뉴스 항목, 연락처 정보를 각각 나타내는 여러 섹션으로 나눌 수 있습니다.
요소의 내용을 함께 표시하여 해당 의미를 표현할 수 있다면 기사 요소로 정의할 수 있으며, 섹션 요소를 사용할 필요가 없습니다.
section 요소는 일반적인 컨테이너 요소가 아니므로 해당 요소에 해당 스타일이나 스크립트를 정의해야 하는 경우 div 요소를 사용하는 것이 좋습니다. 이 요소는 문서의 개요에 명확하게 표시될 수 있습니다.
다음 예제 코드는 Apple 웹사이트 페이지의 일부에서 가져온 것입니다. 코드에는 2개의 짧은 섹션이 포함되어 있습니다.
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for apple pies.</p>
</section>
</article>보시다시피 섹션에서 h1 요소를 고려하지 않고 사용할 수 있습니다. 이 섹션은 최상위, 두 번째 또는 세 번째 수준 요소입니다.
다음 코드는 졸업식 페이지로, 두 섹션으로 구성되어 있습니다. 하나는 졸업할 사람 목록을 표시하는 부분이고 다른 하나는 졸업식 형식을 표시하는 부분입니다.
<!DOCTYPE Html>
<html>
<head>
<title>Graduation Ceremony Summer 2022</title>
</head>
<body>
<h1>Graduation</h1>
<section>
<h1>Ceremony</h1>
<p>Opening Procession</p>
<p>Speech by Validactorian</p>
<p>Speech by Class President</p>
<p>Presentation of Diplomas</p>
<p>Closing Speech by Headmaster</p>
</section>
<section>
<h1>Graduates</h1>
<ul>
<li>Molly Carpenter</li>
<li>Anastasia Luccio</li>
<li>Ebenezar McCoy</li>
<li>Karrin Murphy</li>
<li>Thomas Raith</li>
<li>Susan Rodriguez</li>
</ul>
</section>
</body>
</html>article
article은 블로그 항목이나 신문 기사와 같은 문서 콘텐츠의 독립적인 부분을 나타내며 23c3de37f2f9ebcb477c4a90aac6fffd 문서의 나머지 부분.
article은 섹션보다 의미가 더 명확한 특수 섹션 태그로, 관련 콘텐츠의 독립적이고 완전한 블록을 나타냅니다. 일반적으로 기사에는 제목 섹션(보통 머리글에 포함됨)이 있고 바닥글이 있는 경우도 있습니다. 섹션은 주제별 콘텐츠이기도 하지만 기사 자체는 구조와 콘텐츠 측면에서 독립적이고 완전합니다.
기사에 기사가 삽입되는 경우 원칙적으로 내부 기사의 내용은 외부 기사의 내용과 연관됩니다. 예를 들어, 블로그 게시물에서 사용자가 제출한 댓글이 포함된 기사는 포함된 블로그 게시물 기사 내에 숨겨야 합니다.
<article> <a href="http://www.apple.com">Safari 5 released</a><br /> 7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC, Apple announced the release of Safari 5 for Windows and Mac...... </article>
aside
HTML5에서 제공하는 15221ee8cba27fc1d7a26c47a001eb9b 요소 태그는 현재 페이지 또는 기사의 보조 정보 부분을 나타내는 데 사용됩니다. 여기에는 현재 페이지와 관련된 참조 및 사이드바가 포함될 수 있습니다. 또는 기본 콘텐츠, 광고, 탐색 요소 그룹 및 기본 콘텐츠와 구별되는 기타 유사한 섹션입니다.
현재 사양에 따르면 15221ee8cba27fc1d7a26c47a001eb9b 요소는 두 가지 방식으로 사용될 수 있습니다.
n은 주요 콘텐츠의 보조 정보 부분으로 포함됩니다. 콘텐츠는 현재 기사와 관련된 인용문, 단어 목록 등이 될 수 있습니다.
n은 페이지나 사이트의 글로벌 자회사 정보 부분으로 23c3de37f2f9ebcb477c4a90aac6fffd 외부에서 사용됩니다. 가장 일반적인 형태는 콘텐츠가 친숙한 링크, 제휴 탐색 또는 광고 단위 등이 될 수 있는 사이드바입니다.
다음 코드 예제는 위의 두 가지 사용 방법을 결합합니다.
<body>
<header>
<h1>My Blog</h1>
</header>
<article>
<h1>My Blog Post</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<aside>
<!-- Since this aside is contained within an article, a parser
should understand that the content of this aside is directly related
to the article itself. -->
<h1>Glossary</h1>
<dl>
<dt>Lorem</dt>
<dd>ipsum dolor sit amet</dd>
</dl>
</aside>
</article>
<aside>
<!-- This aside is outside of the article. Its content is related
to the page, but not as closely related to the above article -->
<h2>Blogroll</h2>
<ul>
<li><a href="#">My Friend</a></li>
<li><a href="#">My Other Friend</a></li>
<li><a href="#">My Best Friend</a></li>
</ul>
</aside>
</body>위는 HTML5 연구 노트의 간결한 버전입니다(2): new elements 섹션, 기사 및 Aside의 내용 , 기타 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!