ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 学習ノート簡潔版 (3): 新しい要素 hgroup、ヘッダー、フッター
hgroup
d8eccd9ed644b68a6460a2bb84548c82 タグは、Web ページまたはセクションのタイトルをグループ化するために使用されます。
<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 要素タグも 1aa9e5d373740b65a0cc8f0a02150c53 で使用できます。
footer
footer 要素は、直接の親コンテンツ ブロックの末尾またはルート ブロックとして使用できます。通常、フッターには、著者、関連する読書リンク、著作権情報など、関連するブロックに関する追加情報が含まれます。
過去 (そして現在)、私たちは通常、次のようなコードを使用してページのフッターを記述します:
<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 要素を同じページ内で使用できます。これは、ページ全体のフッターとして使用することも、コンテンツ ブロックの最後として使用することもできます。または 23c3de37f2f9ebcb477c4a90aac6fffd 内:
<section> Section content appears here. <footer> Footer information for section. </footer> </section> <article> Article content appears here. <footer> Footer information for article. </footer> </article>
address
address 要素は、文書作成者の名前、サイトリンク、メールアドレス、実際の住所、電話番号などの連絡先情報を文書内に表示するために使用されます。 etc. ; 住所は、電子メール アドレスや実際の住所などの「住所」の概念を示すために使用されるだけでなく、文書の作成者に関連するさまざまな連絡先情報も含まれる必要があります。
上記の定義に基づいて、次のコードを使用して、一部のボランティアの名前とホームページのリンクを表示できます。
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 要素と 46dd80ba616c57a652514755c74c4211 要素を使用した別の例です。現在のドキュメント作成者の連絡先情報に関連しない連絡先情報をページに表示する必要がある場合は、hCard マイクロフォーマットを使用できます:
<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>
nav
nav 要素は、次のように使用できるリンク グループです。ページ ナビゲーション。その中のナビゲーション要素は、他のページまたは現在のページの他の部分にリンクします。すべてのリンク グループを c787b9a589a3ece771e842a6176cf8e9 要素に含める必要はありません。たとえば、この場合、サービス利用規約、ホームページ、著作権表示などのリンク グループが含まれます。 c787b9a589a3ece771e842a6176cf8e9 要素を必要とせずに、c37f8231a37e88427e62669260f0074d 要素を使用するのが最も適切です。
私たちは常に次の方法でナビゲーション バーを定義することに慣れてきました:
<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>
<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)!