Design -Webseiten mithilfe von HTML5 -Semantikcode

Autor：Eve Cole Aktualisierungszeit：2025-03-27 06:00:02

Zunächst möchten wir den Dokumenttyp deklarieren und erstellen.

 <! DocTypehtml>

Schauen Sie sich einen Blick darauf an, es ist einfach und offensichtlich, unempfindlich. Es macht es einfacher, rückwärts kompatibel zu sein. Zumindest kann es Ihnen einige Zeit beim Tippen sparen.

Wir haben jetzt den Typ für das HTML 5 -Dokument definiert. Bisher lief alles gut. Schauen wir uns nun die neuen Tags für HTML5 an. Bevor wir die neue Registerkarte durchsuchen, schauen wir uns an, wie wir normalerweise schreiben:

 <html>
 <kopf>
 ...andere...
 </head>
 <body>
 <Divid = Header>
 <h1> CSS3-HTML5 Home </h1>
 </div>
 <divid = nav>
 <ul>
 <li> Home </li>
 <li> Über </li>
 <li> Kontakt </li>
 </ul>
 </div>
 <divid = content>
 <h1> Titel </h1>
 <p> ... </p>
 </div>
 <divid = footer>
 <p> Copyright -Informationen </p>
 </div>
 </body>
 </html>

Die Verwendung von <Div> im obigen Beispiel ist jetzt eine sehr häufige Praxis. Sein Zweck ist doppelt. Zunächst bietet es eine eindeutige Identitäts -ID, die speziell auf Webseitenkapitel angewendet werden kann. Zweitens ist die Identifizierung als primitive pseudoemantische Struktur. Die ID -Namen auf jeder Website sind möglicherweise anders, daher fällt es uns schwer zu verstehen, was diese IDs bedeuten.

<header> Tag:

Das <Kace> -Tag entspricht dem, das wir normalerweise mit <div id = header> definieren. Wenn Ihre Website immer noch mit <div id = header> so definiert ist, können wir sie jetzt durch <header> ersetzen.

<Av> Tag:

<Av> ist das Navigations -Tag, genau wie wir es normalerweise verwenden:

<ul>

<li> Index </li>

<li> Nachrichten </li>

...

</ul>

</div>

Verwenden Sie nun <Av>:

 <nav>
 <ul>
 <li> <aRef = index.html> home </a> </li>
 <li> <aRef =/über/über/über </a> </li>
 <li> <Ahref =/blog/> blog </a> </li>
 </ul>
 </nav>

<ABSCHNITT> TAG: Das <Stezier> -Tag kann eine Gruppe von Inhalten oder Themengruppen sein, normalerweise mit einem Start -Tag und einem End -Tag. Natürlich kann dieses Tag auch verschachtelt werden.

<artikels> Tag: Es kann einen Abschnitt des Inhalts im <Aktion> -Tag geben.

<Footer> Tag: <Footer> Tag, wenn Sie es nicht sagen, können Sie verstehen, wofür dies ist. Es kann auch mehrere geben, normalerweise am Ende der Website.

Schauen wir uns den letzten Code an:

 <! DocTypehtml>
 <html>
 <kopf>
 ...Sachen...
 </head>
 <body>
 <Header>
 <h1> mySite </h1>
 </header>
 <nav>
 <ul>
 <li> Home </li>
 <li> Über </li>
 <li> Kontakt </li>
 </ul>
 </nav>
 <Abschnitt>
 <h1> myarticle </h1>
 <artikels>
 <p> ... </p>
 </article>
 </Abschnitt>
 <fouter>
 <p> ... </p>
 </footer>
 </body>
 </html>

Durch den Code ist es prägnanter und einfacher zu verstehen, oder?