HTML5-Studiennotizen, kurze Version (3): neue Elemente hgroup, Kopfzeile, Fußzeile

Das Tag

hgroup

wird zum Gruppieren der Titel von Webseiten oder Abschnitten verwendet.

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

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

Header

Das Header-Element ist ein Hilfselement mit Leit- und Navigationsfunktionen. Typischerweise kann das Header-Element den Titel eines Blocks enthalten (z. B. h1 bis h6 oder hgroup-Element-Tags), kann aber auch andere Inhalte enthalten, z. B. Datentabellen, Suchformulare oder zugehörige Logobilder.

Mit diesem Element können wir den Titelteil der gesamten Seite schreiben:

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

Auf derselben Seite kann jeder Inhaltsblock beispielsweise sein eigenes

-Element haben :

<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>

-Element enthält normalerweise ein Titel-Tag (h1 bis h6) oder hgroup. Darüber hinaus können auch andere Inhalte eingebunden werden, wie z. B. Datentabellen, Suchformulare oder zugehörige Logobilder. Gemäß dem neuesten W3C-HTML5-Spezifikationsupdate kann das

-Element-Tag auch in

verwendet werden.

Fußzeile

Das Fußzeilenelement kann als Ende seines direkten übergeordneten Inhaltsblocks oder als Stammblock verwendet werden. Die Fußzeile enthält normalerweise zusätzliche Informationen zu den zugehörigen Blöcken, z. B. den Autor, Links zu verwandten Lektüren und Urheberrechtsinformationen.

Früher (und aktuell) verwenden wir normalerweise Code wie den folgenden, um die Fußzeile der Seite zu schreiben:

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

In HTML5 können wir div nicht verwenden, aber mehr semantisch Als Fußzeile geschrieben:

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

Sie können mehrere

-Elemente auf derselben Seite verwenden, die als Fußzeile der gesamten Seite oder als Inhaltsblock verwendet werden können Ende von >Adresse

Das Adresselement wird verwendet, um Kontaktinformationen im Dokument darzustellen, einschließlich des Namens des Dokumenterstellers, des Site-Links, der E-Mail-Adresse, der tatsächlichen Adresse, der Telefonnummer usw.; Wird verwendet, um die E-Mail-Adresse oder die tatsächliche Adresse darzustellen. Dieses Konzept der „Adresse“ sollte verschiedene Kontaktinformationen zum Ersteller des Dokuments umfassen.

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

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

Basierend auf der obigen Definition können wir den folgenden Code verwenden, um die Namen und Homepage-Links einiger Freiwilliger anzuzeigen:

Das Folgende ist ein weiteres Beispiel, bei dem ebenfalls

verwendet wird. und -Elemente:

Wenn wir wirklich einige Kontaktinformationen auf der Seite anzeigen müssen, die nicht mit den Kontaktinformationen des aktuellen Dokumenterstellers zusammenhängen, können wir das hCard-Mikroformat verwenden:

nav

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>

nav-Element ist eine Linkgruppe, die als Seitennavigation verwendet werden kann; die Navigationselemente verweisen auf andere Seiten oder andere Teile der aktuellen Seite. Es müssen nicht alle Linkgruppen in das

-Element eingefügt werden, in diesem Fall ist es normalerweise eine Gruppe von Links, einschließlich Nutzungsbedingungen, Homepage, Urheberrechtserklärung usw Am besten ist die Verwendung des

-Elements, ohne dass das

-Element erforderlich ist.

<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>

Wir waren schon immer daran gewöhnt, Navigationsleisten wie folgt zu definieren:

<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>

Das Folgende ist ein Codebeispiel des 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）！