집 > 기사 > 웹 프론트엔드 > HTML5 연구 노트 간결 버전(3): 새로운 요소 hgroup, 머리글, 바닥글

HTML5 연구 노트 간결 버전(3): 새로운 요소 hgroup, 머리글, 바닥글

黄舟원래의: 2017-01-21 16:34:002193검색

hgroup

d8eccd9ed644b68a6460a2bb84548c82 태그는 웹페이지나 섹션의 제목을 그룹화하는 데 사용됩니다.

<hgroup>
  <h1>Welcome to my WWF</h1>
  <h2>For a living planet</h2>
</hgroup>

<p>The rest of the content...</p>

header

header 요소는 안내 및 탐색 기능을 갖춘 보조 요소입니다. 일반적으로 헤더 요소에는 블록 제목(예: h1~h6 또는 hgroup 요소 태그)이 포함될 수 있지만 데이터 테이블, 검색 양식 또는 관련 로고 이미지와 같은 다른 콘텐츠도 포함될 수 있습니다.

이 요소를 사용하여 전체 페이지의 제목 부분을 작성할 수 있습니다.

<header>
    <h1>The most important heading on this page</h1>
</header>

동일한 페이지에서 각 콘텐츠 블록은 고유한 1aa9e5d373740b65a0cc8f0a02150c53 요소를 가질 수 있습니다. 🎜>

<header> 
  <h1>The most important heading on this page</h1>
</header>

<article> 
  <header>   
    <h1>Title of this article</h1> 
  </header> 
  <p>...Lorem Ipsum dolor set amet...</p>
</article>

1aa9e5d373740b65a0cc8f0a02150c53 요소에는 일반적으로 제목 태그(h1~h6) 또는 hgroup이 포함됩니다. 또한 최신 W3C HTML5 사양 업데이트에 따라 데이터 테이블, 검색 양식 또는 관련 로고 이미지와 같은 다른 콘텐츠도 포함될 수 있으며 c787b9a589a3ece771e842a6176cf8e9 요소 태그도 사용할 수 있습니다.

바닥글

바닥글 요소는 직접 상위 콘텐츠 블록 또는 루트 블록의 끝으로 사용될 수 있습니다. 바닥글에는 일반적으로 작성자, 관련 읽기 링크, 저작권 정보 등 관련 블록에 대한 추가 정보가 포함됩니다.

과거(그리고 현재)에는 페이지 바닥글을 작성할 때 일반적으로 다음과 같은 코드를 사용합니다.

<div id="footer">
  <ul>
     <li>copyright</li>
     <li>sitemap</li>
     <li>contact</li>
     <li>to top</li>
  </ul>
<div>

HTML5에서는 div를 사용할 수 없지만 보다 의미론적인 바닥글을 사용합니다. 쓰기:

<footer>
  <ul>
     <li>copyright</li>
     <li>sitemap</li>
     <li>contact</li>
     <li>to top</li>
  </ul>
</footer>

동일한 페이지에서 여러 개의 c37f8231a37e88427e62669260f0074d 요소를 사용할 수 있으며, 이는 전체 페이지의 바닥글 또는 콘텐츠 블록의 끝으로 사용할 수 있습니다. 2f8332c8dcfd5c7dec030a070bf652c3 또는 23c3de37f2f9ebcb477c4a90aac6fffd에 직접 c37f8231a37e88427e62669260f0074d를 쓸 수 있습니다:

<section>
   Section content appears here.
   <footer>
      Footer information for section.
   </footer>
</section>

<article>
   Article content appears here.
   <footer>
      Footer information for article.
   </footer>
</article>

주소

요소는 문서 작성자의 이름, 사이트 링크, 이메일 주소, 실제 주소, 전화번호 등을 포함하여 문서 내 연락처 정보를 표시하는 데 사용됩니다. 주소는 이메일과 같은 "주소" 개념을 표시하는 데만 사용되지 않습니다. 주소 또는 실제 주소이지만 문서를 작성한 사람과 관련된 다양한 연락처 정보를 포함해야 합니다.

위 정의에 따라 다음 코드를 사용하여 일부 자원봉사자의 이름과 홈페이지 링크를 표시할 수 있습니다.

The HTML5 Doctor is run by the following group of volunteers:
<address>
  <a href="http://html5doctor.com/author/jacko">Jack Osborne</a>,
  <a href="http://html5doctor.com/author/richc">Rich Clark</a>,
  <a href="http://html5doctor.com/author/miker">Mike Robinson</a>,
</address>

다음은 c37f8231a37e88427e62669260f0074d ;time> 요소:

<footer>
  <div class="vcard"> by
    <address class="author">
      <em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em>
    </address> on
    <time datetime="2009-11-04" class="published updated">November 4th, 2009</time>
  </div>
</footer>

현재 문서 작성자의 연락처 정보와 관련되지 않은 일부 연락처 정보를 페이지에 표시해야 하는 경우 hCard 마이크로포맷:

<div class="vcard">
  <p class="fn"><a class="url" href="#">Dr. Jack Osborne</a><p>
  <p class="adr">
    <span class="street-address">HTML5 Hospital</span>
    <span class="region">Doctorville</span>
    <span class="postal-code">Postal Code</span>
    <span class="country-name">Great Britain</span>
  </p>
  <p class="tel">+44 (0)XXXX XXXXXX</p>
</div>

nav

nav 요소는 페이지 탐색으로 사용할 수 있는 링크 그룹입니다. 탐색 요소는 다른 페이지나 현재 페이지의 다른 부분으로 연결됩니다. 예를 들어 모든 링크 그룹을 c787b9a589a3ece771e842a6176cf8e9 요소에 넣을 필요는 없습니다. 이 경우에는 일반적으로 서비스 약관, 홈페이지, 저작권 설명 등을 포함한 링크 그룹이 있습니다. c787b9a589a3ece771e842a6176cf8e9 요소 없이 c37f8231a37e88427e62669260f0074d 요소를 사용하는 것이 가장 적합합니다.

우리는 항상 다음과 같은 방식으로 탐색 모음을 정의해 왔습니다.

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/blog/">Blog</a></li>
  </ul>
</nav>

다음은 W3C에서 제공한 코드 예제입니다.

<body>
    <h1>The Wiki Center Of Exampland</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/events">Current Events</a></li>
            ...more...
        </ul>
    </nav>
    <article>
        <header>
            <h1> Demos in Exampland</h1>
            <p>Written by A. N. Other.</p>
        </header>
        <nav>
            <ul>
                <li><a href="#public">Public demonstrations</a></li>
                <li><a href="#destroy">Demolitions</a></li>
                ...more...
            </ul>
        </nav>
        <div>
            <section id="public">
                <h1>Public demonstrations</h1>
                <p> ...more...</p>
            </section>
            <section id="destroy">
                <h1>Demolitions</h1>
                <p>...more...</p>
            </section>
            ...more...
        </div>
        <footer>
            <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
        </footer>
    </article>
    <footer>
        <p><small>© copyright 1998 Exampland Emperor</small></p>
    </footer>
</body>

以上就是HTML5学习笔记简明版（3）：新元素之hgroup,header,footer的内容，更多相关内容请关注PHP中文网（www.php.cn）！

성명：

이전 기사：HTML5 연구 노트 간결 버전(2): 새 요소 섹션, 기사, 옆다음 기사：HTML5 연구 노트 간결 버전(2): 새 요소 섹션, 기사, 옆

HTML5 연구 노트 간결 버전(3): 새로운 요소 hgroup, 머리글, 바닥글

관련 기사